/* ── La guerre ──────────────────────────────────────────────────────────── */

/* Le premier nombre de l'ecran : combien de jours de vivres il reste. En
   famine il vire a l'alerte, et la couleur ne dit rien toute seule : la
   phrase, elle, dit le compte a rebours. */
.armee__tenue { margin: 0 0 var(--e-2); font-family: var(--police-corps); font-size: var(--t-3); color: var(--texte); }
.armee__tenue.est-en-famine { color: var(--alerte-fond); font-weight: 600; }

.armee__effectif { margin: 0; font-family: var(--police-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.armee__rangs { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.armee__rangs li { font-size: var(--t-3); color: var(--texte); font-variant-numeric: tabular-nums; }
.armee__entretien { margin: var(--e-2) 0 0; font-family: var(--police-corps); font-style: italic; color: var(--parchemin-bas); font-size: var(--t-3); }
.armee__terres { margin: var(--e-1) 0 0; font-size: var(--t-3); color: var(--texte-pale); }

/* L'echelon d'une sorte d'homme : ou elle en est, et ce que l'echelon lui
   ajoute. La barre est un decor, la phrase au-dessus porte les deux nombres. */
.troupe__echelon { margin: var(--e-2) 0 0; }
.troupe__marche { margin: 0; font-size: var(--t-2); color: var(--texte-pale); }
.troupe__jauge { margin: var(--e-1) 0; height: 4px; background: color-mix(in srgb, var(--pierre-0) 35%, transparent); border: 1px solid color-mix(in srgb, var(--pierre-0) 50%, transparent); }
.troupe__jauge-pleine { display: block; height: 100%; background: var(--or); }
.troupe__apport { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--texte); }

/* Le metier d'une sorte d'homme : un choix qui ne se reprend pas. */
.troupe__metier { margin: var(--e-2) 0 0; }
.troupe--ordre { display: grid; gap: var(--e-1); }
.troupe__ordre-bouton { justify-self: start; }
.troupe__ordre-aide { color: var(--texte-pale); font-size: var(--t-2); }
.troupe__rang { display: grid; gap: var(--e-1); margin: var(--e-2) 0 0; }
.troupe__rang-titre { color: var(--or); font-size: var(--t-2); letter-spacing: 0.05em; text-transform: uppercase; }
.troupe__rang-choix { justify-self: start; max-width: 100%; }
.troupe__rang-dit { margin: 0; color: var(--texte-pale); font-size: var(--t-2); line-height: 1.4; }
.troupe__metier-dit { margin: 0; font-size: var(--t-2); color: var(--texte-pale); }
.troupe__metier-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-1) 0 var(--e-1); }
.troupe__metier-aide { display: block; font-size: var(--t-2); color: var(--texte-pale); line-height: 1.4; }

.guerre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); padding: var(--e-2) var(--e-5) var(--e-5); align-items: start; }
.guerre__titre {
  margin: 0 0 var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-pale);
  border-bottom: 1px solid var(--cuir);
  padding-bottom: var(--e-1);
}
.guerre__compte { margin: 0; font-family: var(--police-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.guerre__entretien { margin: var(--e-1) 0 var(--e-4); font-family: var(--police-corps); font-style: italic; color: var(--parchemin-bas); }

.guerre__issue {
  margin: 0 var(--e-5) var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--parchemin);
  background: var(--pierre-2);
}
.guerre__issue.est-gagnee { border-color: var(--or-sourd); }
.guerre__issue.est-perdue { border-color: var(--peril); color: var(--perte); }
.guerre__posture { display: grid; gap: var(--e-1); margin: var(--e-3) 0 var(--e-1); color: var(--texte-pale); font-family: var(--police-corps); }
.guerre__posture select { width: 100%; padding: var(--e-1) var(--e-2); color: var(--parchemin); background: var(--pierre-2); border: 1px solid var(--fer-sombre); border-radius: var(--rayon); font: inherit; }
.guerre__posture-dit { min-height: 1.2em; margin: 0 0 var(--e-2); color: var(--or-sourd); font-family: var(--police-corps); font-style: italic; }

.guerre-duel {
  margin: 0 var(--e-5) var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cuir-clair);
  background: var(--pierre-1);
  overflow: hidden;
}
.guerre-duel.est-gagnee { border-color: var(--or-sourd); }
.guerre-duel.est-perdue { border-color: var(--peril); }
.guerre-duel__titre, .guerre-duel__phase { margin: 0; text-align: center; color: var(--parchemin); font-family: var(--police-corps); }
.guerre-duel__titre { letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-2); }
.guerre-duel__atout { margin: var(--e-1) 0 0; text-align: center; color: var(--or); font-size: var(--t-2); }
.guerre-duel__phase { margin-top: var(--e-2); color: var(--or); font-style: italic; }
.guerre-duel__champ { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3); margin-top: var(--e-3); }
.guerre-duel__camp { display: grid; gap: var(--e-1); min-width: 0; }
.guerre-duel__camp--eux { text-align: right; }
.guerre-duel__nom { overflow: hidden; color: var(--texte); text-overflow: ellipsis; white-space: nowrap; }
.guerre-duel__barre { display: block; height: 0.45rem; background: linear-gradient(90deg, var(--or), var(--or-fonce)); transform-origin: left; transform: scaleX(var(--force)); transition: transform 1.1s cubic-bezier(.2,.75,.25,1); }
.guerre-duel__camp--eux .guerre-duel__barre { justify-self: end; background: linear-gradient(90deg, var(--peril), var(--perte)); transform-origin: right; }
.guerre-duel__pertes { color: var(--texte-pale); font-size: var(--t-2); }
.guerre-duel__contre { color: var(--or); font-size: var(--t-5); }
.guerre-duel.est-au-choc .guerre-duel__contre { animation: choc 0.22s 3; }
.guerre-journal__titre { margin: var(--e-3) 0 var(--e-1); color: var(--or); font-family: var(--police-corps); font-size: var(--t-2); letter-spacing: 0.06em; text-transform: uppercase; }
.guerre-journal { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.guerre-journal__tour { display: grid; gap: var(--e-0); padding: var(--e-1) var(--e-2); border-left: 2px solid color-mix(in srgb, var(--or-sourd) 45%, transparent); background: color-mix(in srgb, var(--pierre-0) 22%, transparent); }
.guerre-journal__dit { color: var(--parchemin); font-family: var(--police-corps); font-size: var(--t-2); }
.guerre-journal__pertes, .guerre-journal__debout { color: var(--texte-pale); font-size: var(--t-2); }
.guerre-journal__debout { color: var(--texte); }
.fief__forces { margin: var(--e-1) 0 0; color: var(--texte-pale); font-size: var(--t-2); }
@keyframes choc { 50% { transform: scale(1.35) rotate(-8deg); color: var(--perte); } }
@media (prefers-reduced-motion: reduce) { .guerre-duel__barre, .guerre-duel.est-au-choc .guerre-duel__contre { animation: none; transition: none; } }
.guerre-ordres { display: grid; gap: var(--e-3); margin-top: var(--e-3); padding: var(--e-3); border: 1px solid color-mix(in srgb, var(--echelon-5) 40%, transparent); background: color-mix(in srgb, var(--pierre-2) 72%, transparent); }
.guerre-ordres__titre, .guerre-ordres__consigne { margin: 0; text-align: center; }
.guerre-ordres__titre { color: var(--parchemin); font-family: var(--police-titre); }
.guerre-ordres__consigne { color: var(--texte-pale); font-family: var(--police-corps); font-style: italic; }
.guerre-ordres__choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.guerre-ordres__choix button, .guerre-ordres__annuler { min-height: 44px; padding: var(--e-2); border: 1px solid var(--fer-sombre); background: color-mix(in srgb, var(--echelon-5) 8%, transparent); color: var(--parchemin); font: inherit; cursor: pointer; }
.guerre-ordres__choix button:hover, .guerre-ordres__choix button:focus-visible { border-color: var(--or); background: color-mix(in srgb, var(--echelon-5) 20%, transparent); }
.guerre-ordres__annuler { justify-self: center; }

.guerre__troupes, .guerre__fiefs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-2);
}

.troupe, .fief {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  padding: var(--e-3) var(--e-4);
}
.troupe__tete, .fief__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); }
.troupe__nom, .fief__nom { font-family: var(--police-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.troupe__avoir { font-variant-numeric: tabular-nums; color: var(--or); font-family: var(--police-titre); }
.fief__maison { font-family: var(--police-corps); font-style: italic; font-size: var(--t-2); color: var(--texte-pale); }

.troupe__dit { margin: var(--e-1) 0 0; font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); font-size: var(--t-3); }
.troupe__chiffres, .fief__etat, .fief__revenu {
  margin: var(--e-2) 0 0;
  font-size: var(--t-2);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.fief__revenu { color: var(--or-sourd); }

.troupe__actions { display: flex; gap: var(--e-2); margin-top: var(--e-2); flex-wrap: wrap; }
.troupe__aide { flex: 1 0 100%; color: var(--or-vif); line-height: 1.35; }
.troupe__actions input {
  width: 4.5rem;
  background: var(--pierre-1);
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
  color: var(--parchemin);
  font-family: var(--police-corps);
  font-variant-numeric: tabular-nums;
}
.troupe__actions button {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-3);
  color: var(--texte);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.08em;
}
.troupe__actions button:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.troupe__actions button.est-discret { color: var(--texte-pale); }
.troupe__actions button.est-discret:hover { border-color: var(--peril); color: var(--perte); }

.fief__chances { height: 3px; margin-top: var(--e-2); background: var(--fer-sombre); }
.fief__part { display: block; height: 100%; background: linear-gradient(90deg, var(--cire), var(--or)); }
.fief__pronostic { margin: var(--e-1) 0 0; font-family: var(--police-titre); font-size: var(--t-1); letter-spacing: 0.12em; color: var(--texte-pale); }

.fief__marcher {
  margin-top: var(--e-3);
  width: 100%;
  padding: var(--e-2);
  font-family: var(--police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--t-1);
  color: var(--parchemin-clair);
  background: radial-gradient(120% 140% at 50% 0%, var(--cire-vif), var(--cire) 60%, var(--cire-fonce));
  border: 1px solid var(--cire-fonce);
  border-radius: var(--rayon);
}
.fief__marcher:hover:not(:disabled) { filter: brightness(1.12); }
.fief__marcher:disabled { background: none; border-color: var(--fer-sombre); color: var(--texte-pale); cursor: not-allowed; }
.fief__parlementer {
  margin-top: var(--e-3);
  width: 100%;
  padding: var(--e-2);
  font-family: var(--police-titre);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--t-1);
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--cuir-clair), var(--pierre-4));
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
}
.fief__parlementer:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.fief__parlementer:disabled { background: none; border-color: var(--fer-sombre); color: var(--texte-pale); cursor: not-allowed; }

.fief.est-tenu { border-color: var(--or-sourd); background: var(--pierre-3); }
.fief.est-tenu .fief__etat { color: var(--or); font-family: var(--police-titre); letter-spacing: 0.08em; font-size: var(--t-2); text-transform: uppercase; }

@media (max-width: 52rem) {
  .guerre { grid-template-columns: 1fr; }
  .fief__actions { flex-wrap: wrap; }
  .fief__actions > button { flex-basis: calc(50% - 0.2rem); }
}
.fief__relation, .fief__champ { margin: var(--e-1) 0 0; color: var(--texte-pale); font-style: italic; font-size: var(--t-3); }

/* ── Les jurés et les marches ───────────────────────────────────────────── */

.guerre__titre--fiefs { margin-top: var(--e-5); }
.guerre__jures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.jure {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  padding: var(--e-2) var(--e-4);
}
.jure.est-vide { color: var(--texte-pale); font-family: var(--police-corps); font-style: italic; border-style: dashed; }
.jure__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); }
.jure__nom { font-family: var(--police-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.jure__maison { font-family: var(--police-corps); font-style: italic; font-size: var(--t-2); color: var(--texte-pale); }
.jure__dit { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--or-sourd); font-variant-numeric: tabular-nums; }

.fief__actions { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
.fief__actions .fief__marcher { margin-top: 0; flex: 1 1 50%; }
.fief__jurer {
  flex: 1 1 50%;
  padding: var(--e-2);
  font-family: var(--police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--t-1);
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}
.fief__jurer:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.fief__jurer:disabled { opacity: 0.35; cursor: not-allowed; }
.fief__duel {
  flex: 1 1 33%;
  padding: var(--e-2);
  font-family: var(--police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--t-1);
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}
.fief__duel:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.fief__duel:disabled { opacity: 0.35; cursor: not-allowed; }

.fief__marche {
  margin: var(--e-1) 0 0;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.fief.est-marche { border-style: dashed; }
.fief.est-jure { border-color: var(--cuir-clair); background: var(--pierre-2); }
.fief.est-jure .fief__etat {
  color: var(--or-sourd);
  font-family: var(--police-titre);
  letter-spacing: 0.08em;
  font-size: var(--t-2);
  text-transform: uppercase;
}

.voie {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  padding: var(--e-4) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.voie__nom { font-family: var(--police-titre); font-size: var(--t-4); color: var(--parchemin); letter-spacing: 0.05em; }
.voie__dit { margin: 0; font-family: var(--police-corps); font-style: italic; color: var(--texte); text-wrap: balance; }
/* ── La maisonnée ───────────────────────────────────────────────────────── */

.bandeau__separateur { color: var(--texte-pale); }
.bandeau__age { color: var(--texte-pale); }

.maisonnee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); padding: var(--e-2) var(--e-5) var(--e-5); align-items: start; }
.maisonnee__situation { margin: 0 var(--e-5) var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid color-mix(in srgb, var(--echelon-5) 45%, transparent); background: color-mix(in srgb, var(--pierre-3) 72%, transparent); }
.maisonnee__situation p { margin: var(--e-1) 0; }
.maisonnee__situation p:first-child { color: var(--or-sourd); font-size: var(--t-4); }
.maisonnee__situation p:nth-child(2) { color: var(--texte-pale); }
.maisonnee__situation p:last-child { color: var(--texte-sombre); font-size: var(--t-3); }
.maisonnee__memoire { margin: 0 var(--e-5) var(--e-4); }
.maisonnee__passage { margin: 0 var(--e-5) var(--e-4); padding: var(--e-3) var(--e-4); border-left: 3px solid var(--or-sourd); background: color-mix(in srgb, var(--cuir) 42%, transparent); }
.maisonnee__passage p { margin: 0; }
.maisonnee__memoire > p { color: var(--texte-sombre); }
.maisonnee__arbre { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.maisonnee__arbre li { padding: var(--e-3) var(--e-3); border: 1px solid color-mix(in srgb, var(--echelon-5) 28%, transparent); background: color-mix(in srgb, var(--pierre-3) 55%, transparent); }
.maisonnee__arbre li.est-actuel { border-color: color-mix(in srgb, var(--echelon-5) 78%, transparent); color: var(--or-sourd); }
.maisonnee__gens, .maisonnee__partis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.maisonnee__heritier {
  margin: 0 0 var(--e-3);
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte);
  text-wrap: balance;
}
.maisonnee__heritier.est-faible { color: var(--parchemin-bas); }
.maisonnee__heritier.est-solide { color: var(--or-sourd); }

.parent, .parti {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  padding: var(--e-2) var(--e-4);
}
.parent.est-vide { color: var(--texte-pale); font-family: var(--police-corps); font-style: italic; border-style: dashed; }
.parent.est-mort { opacity: 0.5; border-style: dashed; }
.parent.est-chef { border-color: var(--or-sourd); background: var(--pierre-3); }
.parent__image { display: block; width: 4.5rem; height: 5.5rem; object-fit: cover; margin-bottom: var(--e-2); border-radius: var(--rayon); }
.parent__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); }
.parent__nom { font-family: var(--police-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.parent__lien {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.parent.est-chef .parent__lien { color: var(--or); }
.parent__dit { margin: var(--e-1) 0 0; font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); font-size: var(--t-3); }
.parent__chiffres, .parti__dot { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--texte); font-variant-numeric: tabular-nums; }
.parti__dot { color: var(--or-sourd); }
.parent__bouton {
  margin-top: var(--e-2);
  width: 100%;
  padding: var(--e-1);
  font-family: var(--police-titre);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--t-1);
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}
.parent__bouton:hover { border-color: var(--or); color: var(--or); }

@media (max-width: 52rem) {
  .maisonnee { grid-template-columns: 1fr; }
}

/* ── Les classements ────────────────────────────────────────────────────── */

.tableaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-4);
  padding: var(--e-2) var(--e-5) var(--e-5);
  align-items: start;
}
.tableau {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  padding: var(--e-3) var(--e-4);
}
.tableau__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--parchemin);
}
.tableau__dit { margin: var(--e-1) 0 var(--e-3); font-family: var(--police-corps); font-style: italic; font-size: var(--t-2); color: var(--texte-pale); }
.tableau__vide { margin: 0; font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); }
.tableau__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-0); }
.place {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--e-2);
  align-items: baseline;
  padding: var(--e-0) var(--e-1);
  font-size: var(--t-3);
  color: var(--texte);
}
.place__rang { font-family: var(--police-titre); font-size: var(--t-2); color: var(--texte-pale); text-align: right; }
.place__valeur { font-variant-numeric: tabular-nums; color: var(--or-sourd); }
.place.est-toi { background: var(--pierre-4); color: var(--parchemin); border-radius: var(--rayon); }
.place.est-toi .place__rang, .place.est-toi .place__valeur { color: var(--or); }
.place.est-coupure { display: block; text-align: center; color: var(--texte-pale); padding: 0; letter-spacing: 0.3em; }
.tableau__place { margin: var(--e-2) 0 0; font-family: var(--police-titre); font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-pale); }

.plateau { margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-2); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.plateau__titre { color: var(--or); font-family: var(--police-corps); font-size: var(--t-2); cursor: pointer; }
.plateau__dit { margin: var(--e-1) 0; color: var(--texte-pale); font-size: var(--t-2); line-height: 1.4; }
.plateau__colonne { margin: var(--e-2) 0; }
.plateau__colonne-titre { margin: 0 0 var(--e-1); color: var(--parchemin); font-size: var(--t-2); letter-spacing: 0.05em; text-transform: uppercase; }
.plateau__chose { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-0) 0; color: var(--texte); font-size: var(--t-2); }
.plateau__case { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; accent-color: var(--or); }
.plateau__nombre { width: 6rem; min-height: 1.6rem; }
.plateau__verdict { margin: var(--e-2) 0; color: var(--parchemin); font-size: var(--t-2); }
.plateau__conclure { min-height: 1.6rem; }

/* L'influence : une ligne de cire au-dessus de l'armee. Le nom, la reserve
   sur son plafond, puis ce qu'elle gagnera demain, qui porte ses causes. */
.influence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  margin: 0 var(--e-5) var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--cire, var(--or));
  background: color-mix(in srgb, var(--pierre-0) 22%, transparent);
  font-variant-numeric: tabular-nums;
}
.influence__nom {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.influence__reserve { font-family: var(--police-titre); color: var(--parchemin); }

/* Le debat sur un titre. Une place prise est tenue par les armes ; ces lignes
   disent qui reconnait le seigneur, et ce qu'il en coute d'acheter une voix. */
.votes { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.votes__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.votes__liste, .vote__maisons { list-style: none; margin: 0; padding: 0; }
.vote + .vote { margin-top: var(--e-4); border-top: 1px solid var(--cuir); padding-top: var(--e-3); }
.vote__lieu { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.vote__compte { margin: var(--e-1) 0 0; font-variant-numeric: tabular-nums; }
.vote__compte.est-gagnant { color: var(--or); }
.vote__compte.est-perdant { color: var(--alerte-fond); }
.vote__delai, .vote__enjeu { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.vote__maisons { margin-top: var(--e-2); display: grid; gap: var(--e-1); }
.voix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-2);
  padding: var(--e-1) var(--e-2);
  border-left: 2px solid var(--cuir);
  font-size: var(--t-3);
}
.voix.est-pour { border-left-color: var(--or); }
.voix.est-contre { border-left-color: var(--alerte-fond); }
.voix__maison { font-family: var(--police-titre); color: var(--parchemin); }
.voix__poids, .voix__payee { font-size: var(--t-2); color: var(--texte-pale); }
.voix__peser { margin-left: auto; }

/* Les lois du royaume. Chaque loi montre ses deux versions et ce que chacune
   change, pour qu'on lise l'effet avant de payer le debat. */
.lois { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.lois__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.lois__liste, .loi__options, .loi__maisons { list-style: none; margin: 0; padding: 0; }
.loi + .loi { margin-top: var(--e-4); border-top: 1px solid var(--cuir); padding-top: var(--e-3); }
.loi__nom { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.loi__dit { margin: var(--e-0) 0 var(--e-2); font-size: var(--t-2); color: var(--texte-pale); }
.loi__options { display: grid; gap: var(--e-1); }
.loi-option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-2);
  padding: var(--e-1) var(--e-2);
  border-left: 2px solid var(--cuir);
  font-size: var(--t-3);
}
.loi-option.est-en-vigueur { border-left-color: var(--or); background: color-mix(in srgb, var(--echelon-5) 8%, transparent); }
.loi-option__nom { font-family: var(--police-titre); color: var(--parchemin); }
.loi-option__effet { color: var(--texte-pale); flex: 1 1 14rem; min-width: 0; }
.loi-option__vigueur { color: var(--or); font-size: var(--t-2); letter-spacing: 0.08em; text-transform: uppercase; }
.loi__compte { margin: var(--e-2) 0 0; font-variant-numeric: tabular-nums; }
.loi__compte.est-gagnant { color: var(--or); }
.loi__compte.est-perdant { color: var(--alerte-fond); }
.loi__delai { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.loi__maisons { margin-top: var(--e-2); display: grid; gap: var(--e-1); }

/* Ce qu'on tient sous cle. Chaque groupe montre sa chance de fuir, son prix,
   et ce qu'une execution coute — avant qu'on ne clique. */
.prisonniers { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.prisonniers__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.prisonniers__places { margin: 0 0 var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; font-variant-numeric: tabular-nums; }
.prisonniers__entasse { color: var(--alerte-fond); }
.prisonniers__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.captif { border-left: 2px solid var(--cuir); padding: var(--e-2) var(--e-2); }
.captif.est-seigneur { border-left-color: var(--or); }
.captif__qui { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.captif__depuis, .captif__note { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.captif__note--sang { color: var(--alerte-fond); }
.captif__risque { margin: var(--e-1) 0 0; font-variant-numeric: tabular-nums; }
.captif__actions { margin-top: var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-2); }
.captif__executer { border-color: var(--alerte-fond); color: var(--alerte-fond); }

/* La lice et les routes. Deux blocs qui se lisent comme les prisonniers : la
   chance et le gain sont posés au-dessus du bouton, jamais après. */
.lice, .routes { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.lice__titre, .routes__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.lice__repos { margin: 0 0 var(--e-2); color: var(--alerte-fond); font-size: var(--t-2); }
.routes__part { margin: 0 0 var(--e-2); font-size: var(--t-3); color: var(--texte-pale); }
.lice__liste, .routes__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }

.tournoi { border-left: 2px solid var(--or); padding: var(--e-2) var(--e-2); }
.tournoi__ou { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.tournoi__jours, .tournoi__second { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.tournoi__bourse { margin: var(--e-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; font-variant-numeric: tabular-nums; }

.epreuve { margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid color-mix(in srgb, var(--bois) 35%, transparent); }
.epreuve__nom { margin: 0; font-family: var(--police-titre); font-size: var(--t-3); color: var(--parchemin); }
.epreuve__chance { margin: var(--e-0) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; font-variant-numeric: tabular-nums; }
.epreuve__risque { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.epreuve__mises { margin-top: var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-2); }

.camp { border-left: 2px solid var(--cuir); padding: var(--e-2) var(--e-2); }
.camp.est-vide { opacity: 0.55; }
.camp__sorte { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.camp__hommes, .camp__butin, .camp__xp, .camp__vide { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }

/* Qui tient le camp, pile par pile. Le nombre d'hommes est deja au-dessus :
   ces lignes disent lesquels, avec les noms du mod. */
/* L'ost des morts, rang par rang. Le nombre est dans la jauge au-dessus ;
   ces lignes disent qui marche, et la dernière ce que la phase vient
   d'ajouter — c'est la seule chose qui dit qu'une nuit a changé de nature. */
.nuit__horde {
  margin: var(--e-2) 0 var(--e-1);
  padding: 0 0 0 var(--e-3);
  list-style: none;
  border-left: 1px solid color-mix(in srgb, var(--glace-clair) 35%, transparent);
}

.nuit__pile {
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texte-pale);
}

.nuit__pile--neuve {
  margin-top: var(--e-1);
  color: var(--glace-clair);
}

.camp__composition {
  margin: var(--e-1) 0 0;
  padding: 0 0 0 var(--e-3);
  list-style: none;
  border-left: 1px solid color-mix(in srgb, var(--texte-pale) 30%, transparent);
}

.camp__pile {
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--texte-pale);
}
.camp__chance { margin: var(--e-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; font-variant-numeric: tabular-nums; }
.camp__marcher { margin-top: var(--e-2); }

/* La parole. Chaque angle porte sa chance et son prix au-dessus du bouton :
   le joueur choisit en sachant, et il perd en sachant pourquoi. */
.parole { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.parole__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.parole__dit { margin: 0 0 var(--e-2); color: var(--or); }
.parole__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.parlement { border-left: 2px solid var(--cuir); padding: var(--e-2) var(--e-2); }
.parlement.est-fermee { opacity: 0.55; }
.parlement__qui { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.parlement__compte, .parlement__ferme, .parlement__enjeu, .parlement__risque { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.parlement__risque { color: var(--alerte-fond); }
.angle { margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid color-mix(in srgb, var(--bois) 35%, transparent); }
.angle.est-dit { opacity: 0.5; }
.angle__chance { margin: var(--e-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; font-variant-numeric: tabular-nums; }
.angle__cout, .angle__dit { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }

/* La Convergence : cinq chapitres, du passé commun à l'avenir ouvert. Le trait
   qui les relie descend le long de la colonne, comme une chronologie sur un
   parchemin. */
.chronologie { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.chronologie__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.chronologie__accroche { margin: 0 0 var(--e-2); font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-4); }
.chronologie__prologue, .chronologie__compteur { margin: 0 0 var(--e-2); font-size: var(--t-2); color: var(--texte-pale); }
.chronologie__compteur { margin: var(--e-2) 0 0; }
.chronologie__liste { list-style: none; margin: 0; padding: 0 0 0 var(--e-4); display: grid; gap: var(--e-3); border-left: 1px solid var(--cuir); }
.chapitre { position: relative; }
.chapitre::before {
  content: '';
  position: absolute;
  left: -1.28rem;
  top: 0.42rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--cuir);
  border: 1px solid var(--or-sourd);
  transform: rotate(45deg);
}
.chapitre.est-passe::before { background: var(--cuir); }
.chapitre.est-echo::before { background: var(--or-sourd); }
.chapitre.est-avenir::before { background: transparent; border-color: var(--alerte-fond); }
.chapitre__titre { margin: 0; font-family: var(--police-titre); color: var(--or); font-size: var(--t-3); }
.chapitre__statut { margin: 0.05rem 0 0; font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-pale); }
.chapitre.est-avenir .chapitre__statut { color: var(--alerte-fond); }
.chapitre__texte { margin: var(--e-1) 0 0; font-size: var(--t-3); color: var(--parchemin); }

/* L'encyclopédie. Chaque nom que le jeu montre a sa fiche, rangée par rayon. */
.encyclopedie { margin: 0 var(--e-5) var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 20%, transparent); }
.encyclopedie__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.encyclopedie__compte, .encyclopedie__rien { margin: 0 0 var(--e-2); font-size: var(--t-2); color: var(--texte-pale); }
.encyclopedie__recherche { width: 100%; max-width: 22rem; margin-bottom: var(--e-2); padding: var(--e-1) var(--e-2); border: 1px solid var(--cuir); background: color-mix(in srgb, var(--pierre-0) 30%, transparent); color: var(--parchemin); }
.encyclopedie__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.rayon__titre { margin: 0 0 var(--e-1); font-family: var(--police-titre); color: var(--or); font-size: var(--t-3); }
/* Chaque rayon se replie sous son titre (encyclopedie.js) : le titre porte le
   compte de ses notices, la liste respire dans le cadre commun des replis. */
.encyclopedie .rayon__titre { margin: 0; }
/* `.rayon` sert aussi aux rayons des objets et de la forge, qui lui donnent
   marge et retrait : repliés, les titres flottaient en retrait du champ de
   recherche, avec 36 pixels entre deux. */
#encyclopedie .rayon { margin: 0; padding: 0; }
.rayon__compte { font: 400 var(--t-2)/1 var(--police-corps); color: var(--texte-pale); }
.rayon__repli > .rayon__fiches { padding: var(--e-2) var(--e-3) var(--e-3); }
.rayon__fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.fiche { border-left: 2px solid var(--cuir); padding: var(--e-1) var(--e-2); }
.fiche__nom { margin: 0; font-family: var(--police-titre); color: var(--parchemin); font-size: var(--t-3); }
.fiche__dit { margin: var(--e-0) 0 0; font-size: var(--t-2); color: var(--texte-pale); }

/* Ce qui s'est passé sur le camp. Le serveur le disait déjà et aucun écran ne
   le montrait : on marchait dessus et la page se repeignait sans un mot. */
.routes__recit { margin: var(--e-2) 0 0; display: grid; gap: var(--e-1); }
.routes__recit p, .camp__gagne, .camp__perdu, .camp__piece { margin: 0; }
.camp__gagne { color: var(--or); }
.camp__perdu { color: var(--perte); }
.camp__piece { font-family: var(--police-corps); font-style: italic; }