/* ============================================================
   ARBRE GÉNÉALOGIQUE — feuille propre à la page.

   Les jetons --k-* viennent de kit/kit.css, chargé avant. On ne garde
   ici que la mise en scène de l'arbre, des cartes et de la fiche.

   La largeur d'une carte (176 px) et la marge entre générations (46 px)
   sont dupliquées dans app.js (LARGEUR_CARTE / ESPACE_COL) : garder les
   trois valeurs synchronisées.
   ============================================================ */

.arb-stats{
  margin: .6em 0 0;
  font-size: 13px;
  color: var(--k-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- Bande de l'arbre : elle prend toute la largeur ------------- */

.arb-viewport{
  flex: 1 1 auto;
  width: 100%;
  margin-top: clamp(14px, 3vh, 28px);
  overflow: auto;
  padding: clamp(18px, 3.5vw, 40px) clamp(16px, 4vw, 56px);
  background:
    radial-gradient(120% 90% at 0% 0%, #ffffff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fbfdfe, #eef4f7);
  border-top: 1px solid var(--k-frame-edge);
  border-bottom: 1px solid var(--k-frame-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-overflow-scrolling: touch;
}

.arb-scroll{ display: inline-block; min-width: 100%; }

#arbreHead{ display: flex; margin-bottom: 14px; }
.arb-colhead{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  color: #5b8ea3;
}

.arb-stage{ position: relative; display: inline-block; min-width: 100%; }
#arbre{ display: inline-block; }
#arbreSvg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.arb-lien{
  fill: none;
  stroke: #b9c9d1;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ---- Arbre récursif ---------------------------------------------- */

.arb-noeud{ display: flex; align-items: center; }
.arb-branche{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin-left: 46px;   /* = ESPACE_COL */
}

/* ---- Carte personne --------------------------------------------- */

.arb-card{
  position: relative;
  z-index: 1;
  flex: 0 0 176px;     /* = LARGEUR_CARTE */
  width: 176px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 5px 0;
  padding: 10px 12px;
  border: 0;
  border-left: 4px solid var(--k-blue-soft);
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--k-ink-strong);
  background: linear-gradient(180deg, #ffffff, #f4f8fa);
  box-shadow: 0 0 0 1px var(--k-frame-edge), var(--k-lift);
  transition: transform .12s ease, box-shadow .12s ease;
}
.arb-card--f{ border-left-color: #e6a6c7; }
.arb-card--h{ border-left-color: #7fb2d9; }

.arb-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--k-blue-soft), 0 0 0 4px rgba(35,182,238,.18), var(--k-lift-hi);
}
.arb-card:focus-visible{ outline: 2px solid var(--k-blue); outline-offset: 2px; }

.arb-card.is-racine{
  background: linear-gradient(180deg, #eafaf2, #d7f0e4);
  box-shadow: 0 0 0 1px #7fd0aa, var(--k-lift);
}
.arb-card.is-selection{
  box-shadow: 0 0 0 2px var(--k-blue), 0 0 0 6px rgba(35,182,238,.20), var(--k-lift-hi);
}

.arb-card__nom{ font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.arb-card__vie{ font-size: 12px; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.arb-card__lieu{ font-size: 11px; color: var(--k-ink-soft); }

.arb-card--inconnu{
  flex: 0 0 176px;
  width: 176px;
  margin: 5px 0;
  padding: 10px 12px;
  border-left: 4px dashed #cfd9df;
  border-radius: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--k-ink-soft);
  background: repeating-linear-gradient(135deg, #f6f8f9 0 6px, #eef2f4 6px 12px);
  box-shadow: inset 0 0 0 1px #e0e7ea;
}

/* ---- Fiche détaillée ------------------------------------------- */

/* `display: flex` / `position: fixed` l'emportent sur la feuille du
   navigateur : sans ces deux lignes, un panneau porteur de `hidden`
   resterait visible. Le kit ne pose pas de règle `[hidden]` globale. */
.fiche[hidden],
.fiche-fond[hidden]{ display: none !important; }

.fiche-fond{
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(40,60,72,.35);
  backdrop-filter: blur(2px);
}

.fiche{
  position: fixed;
  z-index: 41;
  top: 0;
  right: 0;
  width: min(400px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff, #f2f7f9);
  box-shadow: -8px 0 26px rgba(30,70,95,.22);
}

.fiche-tete{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--k-blue-pale);
}
.fiche-tete h2{
  margin: 0;
  flex: 1 1 auto;
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--k-ink-strong);
}
.fiche-fermer{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--k-ink);
  background: #fff;
  box-shadow: 0 0 0 1px var(--k-frame-edge), var(--k-lift);
}
.fiche-fermer:hover{ color: var(--k-bad); }
.fiche-fermer:focus-visible{ outline: 2px solid var(--k-blue); outline-offset: 2px; }

.fiche-corps{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(16px, 3vw, 24px);
}

.fiche-alias{
  margin: 0 0 12px;
  font-style: italic;
  color: var(--k-ink-soft);
}
.fiche-pastilles{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.fiche-dl{ margin: 0 0 16px; }
.fiche-ligne{ display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid #eef2f4; }
.fiche-ligne:first-child{ border-top: 0; }
.fiche-ligne dt{ flex: 0 0 92px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #5b8ea3; }
.fiche-ligne dd{ margin: 0; font-size: 14px; color: var(--k-ink-strong); }

.fiche-note{
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-ink);
  background: var(--k-blue-pale);
  border-radius: 8px;
}

.fiche-groupe{
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5b8ea3;
}

.fiche-perso{
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 0 1px var(--k-frame-edge);
}
.fiche-perso:hover{ box-shadow: 0 0 0 1px var(--k-blue-soft), 0 0 0 3px rgba(35,182,238,.16); }
.fiche-perso:focus-visible{ outline: 2px solid var(--k-blue); outline-offset: 1px; }
.fiche-perso i{ flex: 0 0 auto; font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--k-ink-soft); }
.fiche-perso b{ flex: 1 1 auto; font-size: 14px; color: var(--k-ink-strong); }
.fiche-perso span{ flex: 0 0 auto; font-size: 12px; color: var(--k-ink-soft); font-variant-numeric: tabular-nums; }

.fiche-centrer{ width: 100%; margin-top: 18px; }

body.fiche-ouverte{ overflow: hidden; }

@media (max-width: 620px){
  .fiche{
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 82dvh;
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .arb-card{ transition: none; }
}