*{box-sizing:border-box}
:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#20362d;background:#f4f0e7;
  --green:#315b4b;--green2:#477563;--cream:#f4f0e7;--paper:#fffdf8;
  --line:#d8d2c5;--muted:#718078;--danger:#a74444;--gold:#c69b45;
}
body{margin:0;min-height:100vh;background:
 radial-gradient(circle at 20% 10%,rgba(255,255,255,.9),transparent 35%),
 linear-gradient(135deg,#f6f3eb,#eef3ef)}
button,input{font:inherit}
button{cursor:pointer}
.loading{padding:40px;text-align:center;color:var(--muted)}
.shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}
.sidebar{background:var(--green);color:white;padding:22px 16px;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:22px}
.brand-mark{width:36px;height:36px;border-radius:12px;background:#f0d99f;color:#315b4b;display:grid;place-items:center;font-size:20px}
.nav{display:grid;gap:6px}
.nav button{border:0;background:transparent;color:#eaf2ee;text-align:left;padding:11px 12px;border-radius:10px}
.nav button.active,.nav button:hover{background:rgba(255,255,255,.12)}
.sidebar-foot{margin-top:auto;font-size:12px;color:#cbd9d3}
.main{padding:28px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.topbar h1{font-size:28px;margin:0}
.badge{border:1px solid var(--line);background:var(--paper);padding:7px 10px;border-radius:999px;font-size:12px}
.card{background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 30px rgba(44,68,58,.07)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}
.stat strong{display:block;font-size:28px;color:var(--green)}
.stat span{color:var(--muted);font-size:13px}
.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.panel-title h2{margin:0;font-size:19px}
.muted{color:var(--muted)}
.btn{border:1px solid var(--line);background:white;color:#29473b;border-radius:10px;padding:9px 13px}
.btn.primary{background:var(--green);border-color:var(--green);color:white}
.btn.danger{color:var(--danger)}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth{width:min(460px,100%);background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 18px 55px rgba(44,68,58,.14)}
.auth h1{margin:0 0 8px;font-size:30px}
.auth p{color:var(--muted)}
.field{display:grid;gap:6px;margin:13px 0}
.field label{font-size:13px;font-weight:700}
.field input{border:1px solid var(--line);padding:12px;border-radius:10px;background:white}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
.alert{padding:12px;border-radius:10px;margin:12px 0;background:#fff4d8;border:1px solid #ead398}
.error{background:#fde8e8;border-color:#e6b4b4;color:#8a2f2f}
.ok{background:#e8f5ed;border-color:#b8dcc5;color:#24563a}
.setup-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f3f3ef;padding:10px;border-radius:8px;overflow:auto}
.tree-placeholder{height:440px;position:relative;overflow:hidden;background:
 linear-gradient(#eef2ef 1px,transparent 1px),
 linear-gradient(90deg,#eef2ef 1px,transparent 1px);
 background-size:30px 30px;border-radius:14px;border:1px solid var(--line)}
.family-node{position:absolute;background:white;border:2px solid #6c9c87;border-radius:13px;padding:11px 13px;min-width:145px;box-shadow:0 5px 14px rgba(50,70,60,.08)}
.family-node small{display:block;color:var(--muted)}
.family-node.root{left:44%;top:62%}.family-node.father{left:28%;top:32%}.family-node.mother{left:58%;top:32%}
.tree-line{position:absolute;background:#8ba99a}.vline{width:2px;height:90px;left:50%;top:45%}.hline{height:2px;width:30%;left:35%;top:53%}
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.feature{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.feature b{display:block;margin-bottom:4px}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:10;display:block}.brand{margin-bottom:10px}.nav{display:flex;overflow:auto}.nav button{white-space:nowrap}.sidebar-foot{display:none}.grid{grid-template-columns:repeat(2,1fr)}.feature-list{grid-template-columns:1fr}}
@media(max-width:560px){.main{padding:16px}.grid{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}}

/* Correctif navigation + vues interactives */
.people-list,.simple-list{display:grid;gap:8px}
.person-row,.list-card{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px}
.person-row{cursor:pointer}
.person-row:hover{border-color:#7aa18f;background:#fbfdfb}
.list-card p{margin:7px 0 0}
.modal-backdrop{position:fixed;inset:0;background:rgba(23,38,32,.38);display:grid;place-items:center;z-index:9999;padding:20px}
.modal-card{width:min(560px,100%);max-height:80vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 22px 60px rgba(0,0,0,.22)}
.tree-viewport{height:620px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fbfcfa;cursor:grab}
.tree-viewport:active{cursor:grabbing}
.tree-canvas{position:relative;background:
 linear-gradient(#edf1ee 1px,transparent 1px),
 linear-gradient(90deg,#edf1ee 1px,transparent 1px);
 background-size:30px 30px}
.tree-svg{position:absolute;left:0;top:0;pointer-events:none}
.tree-person{position:absolute;width:190px;min-height:70px;border:2px solid #79a18f;border-radius:13px;background:white;padding:10px 12px;text-align:left;box-shadow:0 5px 16px rgba(50,70,60,.09);z-index:2}
.tree-person:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(50,70,60,.15)}
.tree-person small,.fan-person small{display:block;color:var(--muted);margin-top:4px}
.tree-root{border-color:#c69b45;box-shadow:0 0 0 3px rgba(198,155,69,.12)}
.tree-arrows{display:block;font-size:11px;color:#58796b;margin-top:6px}
.fan-wrap{position:relative;width:1200px;height:650px;overflow:auto;margin:auto;background:
 radial-gradient(circle at 50% 86%,transparent 0 80px,#edf1ee 81px 82px,transparent 83px 175px,#edf1ee 176px 177px,transparent 178px 270px,#edf1ee 271px 272px,transparent 273px)}
.fan-person{position:absolute;width:160px;min-height:56px;border:1px solid #86a797;background:white;border-radius:11px;padding:7px 9px;text-align:left;font-size:12px;box-shadow:0 3px 10px rgba(50,70,60,.08)}
.feature.btn{text-align:left}