/* La parure de l ecran : famille. Cette feuille n habille que cet ecran.
   Le socle commun (cadre, banniere, rangee, sceau, jauge, vignette,
   parchemin, chemin, fanion) vit dans parure-socle.css.

   La planche montre trois colonnes : le chef de maison a gauche, l arbre de
   succession sur un parchemin au centre, la querelle en rouge a droite. */


/* ── La grille des trois colonnes ────────────────────────────────────────── */

#famille .succession {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) minmax(0, 21.5rem);
  gap: var(--e-4);
  align-items: start;
  margin-top: var(--e-2);
}

#famille .succession__colonne {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}

/* Le vieux gabarit a deux moities n a plus rien a montrer : tout son contenu
   est passe dans les trois colonnes. */
#famille .succession__reste { display: none; }

/* La situation tient en trois lignes courtes au-dessus du parchemin : sur la
   planche, le centre appartient a l arbre. */
#famille .maisonnee__situation {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-3);
  line-height: 1.42;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
}

#famille .maisonnee__situation p { margin: 0; }

#famille #famille-statut {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--or-vif);
}

#famille #famille-transmission { color: var(--texte-pale); }

/* Sous la querelle : le dernier passage de generation, puis la memoire de la
   lignee. Les deux prennent le cadre des planches. */
#famille .succession__passage,
#famille .succession__memoire {
  margin: 0;
  padding: var(--e-3) var(--e-4);
}

#famille .succession__passage .guerre__titre,
#famille .succession__memoire .guerre__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--or-vif);
}

#famille .succession__passage p,
#famille .succession__memoire > p {
  margin: 0 0 var(--e-2);
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texte-pale);
}

#famille .succession__memoire .maisonnee__arbre {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--texte);
}

#famille .succession__memoire .maisonnee__arbre li {
  padding: var(--e-1) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 85%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}

#famille .succession__memoire .maisonnee__arbre li.est-actuel {
  color: var(--parchemin);
  border-color: color-mix(in srgb, var(--or) 50%, transparent);
}

#famille .maisonnee__arbre { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Le titre de la page reprend l or des planches. */
#famille .dialogue__titre {
  font-family: var(--police-titre);
  letter-spacing: 0.05em;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}


/* ── Les marques au trait ────────────────────────────────────────────────── */

.succession__marque {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ── Le chef de maison ───────────────────────────────────────────────────── */

.succession__chef .parure__banniere,
.succession__compte .parure__banniere,
#famille .succession__maison > .colonne__titre,
#famille .succession__avoirs > .colonne__titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin: calc(-1 * var(--e-1)) calc(-1 * var(--e-1)) var(--e-3);
  padding: var(--e-1) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border-top: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  clip-path: polygon(0.9rem 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0.9rem 100%, 0 50%);
  text-transform: none;
}

/* Les losanges d or de part et d autre du titre, comme sur la banniere du
   socle. Les blocs venus du HTML n ont pas la classe : ils la reprennent ici. */
#famille .succession__maison > .colonne__titre::before,
#famille .succession__maison > .colonne__titre::after,
#famille .succession__avoirs > .colonne__titre::before,
#famille .succession__avoirs > .colonne__titre::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  background: var(--or);
  transform: rotate(45deg);
  opacity: 0.85;
}

/* Le chef prend la place qui reste, son conjoint une largeur fixe : sans
   conjoint, le portrait occupe toute la colonne, comme sur la planche. */
.chef__couple {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}

.chef__moi { position: relative; flex: 1 1 auto; min-width: 0; }

.souche__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.souche__portrait--grand { aspect-ratio: 5 / 6; }

.souche__image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Une illustration absente ne doit pas remplir le cadre de son chemin. */
.souche__portrait .cadre-vide,
.loyaute__face .cadre-vide {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}
.souche__portrait .cadre-vide__chemin,
.souche__portrait .cadre-vide__taille,
.loyaute__face .cadre-vide__chemin,
.loyaute__face .cadre-vide__taille { font-size: var(--t-1); word-break: break-all; }

/* Le cadrage attendu ne tient pas dans une vignette de deux centimetres : le
   nom du fichier manquant suffit a la reclamer. */
.souche__portrait .cadre-vide__note,
.loyaute__face .cadre-vide__note { display: none; }
.loyaute__face .cadre-vide__taille { display: none; }

/* L ecu de la maison pend au coin du portrait, comme sur la planche. */
.chef__ecu {
  position: absolute;
  top: -0.3rem;
  left: -0.3rem;
  padding: var(--e-0);
  line-height: 0;
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border: 1px solid var(--or-fonce);
}

.chef__anneau {
  display: flex;
  align-items: center;
  align-self: center;
  flex: none;
  padding-top: var(--e-4);
}

.chef__anneau-marque { width: 1.3rem; height: 1.3rem; stroke: var(--or-vif); }

.chef__conjoint {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  width: 5.8rem;
  flex: none;
  padding: var(--e-1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 32%, transparent);
}

.chef__conjoint-lien {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.chef__conjoint-nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  text-align: center;
  color: var(--parchemin);
}

.chef__conjoint-dit {
  font-size: var(--t-2);
  text-align: center;
  color: var(--texte-pale);
}

.chef__nom {
  margin: var(--e-3) 0 var(--e-0);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.03em;
  color: var(--parchemin);
}

.chef__dit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
  font-size: var(--t-3);
  color: var(--texte-pale);
}

.chef__rang {
  padding: 0 var(--e-2);
  color: var(--or);
  border-left: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

.chef__seul {
  margin: 0 0 var(--e-3);
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-3);
  color: var(--texte-pale);
}

.succession__jauge { margin-bottom: var(--e-2); }

.succession__jauge-nom {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.06em;
  color: var(--texte);
}

.chef__derive {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}


/* ── La maison et les terres, dans le cadre des planches ─────────────────── */

#famille .succession__maison,
#famille .succession__avoirs { padding: var(--e-4) var(--e-4); }

#famille .succession__maison .maison__corps {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

#famille .succession__maison .maison__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--or-vif);
}

#famille .succession__maison .maison__devise,
#famille .succession__maison .maison__terres {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

#famille .succession__avoirs .maison__titres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0;
  font-size: var(--t-3);
  color: var(--texte);
}

#famille .succession__avoirs .maison__secrets { margin-top: var(--e-3); }

/* La fiche de la maison tient sous les terres, en lignes serrees : elle
   redit le rang et le renom, deja lus plus haut, et ne doit pas peser. */
#famille .succession__maison #maison-sections {
  margin-top: var(--e-3);
  font-size: var(--t-2);
}

#famille .succession__maison #maison-sections .fiche-ligne { padding: var(--e-1) 0; }


/* ── Les carreaux de chiffres ────────────────────────────────────────────── */

.succession__carreaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--e-2);
}

.succession__carreau {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 85%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
}

.succession__carreau-corps { min-width: 0; }

.succession__carreau-nom {
  display: block;
  font-size: var(--t-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.succession__carreau-valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-variant-numeric: tabular-nums;
  color: var(--parchemin);
}

.succession__derive { font-size: var(--t-1); color: var(--gain); }
.succession__derive.est-contre { color: var(--perte); }


/* ── L arbre de succession, sur le parchemin ─────────────────────────────── */

#famille .arbre {
  position: relative;
  padding: 2.6rem var(--e-4) 3.4rem;
  /* Le bord se fonce vers l exterieur, comme un parchemin manipule. Pas de
     decoupe : le sceau du haut deborde du bloc, et une decoupe le couperait. */
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--bois) 40%, transparent),
    inset 0 0 90px color-mix(in srgb, var(--bois) 22%, transparent),
    0 2px 10px color-mix(in srgb, var(--pierre-0) 55%, transparent);
}

/* Le cachet de cire qui ferme le parchemin, en bas comme sur la planche. */
#famille .arbre::after {
  content: "";
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  width: 2.1rem;
  height: 2.1rem;
  transform: translateX(-50%);
  background: radial-gradient(70% 70% at 35% 30%, var(--cire-vif), var(--peril) 70%, var(--cire-fonce));
  border-radius: 46% 54% 50% 50% / 54% 48% 52% 46%;
  box-shadow: var(--ombre-2), inset 0 2px 5px color-mix(in srgb, var(--parchemin) 18%, transparent);
}

/* Le sceau de cire en haut du parchemin. */
.arbre__sceau {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  transform: translateX(-50%);
  background: radial-gradient(70% 70% at 35% 30%, var(--cire-vif), var(--peril) 70%, var(--cire-fonce));
  border: 1px solid color-mix(in srgb, var(--cire-fonce) 90%, transparent);
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow: var(--ombre-2), inset 0 2px 6px color-mix(in srgb, var(--parchemin) 20%, transparent);
}

.arbre__sceau-marque { width: 1.7rem; height: 1.7rem; stroke: var(--parchemin); }

.arbre__enseigne {
  margin: 0 0 var(--e-4);
  font-size: var(--t-5);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--cire-fonce);
}

.arbre__cime {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  flex-wrap: wrap;
}

.arbre__heritier { position: relative; }

.arbre__etiquette {
  display: block;
  margin: 0 auto var(--e-1);
  padding: var(--e-0) var(--e-4);
  width: max-content;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid color-mix(in srgb, var(--or) 50%, transparent);
}

/* `flex-flow` et pas `flex-wrap` seul : la liste de la maisonnee vient du
   vieux gabarit, qui la met en colonne. Sans la direction, les cartes
   restaient l une sous l autre au milieu du parchemin. */
.arbre__file {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arbre__file--cime { justify-content: center; }

.arbre__sceau-sang { min-height: 2.5rem; padding: var(--e-2) var(--e-5); font-size: var(--t-3); }

/* L heritier deja designe : un bandeau d or sur le parchemin, a la place du
   sceau rouge de « le designer ». */
.arbre__tenu {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid color-mix(in srgb, var(--or) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 20%, transparent);
}

.arbre__tenu::before,
.arbre__tenu::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  background: var(--or);
  transform: rotate(45deg);
  opacity: 0.85;
}

#famille .arbre__dit {
  max-width: 46rem;
  margin: var(--e-3) auto 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-3);
  line-height: 1.45;
  text-align: center;
  color: var(--cuir-clair);
}

#famille .arbre__dit.est-faible { color: var(--cire); }

/* Les deux branches sous l heritier : les enfants a gauche, les autres
   pretendants a droite. Un trait descend de la cime, s ouvre en traverse, puis
   retombe sur chaque groupe. Deux colonnes fixes, sinon la traverse ne sait
   plus ou sont les centres. */
.arbre__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
  margin-top: 2.6rem;
}

/* La descente depuis l heritier, au milieu. */
.arbre__branches::after {
  content: "";
  position: absolute;
  top: -2.2rem;
  left: calc(50% - 1px);
  width: 2px;
  height: 1.1rem;
  background: color-mix(in srgb, var(--bois) 85%, transparent);
}

/* La traverse qui joint les deux centres de colonne. */
.arbre__branches::before {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: 25%;
  right: 25%;
  height: 2px;
  background: color-mix(in srgb, var(--bois) 85%, transparent);
}

.arbre__rang { position: relative; }

.arbre__titre {
  margin: 0 0 var(--e-2);
  padding-bottom: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--cire-fonce);
  border-bottom: 1px solid color-mix(in srgb, var(--bois) 40%, transparent);
}

/* Le trait plein retombe de la traverse sur chaque groupe ; celui des rivaux
   est en pointille, comme la legende le dit. */
.arbre__branches > .arbre__rang::before {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: calc(50% - 1px);
  width: 2px;
  height: 1.1rem;
  background: color-mix(in srgb, var(--bois) 85%, transparent);
}

.arbre__branches > .arbre__rang--rival::before {
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--cire) 85%, transparent) 0 4px, transparent 4px 8px);
}

.arbre__branches > .arbre__rang--rival .arbre__titre {
  color: var(--cire);
  border-bottom-color: color-mix(in srgb, var(--cire) 50%, transparent);
  border-bottom-style: dashed;
}

/* De chaque titre de groupe descend un trait vers chaque carte, comme sur la
   planche. Le trait vit hors de la carte : il ne la borde pas. */
.arbre__branches .arbre__file { margin-top: var(--e-4); }

.arbre__branches .arbre__file > .souche::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: calc(50% - 1px);
  width: 2px;
  height: 0.9rem;
  background: color-mix(in srgb, var(--bois) 85%, transparent);
}

.arbre__rang--rival .arbre__file > .souche::before {
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--cire) 85%, transparent) 0 4px, transparent 4px 8px);
}

/* La barre horizontale du groupe, c est le filet sous son titre : chaque carte
   y retombe par son trait. Pas de rail en plus, sinon deux lignes se doublent. */

.arbre__rang--alliance,
.arbre__rang--maisonnee,
.arbre__rang--morts { margin-top: var(--e-5); }

.arbre__rang--alliance .arbre__titre { border-bottom-style: double; }

.arbre__vide {
  margin: 0;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-2);
  text-align: center;
  color: var(--bois);
  border: 1px dashed color-mix(in srgb, var(--bois) 50%, transparent);
}


/* ── La carte d une personne ─────────────────────────────────────────────── */

#famille .souche {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  width: 8.6rem;
  margin: 0;
  padding: var(--e-2) var(--e-2) var(--e-2);
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 22%, transparent), var(--ombre-2);
}

#famille .souche--heritier {
  width: 11rem;
  border-color: var(--or);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or-vif) 50%, transparent), 0 0 14px color-mix(in srgb, var(--or) 35%, transparent);
}

#famille .souche--morte { opacity: 0.62; border-style: dashed; }
#famille .souche--chef { border-color: var(--or); }
#famille .souche--parti { width: 12rem; }

.souche__couronne {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid var(--or);
  border-radius: var(--rayon-rond);
}

.souche__couronne .succession__marque { stroke: var(--or-vif); width: 0.9rem; height: 0.9rem; }

.souche__nom {
  margin-top: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--parchemin);
}

.souche__lien {
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}

.souche__age {
  font-size: var(--t-2);
  color: var(--texte-pale);
  font-variant-numeric: tabular-nums;
}

#famille .souche__dit {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-1);
  line-height: 1.35;
  color: var(--texte-pale);
}

#famille .souche__chiffres {
  margin: var(--e-1) 0 0;
  font-size: var(--t-1);
  line-height: 1.35;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.souche__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin-top: var(--e-2);
}

#famille .souche__bouton {
  min-height: 2.1rem;
  padding: var(--e-1) var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.04em;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  border-radius: 0;
  cursor: pointer;
}

#famille .souche__bouton:hover:not([disabled]) {
  color: var(--or-vif);
  border-color: var(--or);
}

#famille .souche__bouton[disabled] { opacity: 0.55; cursor: not-allowed; }

#famille .souche__bouton--tenu { color: var(--or); border-color: var(--or-fonce); }

#famille .parti__dot {
  margin: var(--e-1) 0 0;
  font-size: var(--t-1);
  color: var(--or);
}

/* Le couple marie : deux portraits joints par l anneau, la maison dessous. */
.arbre__paire {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  border: 1px solid var(--or-fonce);
}

.arbre__paire-couple {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.arbre__paire .souche__portrait { width: 4.6rem; }

.arbre__anneau { width: 1.4rem; height: 1.4rem; stroke: var(--or-vif); }

.arbre__paire-pied {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.arbre__fanion {
  width: 1.7rem;
  height: 2.05rem;
  font-family: var(--police-titre);
  font-size: var(--t-2);
}

.arbre__paire-dits { min-width: 0; }

.arbre__paire-nom {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--parchemin);
}

.arbre__paire-maison {
  display: block;
  font-size: var(--t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--or);
}

#famille .arbre__rang--alliance #famille-partis-bloc,
#famille #famille-partis-bloc { margin-top: var(--e-3); }

#famille #famille-partis-bloc .guerre__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--cire-fonce);
}

#famille .maisonnee__partis {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-2);
}

#famille .arbre__recruter { display: block; margin: 0 auto var(--e-2); }


/* ── La legende du parchemin ─────────────────────────────────────────────── */

.arbre__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4);
  margin: var(--e-5) 0 0;
  padding: var(--e-3) 0 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--bois) 45%, transparent);
}

.arbre__legende-item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-2);
  color: var(--bois);
}

.arbre__legende-trait {
  display: block;
  width: 1.6rem;
  border-top: 2px solid color-mix(in srgb, var(--bois) 90%, transparent);
}

.arbre__legende-item--anneau .arbre__legende-trait {
  height: 0.7rem;
  border: 2px solid color-mix(in srgb, var(--or-fonce) 90%, transparent);
  border-radius: var(--rayon-pilule);
  width: 1.2rem;
}

.arbre__legende-item--rivale .arbre__legende-trait {
  border-top-style: dashed;
  border-top-color: color-mix(in srgb, var(--cire) 90%, transparent);
}


/* ── La querelle, panneau rouge ──────────────────────────────────────────── */

.succession__crise .parure__banniere--sang {
  margin: calc(-1 * var(--e-1)) calc(-1 * var(--e-1)) var(--e-3);
  font-size: var(--t-5);
}

.crise__dit {
  margin: 0 0 var(--e-3);
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--texte);
}

.crise__titre {
  margin: var(--e-4) 0 var(--e-2);
  padding-bottom: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--or-vif);
  border-bottom: 1px solid color-mix(in srgb, var(--cire-vif) 45%, transparent);
}

/* L anneau : un arc de couleur autour du chiffre. La part remplie vient de
   la variable --part, posee par l ecran. */
.anneau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-1) var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--cire-vif) 35%, transparent);
}

.anneau__cadran {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  flex: none;
  border-radius: var(--rayon-rond);
  background:
    conic-gradient(var(--or) 0turn calc(var(--part, 0) * 1turn), color-mix(in srgb, var(--cuir) 55%, transparent) calc(var(--part, 0) * 1turn) 1turn);
}

.anneau--chaud .anneau__cadran {
  background:
    conic-gradient(var(--cire-vif) 0turn calc(var(--part, 0) * 1turn), color-mix(in srgb, var(--cuir) 60%, transparent) calc(var(--part, 0) * 1turn) 1turn);
}

.anneau__cadran::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  background: linear-gradient(180deg, var(--pierre-2), var(--pierre-0));
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
  border-radius: var(--rayon-rond);
}

.anneau--chaud .anneau__cadran::after { border-color: color-mix(in srgb, var(--cire-vif) 50%, transparent); }

.anneau__valeur {
  position: relative;
  z-index: 1;
  font-family: var(--police-titre);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--or-vif);
}

/* Le chiffre du centre ouvre son detail : il garde la taille de l anneau et
   son pointille d or reste lisible sur le fond sombre du cadran. */
.anneau__valeur .chiffre { border-bottom-color: color-mix(in srgb, var(--or) 70%, transparent); }
.anneau__valeur .chiffre__lignes { font-size: var(--t-3); }

.anneau--chaud .anneau__valeur { color: var(--perte); }

.anneau__cote { min-width: 0; flex: 1; }

.anneau__nom {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.04em;
  color: var(--parchemin);
}

.anneau--chaud .anneau__nom { color: var(--perte); }

.anneau__dit {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texte-pale);
}

.facteurs,
.loyautes {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.facteur {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-2);
}

.facteur__marque { stroke: color-mix(in srgb, var(--or) 85%, transparent); }
.facteur__nom { flex: 1; min-width: 0; color: var(--texte); }

.facteur__valeur {
  flex: none;
  font-family: var(--police-titre);
  font-variant-numeric: tabular-nums;
  color: var(--or-vif);
}

.facteur__valeur.est-contre { color: var(--perte); }

/* La barre a passer se detache des apports : un filet, et pas de signe. */
.facteur--seuil {
  margin-top: var(--e-1);
  padding-top: var(--e-1);
  border-top: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
}

.facteur--seuil .facteur__nom { color: var(--texte-pale); }
.facteur--seuil .facteur__valeur { color: var(--parchemin); }

.loyaute {
  display: grid;
  grid-template-columns: 2.1rem minmax(4rem, 1fr) minmax(5.5rem, 1.1fr);
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-0) 0;
  font-size: var(--t-2);
}

.loyaute__face {
  width: 2.1rem;
  height: 2.5rem;
  overflow: hidden;
}

.loyaute__image { display: block; width: 100%; height: 100%; object-fit: cover; }

.loyaute__qui { min-width: 0; }

.loyaute__nom {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--police-titre);
  color: var(--parchemin);
}

.loyaute__lien {
  display: block;
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.crise__rangees {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin-top: var(--e-4);
}

/* La main tendue porte le vert, comme la ligne « Apaiser » de la planche. */
.crise__rangees .rangee--paix {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gain-fond) 90%, transparent), color-mix(in srgb, var(--bois-sombre) 90%, transparent));
  border-color: color-mix(in srgb, var(--gain) 65%, transparent);
}

.crise__rangees .rangee--paix:hover,
.crise__rangees .rangee--paix:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gain-fond) 95%, transparent), color-mix(in srgb, var(--cuir) 95%, transparent));
  border-color: color-mix(in srgb, var(--or) 70%, transparent);
}

.crise__rangees .rangee--paix .rangee__marque { stroke: var(--gain); }

/* Les rangees sont ecartees les unes des autres : chacune reprend le lisere du
   haut que le socle enleve quand elles sont collees, dans sa propre couleur. */
.crise__rangees .rangee + .rangee { border-top: 1px solid color-mix(in srgb, var(--or) 20%, transparent); }
.crise__rangees .rangee.rangee--premiere { border-top-color: color-mix(in srgb, var(--cire-vif) 80%, transparent); }
.crise__rangees .rangee.rangee--paix { border-top-color: color-mix(in srgb, var(--gain) 65%, transparent); }

.crise__rien {
  margin: 0;
  padding: var(--e-2) var(--e-1) 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

/* Les listes de crise du HTML restent dans le panneau, sans marge propre. */
#famille .maisonnee__crises,
#famille .maisonnee__guerres { margin: 0; }


/* ── La regence ──────────────────────────────────────────────────────────── */

#famille .succession__regence { padding: var(--e-4) var(--e-4); }

#famille .succession__regence .guerre__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--or-vif);
}

#famille .regent {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 85%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

#famille .regent.est-chef { border-color: var(--or); }
#famille .regent .souche__nom { margin: 0; text-align: left; }
#famille .regent .souche__dit { text-align: left; }


/* ── Les tablettes et les telephones ─────────────────────────────────────── */

@media (max-width: 1180px) {
  #famille .succession { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  #famille .succession__gauche { grid-column: 1; }
  #famille .succession__centre { grid-column: 1; grid-row: 2; }
  #famille .succession__droite { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 860px) {
  #famille .succession { grid-template-columns: minmax(0, 1fr); }
  #famille .succession__gauche,
  #famille .succession__centre,
  #famille .succession__droite { grid-column: 1; grid-row: auto; }
  #famille .arbre { padding: var(--e-6) var(--e-3) 3rem; }
  #famille .souche { width: 8rem; }
  #famille .souche--heritier { width: 9.6rem; }
  .anneau__cadran { width: 4.8rem; height: 4.8rem; }
  .anneau__valeur { font-size: var(--t-6); }
  .anneau__nom { font-size: var(--t-4); }
  /* Sur une colonne, les deux branches se suivent : la traverse et la descente
     du milieu ne joignent plus rien et disparaissent. */
  .arbre__branches { grid-template-columns: minmax(0, 1fr); margin-top: var(--e-5); }
  .arbre__branches::before,
  .arbre__branches::after,
  .arbre__branches > .arbre__rang::before { display: none; }
  .arbre__branches > .arbre__rang + .arbre__rang { margin-top: var(--e-4); }
}