/* ------------------------------------------------------------------ tokens */
:root {
  --bg:        #f7f4ee;
  --surface:   #ffffff;
  --surface-2: #f1ece2;
  --line:      #ddd5c7;
  --line-soft: #eae4d8;
  --ink:       #24201b;
  --ink-2:     #5d564c;
  --ink-3:     #8a8175;
  --accent:    #8a5324;
  --accent-bg: #f6ecdf;
  --male:      #35618f;
  --female:    #96406b;
  --ok:        #3f6b52;
  --warn:      #9a6a1c;
  --bad:       #9c3b2e;
  /* Vue élargie : les familles entrées par alliance, hors de ma parentèle.
     Un violet franc, qu'aucun autre repère n'emploie — ni le brun de l'accent,
     ni le bleu et le rose des sexes. */
  --hors:      #6b4f9e;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(40,30,15,.06), 0 8px 24px -12px rgba(40,30,15,.18);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #16140f;
    --surface:   #1e1b16;
    --surface-2: #262219;
    --line:      #38322a;
    --line-soft: #2c2720;
    --ink:       #ece6da;
    --ink-2:     #b3aa9b;
    --ink-3:     #857d70;
    --accent:    #d99a5b;
    --accent-bg: #2b2318;
    --male:      #7aa6d6;
    --female:    #d68fb2;
    --ok:        #7cb391;
    --warn:      #d6ab63;
    --bad:       #e08e7d;
    --hors:      #b39ae0;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .88em; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  font-size: 22px; color: var(--accent);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--accent-bg); border-radius: 8px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.brand-text em {
  font: 400 11px/1.3 var(--sans); color: var(--ink-3); font-style: normal;
  letter-spacing: .03em;
}

.searchbar { position: relative; flex: 1 1 240px; max-width: 420px; }
.searchbar input {
  width: 100%; padding: 8px 12px;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px;
}
.searchbar input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 60vh; overflow: auto; z-index: 60;
}
.suggest a {
  display: block; padding: 7px 12px; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.on { background: var(--accent-bg); text-decoration: none; }
.suggest .sub { color: var(--ink-3); font-size: 12px; }
.suggest .more { padding: 7px 12px; color: var(--ink-3); font-size: 12px; }

.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  padding: 5px 10px; border-radius: 7px; color: var(--ink-2); font-size: 13.5px;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ layout */
main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.foot {
  max-width: 1180px; margin: 0 auto; padding: 0 20px 30px;
  display: flex; gap: 16px; flex-wrap: wrap;
  color: var(--ink-3); font-size: 12px;
}

h1 { font: 600 26px/1.2 var(--serif); margin: 0 0 4px; }
h2 {
  font: 600 15px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin: 32px 0 12px;
}
h3 { font: 600 16px/1.3 var(--serif); margin: 0 0 8px; }
.lead { color: var(--ink-2); margin: 0 0 4px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }

/* ------------------------------------------------------------------ stats */
.stat-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.stat {
  display: block; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
a.stat:hover {
  border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow);
}
a.stat:hover b { color: var(--accent); }
.stat b { display: block; font: 600 24px/1.1 var(--serif); }
.stat span { color: var(--ink-3); font-size: 12px; letter-spacing: .03em; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip i { color: var(--ink-3); font-style: normal; font-size: 11.5px; }

/* histogramme */
.hist { display: flex; align-items: flex-end; gap: 2px; height: 130px; margin-top: 6px; }
.hist div {
  flex: 1; min-width: 3px; background: var(--accent); opacity: .78;
  border-radius: 2px 2px 0 0; position: relative;
}
.hist div { cursor: pointer; }
.hist div:hover { opacity: 1; background: var(--ink); }
.hist div:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1;
}
.hist div::after {
  content: attr(data-t); position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: var(--bg); font-size: 11px;
  padding: 2px 6px; border-radius: 4px; opacity: 0; pointer-events: none;
  transition: opacity .12s;
}
.hist div:hover::after { opacity: 1; }
.hist-axis {
  display: flex; justify-content: space-between;
  color: var(--ink-3); font-size: 11px; margin-top: 4px;
}

.bars { display: grid; gap: 5px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.bar .track { position: relative; height: 20px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .3; }
.bar .lbl {
  position: relative; padding: 0 8px; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar .n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* ------------------------------------------------------------- personnes */
.plist { display: grid; gap: 8px; }
.pcard {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.pcard:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 8px;
  object-fit: cover; background: var(--surface-2);
  display: grid; place-items: center;
  font: 600 13px var(--sans); color: var(--ink-3);
}
.avatar.m { color: var(--male);   background: color-mix(in srgb, var(--male) 12%, var(--surface-2)); }
.avatar.f { color: var(--female); background: color-mix(in srgb, var(--female) 12%, var(--surface-2)); }
.pcard .nm { font-weight: 600; font-family: var(--serif); font-size: 15.5px; }
.pcard .dt { color: var(--ink-2); font-size: 12.5px; }
.pcard .pl { color: var(--ink-3); font-size: 12px; }
.pcard .meta { margin-left: auto; text-align: right; color: var(--ink-3); font-size: 11.5px; flex: none; }

/* ------------------------------------------------- hors de ma parentèle ---
   N'existe qu'en vue élargie : partout ailleurs, aucune fiche ne porte ce
   drapeau. La couleur ne fait pas seule le partage — la carte prend un liseré
   et le nom change de teinte, pour rester lisible sans distinguer les teintes. */
.pcard.hors {
  border-color: color-mix(in srgb, var(--hors) 40%, var(--line));
  border-left: 3px solid var(--hors);
  background: color-mix(in srgb, var(--hors) 5%, var(--surface));
}
.pcard.hors:hover { border-color: var(--hors); }
.pcard.hors .nm { color: var(--hors); }
.avatar.hors {
  color: var(--hors);
  background: color-mix(in srgb, var(--hors) 14%, var(--surface-2));
}
.badge.hors { color: var(--hors); border-color: color-mix(in srgb, var(--hors) 35%, var(--line)); }
.suggest a.hors { color: var(--hors); }
.membre-txt em.hors { color: var(--hors); }

/* ------------------------------------------------------------ fiche perso */
.person-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.portrait {
  width: 128px; height: 160px; object-fit: cover; flex: none;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); box-shadow: var(--shadow);
}
.portrait.ph { display: grid; place-items: center; font: 600 34px var(--serif); color: var(--ink-3); }
.person-head h1 { font-size: 29px; }
.lifespan { font: 400 16px var(--serif); color: var(--ink-2); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.badge.m { color: var(--male); }
.badge.f { color: var(--female); }
.badge.alive { color: var(--ok); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn {
  padding: 6px 13px; border-radius: 8px; font-size: 13.5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.pri:hover { color: var(--bg); opacity: .9; }

/* chronologie */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid; grid-template-columns: 116px 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.tl:first-child { border-top: 0; }
.tl .when { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tl .what b { font-family: var(--serif); font-size: 15px; }
.tl .where { color: var(--ink-3); font-size: 12.5px; }
.tl .desc { font-size: 13.5px; }
.tl .note {
  margin-top: 6px; padding: 8px 10px; font-size: 13px;
  background: var(--surface-2); border-radius: 8px; border-left: 2px solid var(--accent);
  white-space: pre-wrap;
}
.ev-ico { display: inline-block; width: 1.3em; color: var(--ink-3); }

.union { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); }
.union > .spread { margin-bottom: 10px; }

.notebox {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 14px; white-space: pre-wrap; font-size: 14px;
}

.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2);
  cursor: zoom-in;
}
.gallery figcaption { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(10,8,4,.86); }
dialog.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: 8px; display: block; }
dialog.lightbox p { color: #eee; font-size: 13px; text-align: center; margin: 8px 0 0; }

/* ------------------------------------------------------------ arbres */
/* Fenetre defilante : un arbre de 8 generations mesure plusieurs metres.
   Le script recentre le defilement sur la personne racine apres le rendu. */
.tree-wrap {
  overflow: auto; padding: 10px; max-height: 78vh;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  overscroll-behavior: contain;
}
.ped { display: flex; align-items: center; gap: 26px; }
.ped-col { display: flex; flex-direction: column; gap: 6px; }
.ped-node { display: flex; align-items: center; gap: 26px; position: relative; }
.ped-parents { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ped-parents::before {
  content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px;
  border-left: 1px solid var(--line);
}
.pbox {
  display: inline-block; vertical-align: top;
  min-width: 178px; max-width: 210px;
  padding: 6px 9px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 7px; color: var(--ink); font-size: 12.5px; position: relative;
}
.pbox:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.pbox.m { border-left-color: var(--male); }
.pbox.f { border-left-color: var(--female); }
.pbox.hors { border-left-color: var(--hors); }
.pbox.hors b { color: var(--hors); }
.pbox b { display: block; font-family: var(--serif); font-size: 13.5px; font-weight: 600; }
.pbox span { color: var(--ink-3); font-size: 11.5px; }
.pbox.empty { color: var(--ink-3); border-style: dashed; font-style: italic; }
.ped-node > .pbox::after {
  content: ""; position: absolute; right: -14px; top: 50%; width: 14px;
  border-top: 1px solid var(--line);
}
.ped-node.leaf > .pbox::after { display: none; }

/* ---------------------------------------------- page arbre : en-tete/reglages */
.tree-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap;
}
.tree-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tree-controls label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .03em;
}
.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button {
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 0;
  border-left: 1px solid var(--line);
}
.segmented button:first-child { border-left: 0; }
.segmented button:hover { background: var(--surface-2); color: var(--ink); }
.segmented button.on { background: var(--accent); color: var(--bg); font-weight: 600; }

/* ------------------------------------------------------------- vue sablier */
.hourglass { display: flex; flex-direction: column; align-items: center; min-width: max-content; }
/* Boites plus compactes : une fratrie large fait vite plusieurs metres. */
.hourglass .pbox { min-width: 148px; max-width: 166px; }
.hg-self { padding: 6px 0; }
.hg-self .pbox.focus {
  border-color: var(--accent); border-left-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.v-col { display: flex; flex-direction: column; align-items: center; position: relative; }
.v-row { display: flex; justify-content: center; gap: 14px; }
.v-cell { position: relative; }

/* moitie haute : les parents sont au-dessus, les traits descendent vers l'enfant */
.hg-up .v-row { align-items: flex-end; padding-bottom: 14px; }
.hg-up .v-row > .v-col::before,
.hg-up .v-row > .v-col::after {
  content: ""; position: absolute; bottom: 0; width: 50%;
  border-bottom: 1px solid var(--line);
}
.hg-up .v-row > .v-col::before { left: 0; }
.hg-up .v-row > .v-col::after  { right: 0; }
.hg-up .v-row > .v-col:first-child::before,
.hg-up .v-row > .v-col:last-child::after { border-bottom: 0; }
.hg-up .v-cell::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; height: 14px;
  border-left: 1px solid var(--line);
}

/* moitie basse : les enfants sont en dessous, les traits montent vers le parent */
.hg-down .v-row { align-items: flex-start; padding-top: 14px; }
.hg-down .v-row > .v-col::before,
.hg-down .v-row > .v-col::after {
  content: ""; position: absolute; top: 0; width: 50%;
  border-top: 1px solid var(--line);
}
.hg-down .v-row > .v-col::before { left: 0; }
.hg-down .v-row > .v-col::after  { right: 0; }
.hg-down .v-row > .v-col:first-child::before,
.hg-down .v-row > .v-col:last-child::after { border-top: 0; }
.hg-down .v-cell::before {
  content: ""; position: absolute; left: 50%; top: -14px; height: 14px;
  border-left: 1px solid var(--line);
}
.hg-down .v-cell { padding-bottom: 6px; }

/* ------------------------------------------------------------ vue eventail */
:root {
  --fan-pat: #b5763a;
  --fan-mat: #8c5077;
  /* Descendance : une teinte par enfant de la souche, pour suivre les branches. */
  --fan-d0: #3f7d6a;
  --fan-d1: #5d8a45;
  --fan-d2: #2f6c85;
  --fan-d3: #8a7a35;
  --fan-d4: #63588f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fan-pat: #e0a468; --fan-mat: #cf90b4;
    --fan-d0: #7fc0aa; --fan-d1: #a3c983; --fan-d2: #7fb6cd;
    --fan-d3: #cbba71; --fan-d4: #a79bd4;
  }
}
/* L'éventail est zoomable : c'est une fenêtre de rendu, comme l'explorateur. */
.fan-wrap {
  position: relative; height: 76vh; min-height: 430px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
#fan-svg {
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
}
#fan-svg.grabbing { cursor: grabbing; }
.fan .cell { stroke: var(--surface); stroke-width: 1.1; transition: opacity .1s; }
.fan .pat { fill: var(--fan-pat); }
.fan .mat { fill: var(--fan-mat); }
.fan .d0 { fill: var(--fan-d0); }
.fan .d1 { fill: var(--fan-d1); }
.fan .d2 { fill: var(--fan-d2); }
.fan .d3 { fill: var(--fan-d3); }
.fan .d4 { fill: var(--fan-d4); }
.fan .fan-cell:hover .cell { opacity: 1 !important; stroke: var(--ink); }
/* Le violet plein écraserait le texte porté par le secteur : on le tempère
   avec le fond, ce qui l'éclaircit de jour et l'assombrit de nuit. */
.fan .fan-cell.hors .cell { fill: color-mix(in srgb, var(--hors) 62%, var(--surface)); }
.fan text {
  fill: var(--ink); text-anchor: middle; dominant-baseline: middle;
  font-family: var(--sans); pointer-events: none;
}
/* Hiérarchie de l'étiquette : nom, dates, lieu, métier. */
.fan .fan-t0 { font-family: var(--serif); font-weight: 600; }
.fan .fan-t1 { fill: var(--ink-2); }
.fan .fan-t2, .fan .fan-t3 { fill: var(--ink-2); opacity: .85; }
.fan .hub { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.5; }
.fan .hub-text { fill: var(--accent); font-weight: 600; font-family: var(--serif); }

/* -------------------------------------------------------- vue explorateur */
.explorer {
  position: relative; height: 74vh; min-height: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
#exp-svg {
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
}
#exp-svg.grabbing { cursor: grabbing; }

.exp-guide { fill: none; stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 6; }
.exp-guide-lbl {
  fill: var(--ink-3); font: 600 13px var(--sans); letter-spacing: .04em;
}
.exp-link { fill: none; stroke: var(--line); stroke-width: 1.5; }
.exp-link.hl { stroke: var(--accent); stroke-width: 3; }

.nd { cursor: pointer; }
.nd-hit { fill: transparent; }
.nd-dot { fill: var(--ink-3); stroke: var(--surface); stroke-width: 1; }
.nd.pat0 .nd-dot { fill: var(--fan-pat); }
.nd.pat1 .nd-dot { fill: var(--fan-mat); }
.nd.pat2 .nd-dot { fill: var(--fan-d2); }
.nd.pat3 .nd-dot { fill: var(--fan-d4); }
.nd.d0 .nd-dot { fill: var(--fan-d0); }
.nd.d1 .nd-dot { fill: var(--fan-d1); }
.nd.d2 .nd-dot { fill: var(--fan-d2); }
.nd.d3 .nd-dot { fill: var(--fan-d3); }
.nd.d4 .nd-dot { fill: var(--fan-d4); }
.nd.self .nd-dot { fill: var(--accent); stroke-width: 2.5; }
.nd.hors .nd-dot { fill: var(--hors); }
.nd.hors .nd-l0, .nd.hors .nd-l1 { fill: var(--hors); }

.nd-l0 { fill: var(--ink-2); font: 600 11px var(--sans); }
.nd-l1 { fill: var(--ink);   font: 600 11.5px var(--serif); }
.nd-l2 { fill: var(--ink-2); font: 400 9.5px var(--sans); }
.nd-l3 { fill: var(--ink-3); font: 400 8.5px var(--sans); }
.nd.is-self .nd-l1 { fill: var(--accent); font-size: 14px; }

/* --- zoom sémantique : le niveau de détail suit l'échelle --------------- */
/* palier 0 : silhouette seule — la forme et le poids des branches */
#exp-svg .nd-l0, #exp-svg .nd-l1, #exp-svg .nd-l2, #exp-svg .nd-l3 { display: none; }
/* palier 1 : le patronyme */
#exp-svg.lod-1 .nd-l0 { display: block; }
/* palier 2 : prénom, patronyme et dates */
#exp-svg.lod-2 .nd-l1, #exp-svg.lod-2 .nd-l2 { display: block; }
/* palier 3 : tout, lieu de naissance compris */
#exp-svg.lod-3 .nd-l1, #exp-svg.lod-3 .nd-l2, #exp-svg.lod-3 .nd-l3 { display: block; }
/* la personne reste nommée à toutes les échelles */
#exp-svg .nd.is-self .nd-l1 { display: block; }

/* survol : le chemin vers la personne ressort, le reste s'estompe */
#exp-svg.dim .exp-nodes .nd { opacity: .28; }
#exp-svg.dim .exp-nodes .nd.hl { opacity: 1; }
#exp-svg.dim .exp-links .exp-link { opacity: .2; }
#exp-svg.dim .exp-links .exp-link.hl { opacity: 1; }
#exp-svg.dim .nd.hl .nd-l0, #exp-svg.dim .nd.hl .nd-l1 { display: block; }
.nd.hl .nd-dot { stroke: var(--accent); stroke-width: 2; }

.exp-tools {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 5px;
  align-items: center; background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line); border-radius: 9px; padding: 4px;
  backdrop-filter: blur(8px);
}
.exp-tools button {
  min-width: 30px; height: 28px; padding: 0 9px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
}
.exp-tools button:hover { border-color: var(--accent); color: var(--accent); }
.exp-zoom {
  font-size: 11.5px; color: var(--ink-3); min-width: 42px; text-align: right;
  padding-right: 4px; font-variant-numeric: tabular-nums;
}
.exp-hint {
  position: absolute; bottom: 8px; left: 12px; right: 12px;
  font-size: 11.5px; color: var(--ink-3); pointer-events: none;
}

/* `display: grid` l'emporterait sur l'attribut hidden : il faut l'annuler. */
.exp-card[hidden] { display: none; }
.exp-card {
  position: absolute; top: 52px; right: 10px; width: 252px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
  display: grid; gap: 5px;
}
.exp-card-top { display: flex; gap: 10px; align-items: center; }
.exp-card-top b { font-family: var(--serif); font-size: 14.5px; }
.exp-av { width: 42px; height: 42px; border-radius: 7px; flex: none; }
.exp-card-acts { display: flex; gap: 6px; margin-top: 6px; }
.exp-close {
  position: absolute; top: 6px; right: 8px; border: 0; background: none;
  color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer;
}
.exp-close:hover { color: var(--ink); }

/* ----------------------------------------------------------- vue registre */
.reg-head { margin: 4px 0 6px; }
.reg-note { margin: -4px 0 12px; max-width: 62ch; }

/* Deux colonnes de texte : ca se pagine tout seul, sans reduction. */
.register {
  columns: 2; column-gap: 30px; margin-bottom: 8px;
}
.register .entry {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: grid; grid-template-columns: 3.9em 1fr; column-gap: 5px;
  margin: 0 0 9px; font-size: 13.5px; line-height: 1.42;
}
.register .num {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--accent); text-align: right; padding-top: .18em;
  overflow-wrap: anywhere;
}
.register .nm { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.register .yr { color: var(--ink-3); font-size: 12.5px; margin-left: 5px; }
.register .vie { color: var(--ink-2); font-size: 12.5px; }
.register .vie.sp { color: var(--ink-3); }
/* Decalage croissant par generation : la profondeur se voit d'un coup d'oeil. */
.register .lvl2 { margin-left: .9em; }
.register .lvl3 { margin-left: 1.8em; }
.register .lvl4 { margin-left: 2.7em; }
.register .lvl5 { margin-left: 3.6em; }
.entry.souche {
  display: block; padding: 10px 14px; font-size: 15px;
  background: var(--accent-bg); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.entry.souche .num { display: none; }
.entry.souche .nm { font-size: 18px; }

@media (max-width: 760px) { .register { columns: 1; } }

/* descendance : liste imbriquee */
.desc-tree, .desc-tree ul { list-style: none; margin: 0; padding-left: 0; }
.desc-tree ul { margin-left: 18px; padding-left: 16px; border-left: 1px solid var(--line); }
.desc-tree li { margin: 5px 0; }

/* lignee verticale */
.lineage { display: grid; gap: 0; counter-reset: gen -1; }
.lineage .step {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line-soft); align-items: baseline;
}
.lineage .step:first-child { border-top: 0; }
.lineage .g { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lineage .step.legend { background: color-mix(in srgb, var(--warn) 8%, transparent); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
th { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.pill { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.pill.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.pill.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.pill.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }

.notice {
  padding: 12px 14px; border-radius: var(--radius); font-size: 13.5px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
}
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.loading { color: var(--ink-3); padding: 40px 0; text-align: center; }

.picker { display: grid; gap: 6px; }
.picker input {
  padding: 8px 12px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
select {
  padding: 5px 9px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
}

/* ------------------------------------------------------------- impression */
.print-only { display: none; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }

  /* Fond blanc et encre noire : on n'imprime pas le theme sombre. */
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #f4f2ee;
    --line: #b9b3a8; --line-soft: #d8d3c9;
    --ink: #000; --ink-2: #333; --ink-3: #666;
    --accent: #7a4a1e; --accent-bg: #f2e9dd;
    --shadow: none;
  }
  body { background: #fff; font-size: 11px; }
  .topbar, .foot, .nav, .searchbar, .noprint, .suggest,
  .tree-controls, .crumb { display: none !important; }
  main { max-width: none; padding: 0; }
  .print-only { display: block; }
  .print-head {
    font-family: var(--serif); font-size: 12px; margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 1px solid var(--line);
  }
  h1 { font-size: 17px; margin-bottom: 2px; }
  h2 { font-size: 10px; margin: 14px 0 6px; }
  .lead { font-size: 10.5px; }

  /* L'arbre doit sortir en entier : plus de fenetre defilante. */
  .tree-wrap, .fan-wrap {
    max-height: none !important; overflow: visible !important;
    border: 0; padding: 0; background: none;
  }
  .card, .union, .notebox, .tablewrap { box-shadow: none; break-inside: avoid; }
  .pbox, .pcard, .stat, .tl { break-inside: avoid; }
  .pbox { box-shadow: none; }
  a { color: var(--ink); text-decoration: none; }
  .fan-wrap {
    height: auto; border: 0; overflow: visible; background: none;
  }
  #fan-svg { height: auto; max-height: 176mm; cursor: default; }

  /* L'explorateur s'imprime tel qu'il est cadre, avec tout son contenu :
     la viewBox posee par exp-print remplace le cadrage a l'ecran. */
  .explorer {
    height: auto; border: 0; overflow: visible; background: none;
  }
  .exp-tools, .exp-hint, .exp-card { display: none !important; }
  #exp-svg { height: auto; max-height: 176mm; background: none; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .hist div { background: #777; }

  /* Le registre est le format concu pour le papier : trois colonnes en portrait,
     titres non orphelins, aucune reduction d'echelle. */
  .register { columns: 3; column-gap: 8mm; font-size: 9.2px; }
  .register .entry { font-size: 9.2px; margin-bottom: 6px; line-height: 1.34; }
  .register .num { font-size: 8.4px; }
  .register .yr, .register .vie { font-size: 8.6px; }
  .reg-note { display: none; }
  .register h3, h2 { break-after: avoid; }
  h2 { border-bottom: 1px solid var(--line); padding-bottom: 3px; }
  h3 { font-size: 10px; margin: 8px 0 5px; break-after: avoid; }
  .entry.souche { border: 1px solid var(--line); background: none; }
}

@media (max-width: 620px) {
  .tl { grid-template-columns: 1fr; gap: 2px; }
  .person-head { gap: 14px; }
  .portrait { width: 92px; height: 116px; }
  h1 { font-size: 22px; }
}

/* ------------------------------------------------------------- connexion */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-wrap { width: 100%; max-width: 400px; padding: 24px; }
/* `display: grid` l'emporterait sur l'attribut hidden : il faut l'annuler. */
.login-card[hidden] { display: none; }
.login-card {
  display: grid; gap: 10px; padding: 30px 28px 26px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}
.login-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 26px; color: var(--accent);
  background: var(--accent-bg); border-radius: 11px; margin-bottom: 4px;
}
.login-card h1 { font-size: 23px; margin: 0; }
.login-card .lead { font-size: 13.5px; margin: 0 0 8px; }
.login-card label {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
}
.login-card input {
  padding: 10px 13px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
}
.login-card input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.login-card .btn { margin-top: 6px; padding: 10px; font-size: 15px; }
.login-card .btn:disabled { opacity: .6; cursor: default; }
.login-err {
  margin: 0; padding: 9px 12px; font-size: 13px;
  color: var(--bad); border-radius: 8px;
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 32%, transparent);
}

/* Bouton de déconnexion, dans la barre du site. */
.logout {
  padding: 5px 10px; border-radius: 7px; font-size: 13.5px;
  color: var(--ink-3); background: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.logout:hover { background: var(--surface-2); color: var(--ink); }

/* --- connexion : choix entre homonymes --- */
.choix-titre {
  font: 600 20px/1.2 var(--serif); margin: 0;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.choix-liste { display: grid; gap: 6px; margin: 4px 0 10px; }
.choix-item {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 9px 12px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
}
.choix-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.choix-item b { font-family: var(--serif); font-size: 14.5px; }
.choix-item span { color: var(--ink-3); font-size: 12.5px; }
.choix-liste:empty { margin: 0; }
/* la personne retenue comme point d'attache */
.choix-item.retenu {
  border-color: var(--accent); background: var(--accent-bg);
  box-shadow: inset 3px 0 0 var(--accent);
}
.choix-note {
  margin: 0; padding: 9px 12px; font-size: 13px; border-radius: 8px;
  color: var(--ink); background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- création de profil : mêmes champs, deux boutons de front --- */
.login-card select,
.login-card textarea {
  padding: 10px 13px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  resize: vertical;
}
.login-card select:focus,
.login-card textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.login-card label em {
  font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7;
}
.login-duo { display: flex; gap: 8px; margin-top: 2px; }
.login-duo .btn { flex: 1; margin-top: 0; }
.login-duo .btn.pri { flex: 1.4; }

/* --------------------------------------------------- membre connecté */
.membre {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
  padding: 4px 10px 4px 4px; border-radius: 999px; color: var(--ink);
  border: 1px solid var(--line); background: var(--surface);
}
.membre:hover { border-color: var(--accent); text-decoration: none; }
.membre-av { display: block; }
.membre-img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  background: var(--accent-bg); color: var(--accent);
}
.membre-txt { display: flex; flex-direction: column; line-height: 1.2; }
.membre-txt b { font-family: var(--serif); font-size: 13.5px; }
.membre-txt em { font: 400 10.5px var(--sans); font-style: normal; color: var(--ink-3); }

/* Bascule du périmètre, page « Mon profil ». */
.vue-large {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.vue-large.on { border-color: color-mix(in srgb, var(--hors) 45%, var(--line)); }
.vue-large .spread { align-items: center; gap: 10px; }
.hors-exemple { color: var(--hors); font-weight: 600; }

.bienvenue {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--accent-bg); border: 1px solid var(--line);
}
.bienvenue > div { display: flex; flex-direction: column; gap: 1px; }
.bienvenue b { font: 600 19px/1.2 var(--serif); }
.bienvenue span { font-size: 13px; color: var(--ink-2); }
.bienvenue-av {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none;
  display: grid; place-items: center; font: 600 18px var(--sans);
  background: var(--surface); color: var(--accent);
  border: 2px solid var(--surface);
}

/* ma page de profil */
.profil-photo {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 10px;
}
.profil-img {
  width: 96px; height: 96px; border-radius: 14px; object-fit: cover; flex: none;
  display: grid; place-items: center; font: 600 30px var(--serif);
  background: var(--accent-bg); color: var(--accent);
}
label.btn { cursor: pointer; }
.btn.mini { padding: 2px 8px; font-size: 11.5px; border-radius: 6px; }

/* Les photos de ma fiche, celle qui me représente et celles qui pourraient. */
.mes-photos {
  display: grid; gap: 8px; margin: 0 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.photo-choix { margin: 0; }
.photo-choix img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
}
.photo-choix.on img { border: 2px solid var(--accent); }
.photo-choix figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 11.5px; color: var(--ink-3);
}
.photo-choix figcaption b { color: var(--accent); font-weight: 600; }

@media print { .membre, .bienvenue { display: none !important; } }

/* ----------------------------------------------- installation en application */
.install-carte .install-etapes {
  margin: 8px 0 4px; padding-left: 22px; font-size: 13.5px; color: var(--ink-2);
}
.install-carte .install-etapes li { margin-bottom: 4px; }
.ios-glyph {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--line); border-radius: 5px; font-size: 12px;
  vertical-align: -4px; color: var(--accent);
}

/* En application, l'affichage occupe tout l'écran : on respecte les zones
   réservées par l'appareil (encoche, barre gestuelle). */
@media (display-mode: standalone) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  main { padding-bottom: max(60px, env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------- corrections */
.corr-form { display: grid; gap: 12px; }
.corr-champ { display: grid; gap: 3px; }
.corr-champ > span {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
}
.corr-champ input, .corr-champ textarea {
  padding: 8px 11px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  resize: vertical;
}
.corr-champ input:focus, .corr-champ textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.corr-champ em {
  font-style: normal; font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.corr-liste { display: grid; gap: 10px; }
.corr-ligne {
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
.corr-ligne.active { border-left-color: var(--ok); }
.corr-ligne.integree { border-left-color: var(--accent); opacity: .78; }
.corr-ligne.refusee { border-left-color: var(--ink-3); opacity: .62; }
.corr-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.corr-tete b { font-family: var(--serif); font-size: 15px; }
.corr-champ-nom {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em;
  text-transform: uppercase;
}
.corr-etat {
  margin-left: auto; font-size: 11.5px; color: var(--ink-3);
  padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
}
.corr-diff { display: grid; gap: 2px; margin: 6px 0; font-size: 14px; }
.corr-diff del {
  color: var(--ink-3); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent);
}
.corr-diff ins {
  color: var(--ink); text-decoration: none; font-weight: 600;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-radius: 4px; padding: 0 4px; width: fit-content;
}
.corr-note {
  font-size: 13px; color: var(--ink-2); font-style: italic;
  padding-left: 10px; border-left: 2px solid var(--line);
}
.corr-pied {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.corr-cmd {
  margin: 6px 0; padding: 10px 12px; overflow-x: auto;
  background: var(--surface-2); border-radius: 8px;
  font: 12.5px var(--mono); color: var(--ink);
}
.chip.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

/* ------------------------------------------------- barre sur petit écran ---
   Sept liens de navigation sur 375 px occupaient trois lignes et 262 px de
   hauteur — un tiers de l'écran avant même le contenu. Ils se replient. */
.menu-bascule { display: none; }

@media (max-width: 820px) {
  .topbar {
    display: grid; gap: 10px; padding: 8px 14px;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "marque membre bascule" "recherche recherche recherche";
    align-items: center;
  }
  .brand { grid-area: marque; min-width: 0; }
  .brand-text { font-size: 15px; }
  .brand-text em { display: none; }        /* l'intervalle de dates attendra */
  .searchbar { grid-area: recherche; max-width: none; }
  .membre { grid-area: membre; margin: 0; padding: 3px 8px 3px 3px; }
  .membre-txt em { display: none; }
  .membre-txt b { font-size: 13px; }

  .menu-bascule {
    grid-area: bascule; display: grid; gap: 4px; place-content: center;
    width: 38px; height: 34px; padding: 0 8px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  }
  .menu-bascule span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--ink-2); transition: transform .18s, opacity .18s;
  }
  body.menu-ouvert .menu-bascule span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-ouvert .menu-bascule span:nth-child(2) { opacity: 0; }
  body.menu-ouvert .menu-bascule span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Replié par défaut, déplié par le bouton. */
  .nav {
    grid-area: auto; grid-column: 1 / -1;
    display: none; flex-direction: column; gap: 2px;
    padding-top: 8px; border-top: 1px solid var(--line-soft);
  }
  body.menu-ouvert .nav { display: flex; }
  .nav a { padding: 9px 10px; font-size: 15px; border-radius: 8px; }
}

@media (max-width: 480px) {
  main { padding: 18px 14px 48px; }
  h1 { font-size: 22px; }
  .bienvenue { padding: 12px; gap: 11px; }
  .bienvenue-av { width: 44px; height: 44px; }
  .bienvenue b { font-size: 17px; }
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .stat b { font-size: 20px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

/* Les info-bulles de l'histogramme débordaient de 27 px sur un écran de 375 :
   chaque barre y fait 6 px de large, et l'étiquette « 1780s : 343 naissances »
   en fait dix fois plus. Sur un appareil tactile elles sont de toute façon
   inatteignables — aucun survol. */
@media (hover: none) {
  .hist div::after { display: none; }
}
.hist { overflow-x: clip; }

/* Les réglages de la page Arbre — deux menus, cinq vues, l'impression — font
   410 px en ligne insécable. Sur petit écran les vues deviennent des pastilles
   qui passent à la ligne : on perd l'aspect « segmenté », on gagne de tenir
   dans l'écran. */
@media (max-width: 820px) {
  .tree-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .tree-controls { width: 100%; gap: 8px; }
  .tree-controls label { flex: 1 1 130px; }
  .tree-controls select { width: 100%; }
  .segmented {
    display: flex; flex-wrap: wrap; gap: 5px;
    border: 0; border-radius: 0; overflow: visible; width: 100%;
  }
  .segmented button {
    flex: 1 1 auto; border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 12px;
  }
  .explorer, .fan-wrap { height: 62vh; min-height: 320px; }
  .exp-card { left: 10px; right: 10px; width: auto; }
  .register { columns: 1; }
}

/* --------------------------------------------------- recadrage de la photo ---
   Le rond n'est qu'un masque posé sur un carré : ce qui est enregistré est le
   carré entier, que l'application arrondit ensuite partout où elle l'affiche.
   Rogner en rond donnerait un fichier inutilisable ailleurs. */
.recadre-fond {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 18px; background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(2px);
}
.sans-defilement { overflow: hidden; }
.recadre {
  display: grid; gap: 10px; width: 100%; max-width: 340px;
  padding: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; box-shadow: var(--shadow);
}
.recadre h3 { margin: 0; font: 600 18px/1.2 var(--serif); }
.recadre .small { margin: 0; }
.recadre-vue {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 12px; background: var(--surface-2);
  cursor: grab; touch-action: none; user-select: none;
}
.recadre-vue:active { cursor: grabbing; }
.recadre-toile { display: block; width: 100%; height: 100%; }
/* l'extérieur du rond est voilé : on voit ce que l'on perd sans le perdre de vue */
.recadre-masque {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--surface) 62%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
  mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
}
.recadre-zoom { width: 100%; accent-color: var(--accent); }
.recadre-pied { justify-content: flex-end; }

/* --- raccorder une fiche existante plutôt qu'en créer une seconde --- */
.racc {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface);
}
.racc-qui { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.racc-qui b { font-family: var(--serif); font-size: 14.5px; }
.racc-qui span { color: var(--ink-3); font-size: 12.5px; }
.racc .btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------ métiers ---
   Rapprocher des libellés est un travail de comparaison : les variantes d'un
   même métier doivent se lire côte à côte, avec leur nombre de mentions, sans
   quoi on ne sait pas lequel retenir. */
.badge.attention { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }

.metier-groupe h3 { font-size: 16px; }
.metier-membres { display: grid; gap: 4px; margin-bottom: 12px; }
.metier-membre {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 8px; border-radius: 7px; background: var(--surface-2);
  font-size: 13.5px;
}
.metier-membre input { margin: 0; accent-color: var(--accent); }
.metier-membre a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.metier-membre i { color: var(--ink-3); font-style: normal; font-size: 12px; }
.metier-action { align-items: flex-end; }
.metier-action label { display: grid; gap: 3px; flex: 1 1 180px; color: var(--ink-3); }
.metier-vers { width: 100%; }
.metier-ref label { display: grid; gap: 3px; color: var(--ink-3); }
/* Aucun style d'entree n'est global dans cette feuille : chaque formulaire
   habille les siennes. Celles des metiers partagent donc une seule regle. */
.metier-action input, .metier-barre input, .metier-ref input {
  width: 100%; padding: 7px 11px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
.metier-action input:focus, .metier-barre input:focus, .metier-ref input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.metier-coche { accent-color: var(--accent); }

/* Le champ métier : un menu, et sous lui la saisie libre quand « Autre » est
   choisi. Le menu prend la même allure que les autres champs du formulaire. */
.corr-metier select {
  padding: 8px 11px; font: inherit; font-size: 14px; width: 100%;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
.corr-metier input { margin-top: 6px; }

/* Les familles de métiers sont nombreuses et demandent un jugement : repliées,
   elles laissent la page lisible sans les cacher. */
.metier-familles > summary { cursor: pointer; list-style-position: outside; }
.metier-familles > summary h2 { display: inline; }
.metier-familles > summary span { display: block; margin-top: 4px; max-width: 68ch; }

/* Le petit × d'un libellé du référentiel : discret, et rouge au survol
   seulement — il retire une entrée, il ne l'annonce pas. */
.chip-x {
  border: 0; background: none; cursor: pointer; padding: 0 0 0 2px;
  color: var(--ink-3); font-size: 14px; line-height: 1;
}
.chip-x:hover { color: var(--bad); }

/* La barre de fusion suit le défilement : la sélection se fait en haut de la
   liste des libellés, l'action doit rester sous la main jusqu'en bas. */
.metier-barre {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
/* `display: flex` l'emporterait sur l'attribut `hidden` */
.metier-barre[hidden] { display: none; }
.metier-barre span { font-size: 13.5px; color: var(--ink-2); }
.metier-barre input { flex: 1 1 200px; }

/* ------------------------------------------------------------ boîte à idées */

/* L'appel de l'accueil. Il doit se remarquer sans crier : la teinte d'accent
   suffit, la place lui vient de sa largeur pleine entre deux titres. */
.appel-idees {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 16px;
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.appel-idees > div:first-child { flex: 1 1 340px; }
.appel-idees h3 { margin: 0 0 4px; }
.appel-idees p { margin: 0 0 4px; max-width: 62ch; }
.appel-idees .btn { white-space: nowrap; }

/* Le choix du genre : des boutons, pas un menu déroulant — sur un téléphone,
   les trois possibilités doivent se lire sans ouvrir quoi que ce soit. */
.idee-genres { margin-top: 2px; }
button.chip {
  font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink-2);
}
button.chip.on { font-weight: 600; }

.idee-aide {
  margin: 0; padding: 8px 11px; border-radius: 8px;
  background: var(--surface-2);
}
.idee-texte {
  margin: 6px 0; font-size: 14px; color: var(--ink-2);
  white-space: normal; overflow-wrap: anywhere;
}
.idee-reponse {
  margin: 8px 0 0; padding: 9px 12px; font-size: 13.5px;
  border-radius: 8px; background: var(--accent-bg);
  border-left: 2px solid var(--accent); overflow-wrap: anywhere;
}
.idee-reponse b {
  display: block; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent);
}
.idee-repondre { display: grid; gap: 8px; margin-top: 10px; justify-items: start; }
.idee-repondre[hidden] { display: none; }
.idee-repondre textarea {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; resize: vertical;
}
.idee-repondre textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}

/* Ce qui attend le relecteur, à même son lien de navigation. */
.pastille {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  margin-left: 3px; padding: 0 4px; border-radius: 999px;
  font: 600 11px/1 var(--sans); font-style: normal;
  background: var(--accent); color: var(--bg);
}

/* ------------------------------------------------------- compléter sa fiche */
/* Sur sa propre fiche, la carte de saisie doit se distinguer de tout ce qui est
   en lecture seule autour : le fond d'accent dit « ici, tu écris ». */
.ma-fiche {
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.ma-fiche h3 { margin: 0; }
.ma-fiche .spread { align-items: baseline; gap: 12px; }
.ma-fiche input, .ma-fiche textarea { background: var(--surface); }

/* Le récit garde les retours à la ligne de qui l'a écrit, et se lit en serif :
   c'est un texte, pas une donnée. */
.recit {
  white-space: pre-wrap; font-family: var(--serif);
  font-size: 16px; line-height: 1.6; max-width: 68ch;
}

/* --------------------------------------------------------------- parenté */
/* Deux personnes peuvent être apparentées par plusieurs branches à la fois.
   La page en montre une carte par lien : un titre qui nomme la branche, puis
   le schéma ou les colonnes. Les liens proches sont ouverts, les lointains
   repliés. */

.rel-head { margin: 16px 0 0; }
.rel-head h3 { font-size: 19px; margin: 0 0 6px; }
.rel-head p { margin: 4px 0 0; }
.rel-title { color: var(--accent); }
.rel-note {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--accent-bg); font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.rel-bar { display: flex; gap: 10px; align-items: center; margin: 16px 0 10px; }
.rel-h2 { font-size: 16px; margin: 26px 0 4px; }

.rel-card { padding: 0; overflow: hidden; }
.rel-card + .rel-card { margin-top: 12px; }
.rel-card > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 11px 34px 11px 14px; cursor: pointer; list-style: none;
  font-size: 13.5px; border-bottom: 1px solid transparent; position: relative;
}
.rel-card > summary::-webkit-details-marker { display: none; }
.rel-card > summary:hover { background: var(--surface-2); }
.rel-card[open] > summary { border-bottom-color: var(--line-soft); }
.rel-card > summary::after {
  content: "▸"; position: absolute; right: 14px; top: 11px;
  color: var(--ink-3); font-size: 11px;
}
.rel-card[open] > summary::after { content: "▾"; }
.rel-num {
  font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.rel-num i { font-style: normal; opacity: .6; }
.rel-anc { flex-basis: 100%; }

.rel-svg-wrap { padding: 18px 14px 20px; overflow-x: auto; }
.rel-svg { width: 100%; height: auto; display: block; margin: 0 auto; }
.rel-card .grid.cols-2 { padding: 12px 14px 14px; }
.rel-col > .small { margin-bottom: 4px; }

/* Les cases du schéma reprennent le vocabulaire des .pbox : bord gauche coloré
   par le sexe, accent pour les deux personnes comparées. */
.rel-rect {
  fill: var(--surface); stroke: var(--line); stroke-width: 1;
}
.rel-node.m .rel-rect { stroke: color-mix(in srgb, var(--male) 45%, var(--line)); }
.rel-node.f .rel-rect { stroke: color-mix(in srgb, var(--female) 45%, var(--line)); }
.rel-node.hors .rel-rect { stroke: color-mix(in srgb, var(--hors) 55%, var(--line)); }
.rel-node.anc .rel-rect {
  fill: var(--accent-bg);
  stroke: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.rel-node.moi .rel-rect { stroke: var(--accent); stroke-width: 2; }
.rel-node:hover .rel-rect { stroke: var(--accent); filter: brightness(1.02); }
.rel-node { cursor: pointer; }

.rel-first { fill: var(--ink-2); font-size: 11.5px; }
.rel-sn {
  fill: var(--ink); font-size: 13px; font-weight: 600; font-family: var(--serif);
}
.rel-dt { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.rel-node.hors .rel-sn { fill: var(--hors); }
.rel-ph { clip-path: inset(0 round 50%); }
.rel-ph-fb { fill: var(--surface-2); stroke: var(--line); }
.rel-ini { fill: var(--ink-3); font-size: 11px; font-weight: 600; }

.rel-edge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.rel-edge.coupe { stroke-dasharray: 3 4; }
.rel-vow { stroke: color-mix(in srgb, var(--accent) 40%, var(--line)); stroke-width: 1.5; }
.rel-wed { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.rel-band { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 2 5; }
.rel-band-t { fill: var(--ink-3); font-size: 11px; }

@media (max-width: 640px) {
  .rel-svg { min-width: 560px; }
  .rel-card .grid.cols-2 { grid-template-columns: 1fr; }
}

@media print {
  .rel-card { break-inside: avoid; border: 1px solid var(--line); }
  .rel-card > summary::after { display: none; }
  .rel-svg-wrap { overflow: visible; }
}