/* Arbre public « qui est qui » : une scène plein écran que l'on explore au doigt. */
* { box-sizing: border-box; }
html, body.arbre-page { height: 100%; margin: 0; }
body.arbre-page {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: #fbf2e4;
  background: radial-gradient(circle at 50% 40%, #c4623f 0%, #b24f33 60%, #9c4229 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
}
.arbre-entete {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  background: rgba(178,79,51,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,122,94,.6);
  z-index: 2;
}
.arbre-entete h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 300; letter-spacing: .01em; }
.arbre-entete p { margin: 0; font-size: .85rem; color: #f0cdb6; }
.retour-site { color: #fbf2e4; text-decoration: none; font-size: .95rem; padding: .3rem .5rem; border-radius: 6px; }
.retour-site:hover { background: rgba(0,0,0,.1); }
.arbre-vide { margin: auto; padding: 2rem; text-align: center; color: #f0cdb6; font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-style: italic; }
.arbre-vide a { color: #fbf2e4; }

.scene { position: relative; flex: 1; min-height: 0; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.scene.saisi { cursor: grabbing; }
#svg { width: 100%; height: 100%; display: block; }

/* Nœuds : ils apparaissent en poussant depuis le centre. */
.noeud { opacity: 0; transform-origin: 0 0; transform: scale(.4); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.noeud.visible { opacity: 1; transform: none; }
.noeud text { font-family: inherit; fill: #fbf2e4; pointer-events: none; }
.noeud .ombre { fill: rgba(60,20,10,.25); }
.noeud.foyer, .noeud.lien, .noeud.personne { cursor: pointer; }
.noeud.foyer circle.fond { fill: #fbf2e4; stroke: #e8b89a; stroke-width: 2; transition: stroke .3s, stroke-width .3s; }
.noeud.foyer:hover circle.fond, .noeud.foyer.actif circle.fond { stroke: #f2c14e; stroke-width: 3; }
.noeud.foyer.moi circle.fond { stroke: #f2c14e; }
.noeud .initiale { font-family: 'Fraunces', Georgia, serif; font-weight: 400; fill: #b24f33 !important; text-anchor: middle; dominant-baseline: central; }
.noeud .etiquette { text-anchor: middle; font-size: 13px; font-weight: 600; }
.noeud .sous { text-anchor: middle; font-size: 11px; fill: #f0cdb6; }
.noeud.personne circle { fill: #fbf2e4; stroke: #e8b89a; stroke-width: 1.5; }
.noeud.personne.enfant circle { fill: #f2c14e; }
.noeud.personne text[font-size] { fill: #b24f33 !important; }
.noeud.personne text { font-size: 11px; text-anchor: middle; dominant-baseline: central; }
.noeud.cote text, .noeud.lien text { text-anchor: middle; dominant-baseline: central; }
.noeud.cote .pastille { fill: #f6e3c8; }
.noeud.cote text { fill: #b24f33; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.noeud.lien .pastille { fill: #b24f33; stroke: #f6e3c8; stroke-width: 1.2; }
.noeud.lien text { font-size: 12px; font-weight: 600; fill: #fbf2e4; text-transform: uppercase; letter-spacing: .06em; }
.noeud.centre .coeur { fill: #b24f33; }
.noeud.centre .etiquette { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 400; fill: #7a3220; }
.noeud.centre .sous { font-size: 12px; fill: #9c4229; }

/* Branches : dessinées progressivement grâce au dash. */
.branche { fill: none; stroke: #e8b89a; stroke-width: 2; stroke-linecap: round; transition: stroke .3s, stroke-width .3s, opacity .4s; opacity: .9; }
.branche.fine { stroke-width: 1.2; }
.branche.active { stroke: #f2c14e; stroke-width: 3; }
.scene.focalise .branche:not(.active) { opacity: .25; }
.scene.focalise .noeud:not(.chemin):not(.centre) { opacity: .3; }

.commandes { position: absolute; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: .4rem; z-index: 2; }
.commandes button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: #fbf2e4; color: #b24f33;
  font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.commandes button:hover { background: #f6e3c8; }
.aide {
  position: absolute; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  margin: 0; max-width: min(90vw, 420px); padding: .5rem .9rem; border-radius: 999px;
  background: rgba(90,36,20,.85); color: #fbf2e4; font-size: .8rem; text-align: center; pointer-events: none;
  transition: opacity .6s; z-index: 2;
}
.aide.cachee { opacity: 0; }

/* Fiche d'un foyer, en bas de l'écran. */
.fiche {
  position: absolute; left: 50%; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(92vw, 380px); background: #fbf2e4; color: #5a2414; border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 3; animation: monter .35s cubic-bezier(.2,.8,.2,1);
}
.fiche[hidden] { display: none; }
.fiche h2 { margin: 0 0 .2rem; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.3rem; }
.fiche p { margin: 0; font-size: .9rem; color: #9c4229; }
.fiche .prenoms { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.fiche .prenoms span { background: #f6e3c8; border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; }
.fiche .prenoms span.enfant { background: #f2c14e; }
.fiche .fermer { position: absolute; top: .4rem; right: .5rem; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: #9c4229; }
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .noeud, .branche, .aide, .fiche { transition: none !important; animation: none !important; }
}
@media (max-width: 480px) {
  .arbre-entete h1 { font-size: 1.05rem; }
  .aide { left: 1rem; right: 4rem; transform: none; max-width: none; }
}

/* Niveau de détail : de loin, on ne garde que les grandes lignes. */
.scene.loin .noeud.personne text, .scene.loin .noeud.foyer .sous { display: none; }
.scene.tres-loin .noeud.foyer .etiquette, .scene.tres-loin .noeud.lien text { display: none; }