:root{
  --generation-column-width:96px;
  --bg:#f5f6f8;
  --panel:#ffffff;
  --text:#18202a;
  --muted:#74808d;
  --line:#cfd6de;
  --male:#e8f1ff;
  --male-accent:#4d7fc7;
  --female:#fff0f2;
  --female-accent:#c9687a;
  --shadow:0 8px 24px rgba(25,35,45,.09);
  --shadow-hover:0 14px 32px rgba(25,35,45,.16);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

#app{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}

header{
  height:76px;
  flex:0 0 76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e2e6ea;
  box-shadow:0 2px 12px rgba(20,30,40,.05);
  z-index:5;
}

.brand h1{
  margin:0;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.3px;
}

.brand p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
}

#sourceFile{
  color:#8f3c2a;
}

#sourceFile a{
  color:inherit;
  font-weight:650;
}

.tools{
  display:flex;
  align-items:center;
  gap:6px;
}

.family-filter{
  display:flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 2px 0 8px;
  color:#8f3c2a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
}

.family-filter select{
  height:32px;
  min-width:170px;
  padding:0 24px 0 8px;
  border:0;
  border-bottom:2px solid #d9a18d;
  border-radius:4px;
  outline:0;
  background:#fff7f3;
  color:#6f3325;
  font:12px/1 "Inter","Segoe UI",Arial,sans-serif;
  box-shadow:none;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}

.family-filter select:hover,
.family-filter select:focus{
  border-bottom-color:#8f3c2a;
  background:#ffede6;
}

button{
  font:inherit;
}

.tool{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#394552;
  cursor:pointer;
  font-size:18px;
  box-shadow:none;
  transition:background .15s,color .15s;
}

.tool:hover{
  background:#eef3f7;
  color:#263f58;
}

.zoom-tool svg{display:block;width:20px;height:20px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#openHelp{color:#8f3c2a}
#openHelp:hover{background:#fff2ec;color:#8f3c2a}
.info-icon{display:block;width:21px;height:21px;margin:auto;fill:rgb(62, 86, 240);stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.help-panel{position:fixed;inset:0;z-index:30;display:flex;justify-content:flex-end;visibility:hidden;background:rgba(18,25,32,0);transition:background .25s ease,visibility 0s linear .25s;pointer-events:none}
.help-panel.open{visibility:visible;background:rgba(18,25,32,.48);transition:background .25s ease;pointer-events:auto}
.help-card{width:min(430px,100%);height:100%;overflow:auto;padding:26px 28px 28px;border:1px solid #e0e5ea;border-top:0;border-right:0;border-bottom:0;border-radius:16px 0 0 16px;background:#fff;box-shadow:-20px 0 55px rgba(20,30,40,.22);transform:translateX(100%);transition:transform .3s ease}
.help-panel.open .help-card{transform:translateX(0)}
.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.help-head h2{margin:0;color:var(--text);font-size:20px}
.help-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.help-close{width:34px;height:34px;border:1px solid #dce1e6;border-radius:9px;background:#fff;color:#566270;cursor:pointer;font-size:20px;line-height:1}
.help-close:hover{background:#f5f7f9}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.help-section{padding:15px;border:1px solid #e5e9ed;border-radius:12px;background:#fafbfc}
.help-section.wide{grid-column:1 / -1}
.help-section.navigation{grid-column:1 / -1}
.help-section h3{margin:0 0 10px;color:#394552;font-size:13px;letter-spacing:.02em}
.help-list{display:grid;gap:9px;margin:0;padding:0;list-style:none;color:#596673;font-size:13px;line-height:1.45}
.help-list li{display:flex;align-items:flex-start;gap:9px}
.help-key{flex:0 0 auto;min-width:28px;padding:2px 6px;border:1px solid #d7dee5;border-radius:5px;background:#fff;color:#394552;font-size:11px;font-weight:700;text-align:center}
.help-union-icon{display:inline-flex;align-items:center;justify-content:center;padding:2px 4px}
.help-union-icon svg{display:block;width:22px;height:22px}
.help-union-icon circle{fill:#fff;stroke:#8f3c2a;stroke-width:2}
.help-union-icon rect{fill:#fff;stroke:#8f3c2a;stroke-width:1}
.help-union-symbol{display:inline-flex;align-items:center;flex:0 0 auto;width:42px;height:22px}
.help-union-symbol svg{display:block;width:42px;height:22px}
.help-union-symbol line{stroke:#8f3c2a;stroke-width:1.5}
.help-union-symbol circle{fill:#fff;stroke:#8f3c2a;stroke-width:1.5}
.help-swatch{flex:0 0 auto;width:42px;height:1.5px;margin-top:10px;border-radius:4px}
.help-swatch.family{background:#8f3c2a}.help-swatch.parentage{background:#2a8f7e;}
@media(max-width:620px){.help-grid{grid-template-columns:1fr}.help-section.wide{grid-column:auto}}

#zoomValue{
  width:auto;
  min-width:40px;
  text-align:center;
  white-space:nowrap;
  color:#596673;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
}

.zoom-controls{display:flex;align-items:center;gap:0}
.zoom-controls .zoom-tool{margin:0}
.zoom-controls .zoom-tool{width:24px;height:24px;padding:2px}

#viewport{
  position:relative;
  flex:1;
  overflow:hidden;
  cursor:grab;
  background:
    radial-gradient(circle at 1px 1px, #dfe4e9 1px, transparent 1px);
  background-size:24px 24px;
}

#generationLabels{
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:var(--generation-column-width);
  pointer-events:none;
  overflow:hidden;
  background:rgba(245,246,248,.86);
  border-right:1px solid #e2e6ea;
}

.generation-label-fixed{
  position:absolute;
  display:block;
  top:0;
  left:12px;
  color:#8c98a4;
  font-size:8px;
  font-weight:650;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translateY(-50%);
}

#viewport.dragging{
  cursor:grabbing;
}

#canvas{
  position:absolute;
  left:var(--generation-column-width);
  top:0;
  transform-origin:0 0;
  user-select:none;
}

svg{
  display:block;
  overflow:visible;
}

.person-card{
  cursor:pointer;
}

.card-body{
  fill:var(--panel);
  stroke:#d9dfe5;
  stroke-width:1.4;
  filter:url(#cardShadow);
  transition:stroke .15s;
}

.person-card:hover .card-body{
  stroke:#9ca8b4;
}

.card-accent{
  stroke:none;
}

.deceased-ribbon{
  pointer-events:none;
}

.deceased-ribbon polygon{
  fill:#7d8791;
  opacity:.24;
}

.card-name{
  fill:var(--text);
  font-size:15px;
  font-weight:650;
}

.card-dates{
  fill:var(--muted);
  font-size:12px;
}

.card-photo{
  display:block;
  stroke:#fff;
  stroke-width:3;
  overflow:hidden;
}

.photo-placeholder-bg{
  fill:#eef1f4;
}

.photo-placeholder-head{
  fill:#9aa6b1;
}

.photo-placeholder-body{
  fill:#9aa6b1;
}

.dialog-photo{
  object-fit:cover;
}

.connector{
  fill:none;
  stroke:#2a8f7e;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.union-dot{
  fill:#fff;
  stroke:#8f3c2a;
  stroke-width:1.5;
}

.union-connector{
  stroke:#8f3c2a;
}

.union-date{
  fill:#8f3c2a;
  font-size:11px;
  font-weight:600;
}

.union-status-mark{
  stroke:#8f3c2a;
  stroke-width:2;
  stroke-linecap:round;
}

.remarriage-toggle{cursor:pointer}
.remarriage-toggle circle{fill:#fff;stroke:#8f3c2a;stroke-width:1.5}
.remarriage-toggle rect{fill:#fff;stroke:#8f3c2a;stroke-width:1}
.remarriage-toggle:hover circle{fill:#fff4ef;stroke:#8f3c2a}

.generation-label{
  fill:#a2abb4;
  font-size:11px;
  font-weight:650;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

/* Modal */
#modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(18,25,32,.48);
  backdrop-filter:blur(5px);
}

#modal.open{
  display:flex;
}

#photoModal{
  position:fixed;
  inset:0;
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(18,25,32,.72);
  backdrop-filter:blur(3px);
}

#photoModal.open{
  display:flex;
}

.photo-lightbox{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:min(90vw, 1000px);
  max-height:90vh;
  padding:18px 18px 12px;
  background:linear-gradient(180deg,#fffdfb,#f8f0eb);
  border:1px solid #efe1d9;
  border-radius:18px;
  box-shadow:0 28px 90px rgba(0,0,0,.35);
  overflow:hidden;
  animation:appear .18s ease-out;
}

.photo-lightbox img{
  display:block;
  max-width:calc(90vw - 60px);
  max-height:calc(90vh - 60px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(36,29,24,.15);
}

.photo-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border:1px solid rgba(116,95,84,.2);
  border-radius:50%;
  background:rgba(255,255,255,.8);
  color:#4b3a32;
  font-size:20px;
  line-height:1;
}

.dialog{
  width:min(680px,calc(100vw - 36px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:#fff;
  border-radius:20px;
  box-shadow:0 25px 70px rgba(0,0,0,.25);
  animation:appear .18s ease-out;
}

@keyframes appear{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}

.dialog-head{
  position:relative;
  display:flex;
  gap:16px;
  padding:20px 22px 18px;
  border-bottom:1px solid #edf0f2;
}

.dialog-photo-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  flex:0 0 auto;
}

.dialog-photo{
  width:92px;
  height:112px;
  object-fit:cover;
  border-radius:12px;
  background:#eef1f4;
  display:block;
}

#dialogPhoto .album{
  margin:0;
  align-self:flex-start;
}

.no-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:92px;
  height:112px;
  color:#a0a9b2;
  font-size:30px;
  font-weight:650;
  border-radius:12px;
  background:#eef1f4;
}

.dialog-info{
  padding-top:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.dialog-info h2{
  margin:0 28px 0 0;
  font-size:22px;
  letter-spacing:-.4px;
}

.dialog-dates{
  color:var(--muted);
  font-size:13px;
}

.dialog-info .album{
  margin:0;
}

.close,
.edit-button{
  position:absolute;
  top:18px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f1f3f5;
  color:#53606d;
  cursor:pointer;
  font-size:21px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.close{
  right:20px;
}

.edit-button{
  right:64px;
}

.edit-button svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
  object-fit:contain;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}

.close:hover,
.edit-button:hover{background:#e7eaed}

.dialog-content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  padding:18px 22px 20px;
  align-items:start;
}

.dialog-content.has-act-panel{
  grid-template-columns:minmax(0,1fr) 300px;
}

.dialog-main{
  min-width:0;
}

.dialog-act-panel{
  display:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#f8f4f1;
  border:1px solid #e9d9cc;
  border-radius:14px;
  padding:16px;
  position:sticky;
  top:12px;
  overflow:hidden;
}

.dialog-content.has-act-panel .dialog-act-panel{
  display:flex;
}

.dialog-act-panel h3{
  margin:0 0 12px;
  font-size:15px;
  color:#4b3328;
}

.dialog-act-panel img{
  display:block;
  width:100%;
  max-width:100%;
  height:260px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid #eadfd7;
  background:#f2efe9;
}

.dialog-act-panel-text,
.act-panel-text{
  margin-top:12px;
  white-space:pre-wrap;
  line-height:1.6;
  color:#3f3a38;
  font-size:13px;
}

.section{
  margin-bottom:16px;
}

.section-title{
  margin:0 0 9px;
  font-size:11px;
  color:#89939d;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
}

.relations{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.relation{
  border:1px solid #e0e5e9;
  background:#fafbfc;
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  color:#34404c;
  font-size:12px;
}

.relation.sex-m{
  border-color:#c6d9f2;
  background:#f1f6ff;
}

.relation.sex-f{
  border-color:#efcbd2;
  background:#fff4f5;
}

.relation:hover{
  background:#f1f4f7;
}

.relation.sex-m:hover{background:#e7f0ff}
.relation.sex-f:hover{background:#ffeaee}

.relation .kind{
  display:block;
  color:#9aa3ac;
  font-size:10px;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.album{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(196,91,60,.28);
  border-radius:10px;
  background:linear-gradient(180deg,#f9f4f0,#efe3d8);
  color:#4c332d;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  box-shadow:0 1px 0 rgba(61,44,35,.06);
  margin:0 0 10px;
}

.album:hover{
  background:linear-gradient(180deg,#f3eae2,#eadbcf);
  border-color:rgba(196,91,60,.42);
}

.relations .album {
  display:inline-flex;
  width:auto;
  margin:0;
}

#dialogContent .section .album {
  margin-bottom:0;
}

.empty{
  color:#a0a8b0;
  font-size:13px;
}

.document-thumb{
  width:66px;
  height:58px;
  padding:0;
  border:1px solid #e0e5e9;
  border-radius:6px;
  background:#edf0eb;
  cursor:pointer;
  overflow:hidden;
}

.document-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.document-thumb:hover{
  border-color:rgba(196,91,60,.42);
}


/* Small screen */
@media(max-width:700px){
  header{padding:0 16px}
  .brand h1{font-size:17px}
  .brand p{display:none}
  .tools{max-width:58vw;overflow-x:auto}
  .family-filter select{min-width:135px}
  .dialog-head{padding:22px}
  .dialog-content{padding:20px 22px}
}

/* Mise en évidence d'une branche : le reste est grisé */
.person-card,
[data-family-branch],
.remarriage-toggle{
  transition:opacity .2s ease, filter .2s ease;
}
.person-card.dimmed,
.remarriage-toggle.dimmed{
  opacity:.2;
  filter:grayscale(1);
}
[data-family-branch].dimmed:not([opacity="0"]){
  opacity:.2;
  filter:grayscale(1);
}