/* ── Gouverner tes terres (lot 9, 24/09/2026) ────────────────────────────
   interface/composants/gouverner.jsx, monté dans #gouverner-racine.
   Même grammaire que la liste des ouvrages (parure-domaine.css) : une ligne
   par terre, les chiffres dans les mêmes colonnes d'une ligne à l'autre, la
   fiche dépliée sous la ligne ouverte. Chaque règle porte les deux
   identifiants : la règle générique des boutons des pages gagne sinon
   (piège 2 de la mémoire de l'interface).

   Aucune couleur en dur : tout vient des variables de socle.css, parure.css
   et couleurs.css, les transparences par color-mix. Le cadre commun du jeu
   reprendra ces variables. */

#gouverner #gouverner-racine { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }

/* Les pages gardent 8rem de marge de défilement en haut pour leur titre
   collant (ecrans-ui-senior.css) ; ici la marge est la hauteur que ce titre
   couvre vraiment, et une ligne ouverte arrive juste sous l'en-tête collant. */
html[data-vue="jeu"] #gouverner.page { scroll-padding-top: calc(var(--gouverner-sous-le-titre, 7.5rem) + 0.5rem); }
#gouverner #gouverner-racine .gouverner-ecran { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }

#gouverner #gouverner-racine :is(.gouverner__etat, .gouverner-liste, .gouverner__caravanes) {
  padding: var(--e-3) var(--e-4);
  background: linear-gradient(160deg, color-mix(in srgb, var(--pierre-3) 88%, transparent), color-mix(in srgb, var(--pierre-1) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--or) 45%, transparent);
}

#gouverner #gouverner-racine .gouverner__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--or);
}

#gouverner #gouverner-racine .gouverner__etat { display: flex; flex-direction: column; gap: var(--e-1); }
#gouverner #gouverner-racine .gouverner__etat-ligne { margin: 0; font-size: var(--t-3); line-height: 1.5; color: var(--parchemin); }
#gouverner #gouverner-racine .gouverner__compte {
  font-family: var(--police-titre);
  font-size: var(--t-6);
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
}
#gouverner #gouverner-racine .gouverner__alerte { color: var(--perte); }

/* Les tris */
#gouverner #gouverner-racine .gouverner__tris { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: 0 0 var(--e-4); }
#gouverner #gouverner-racine button.gouverner__tri {
  min-height: 44px;
  padding: var(--e-1) var(--e-3);
  font: inherit;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  color: var(--texte-pale);
  background: color-mix(in srgb, var(--pierre-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  cursor: pointer;
}
#gouverner #gouverner-racine button.gouverner__tri[aria-pressed="true"] {
  color: var(--encre);
  background: linear-gradient(180deg, var(--or-vif), var(--or-fonce));
  border-color: var(--or-vif);
}

/* Au téléphone, deux étages par terre : le nom sur toute la largeur, puis
   l'impôt, la colère et la menace sous les trois colonnes de l'en-tête. Le
   bilan, la garnison et la défense passent dans la fiche. */
#gouverner #gouverner-racine .gouverner__entetes,
#gouverner #gouverner-racine button.gouverner__rangee {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  column-gap: var(--e-2);
  row-gap: var(--e-1);
}
#gouverner #gouverner-racine .gouverner__entetes > :first-child { display: none; }
#gouverner #gouverner-racine button.gouverner__rangee .gouverner__terre { grid-column: 1 / -1; }
#gouverner #gouverner-racine .gouverner__large { display: none; }

/* L'en-tête des colonnes colle sous le titre de la page quand une fiche
   ouverte fait défiler la liste (retour du 24/09/2026 : il passait à moitié
   sous le titre). --gouverner-sous-le-titre est la hauteur que le titre
   collant laisse couverte, mesurée par l'écran. */
#gouverner #gouverner-racine .gouverner__entetes {
  position: sticky;
  top: var(--gouverner-sous-le-titre, 0px);
  z-index: 2;
  padding: 0.55rem 0.5rem 0.45rem calc(0.5rem + 3px);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  background: var(--pierre-1);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  /* Le bas du titre collant est en fondu : sans ce masque, la ligne qui passe
     dessous s'y lit à moitié. Les tris gardent au-dessus une marge plus haute
     que le masque, pour qu'il ne les morde pas à l'arrêt. */
  box-shadow: 0 -0.85rem 0 var(--pierre-1);
}

#gouverner #gouverner-racine :is(.gouverner__liste, .gouverner__ordres, .gouverner__rente, .gouverner__liste-simple) { list-style: none; margin: 0; padding: 0; }
#gouverner #gouverner-racine .gouverner__item {
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  scroll-margin: 2.2rem 0 5.5rem;
}

/* La tenue du trône et les prétendants, où mènent la quête du prétendant et l'alerte du trône : au téléphone, la barre
   d'onglets collante mordait leur première ligne (17/10/2026). */
#gouverner :is(#trone-tenue, #pretendants) { scroll-margin-top: 4rem; }

#gouverner #gouverner-racine button.gouverner__rangee {
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: var(--e-2) var(--e-2);
  font: inherit;
  font-family: var(--police-corps);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--parchemin);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  filter: none;
  cursor: pointer;
  scroll-margin: 2.2rem 0 5.5rem;
}
#gouverner #gouverner-racine button.gouverner__rangee:hover { background: color-mix(in srgb, var(--or) 7%, transparent); transform: none; }
#gouverner #gouverner-racine .gouverner__item.est-le-domaine button.gouverner__rangee { border-left-color: color-mix(in srgb, var(--or) 50%, transparent); }
#gouverner #gouverner-racine .gouverner__item.est-menacee button.gouverner__rangee { border-left-color: var(--alerte-fond); }
#gouverner #gouverner-racine .gouverner__item.est-soulevee button.gouverner__rangee { border-left-color: var(--cire-vif); }
#gouverner #gouverner-racine .gouverner__item.est-ouverte button.gouverner__rangee {
  background: color-mix(in srgb, var(--or) 12%, transparent);
  border-left-color: var(--or-vif);
}

#gouverner #gouverner-racine .gouverner__terre { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
#gouverner #gouverner-racine .gouverner__marque { flex: none; width: 1.9rem; height: 1.9rem; }
#gouverner #gouverner-racine .gouverner__noms { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
#gouverner #gouverner-racine .gouverner__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--parchemin);
  overflow-wrap: anywhere;
}
#gouverner #gouverner-racine .gouverner__sous { font-size: var(--t-1); line-height: 1.3; color: var(--or-vif); }
#gouverner #gouverner-racine .gouverner__sous--alerte { color: var(--perte); }

#gouverner #gouverner-racine :is(.gouverner__impot, .gouverner__bilan-ligne, .gouverner__garnison, .gouverner__colere, .gouverner__defense, .gouverner__menace) {
  min-width: 0;
  font-size: var(--t-2);
  line-height: 1.3;
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
  align-self: start;
}
/* Pas de display ici : il écraserait le display: none de .gouverner__large
   au téléphone. Le flex vient de la règle du bureau plus bas. */
#gouverner #gouverner-racine .gouverner__bilan-ligne { flex-wrap: wrap; gap: 0 var(--e-2); }
#gouverner #gouverner-racine .est-court { color: var(--perte); }
#gouverner #gouverner-racine .gouverner__menace:not(.est-court) { color: var(--texte-pale); }

#gouverner #gouverner-racine :is(.gouverner__attente, .gouverner__vide) { margin: var(--e-2) 0; font-size: var(--t-3); color: var(--texte-pale); }

/* La fiche : la rente et les frais, la décision du jour, la garde ; pour le
   domaine, la route et l'impôt en plus. Une colonne au téléphone. */
#gouverner #gouverner-racine .gouverner__fiche {
  display: grid;
  gap: var(--e-4);
  padding: 0.6rem 0.55rem 0.9rem calc(0.55rem + 3px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 55%, transparent), color-mix(in srgb, var(--pierre-0) 20%, transparent));
  border-left: 3px solid var(--or-vif);
}
#gouverner #gouverner-racine .gouverner__colonne { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
#gouverner #gouverner-racine .gouverner__colonne > * { margin: 0; }
#gouverner #gouverner-racine .gouverner__groupe { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-1); }

#gouverner #gouverner-racine .gouverner__intertitre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}
#gouverner #gouverner-racine .gouverner__intertitre--haut {
  padding-bottom: var(--e-1);
  font-size: var(--t-1);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
}

#gouverner #gouverner-racine :is(.gouverner__ligne, .gouverner__dit, .gouverner__liste-simple li, .gouverner__rente li) {
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texte);
}
#gouverner #gouverner-racine .gouverner__rente { display: flex; flex-wrap: wrap; gap: var(--e-0) var(--e-4); }
#gouverner #gouverner-racine .gouverner__bilan { color: var(--parchemin); }
#gouverner #gouverner-racine .gouverner__dit { margin: 0; color: var(--texte-pale); }
#gouverner #gouverner-racine .gouverner__cause { font-size: var(--t-2); text-align: left; }
#gouverner #gouverner-racine .gouverner__prix { color: var(--parchemin); }

/* Un ordre : son bouton, et à côté ses effets ou la cause qui le ferme. */
#gouverner #gouverner-racine .gouverner__ordres { display: flex; flex-direction: column; gap: var(--e-2); }
#gouverner #gouverner-racine .gouverner__ordre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-1);
  padding: var(--e-2) var(--e-2);
  background: color-mix(in srgb, var(--pierre-2) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 16%, transparent);
}
#gouverner #gouverner-racine button:is(.gouverner__commande, .gouverner__aller) {
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: var(--e-1) var(--e-3);
  font: inherit;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--cuir-clair), var(--cuir));
  border: 1px solid color-mix(in srgb, var(--or-vif) 55%, transparent);
  border-radius: 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin) 18%, transparent);
  cursor: pointer;
}
#gouverner #gouverner-racine button:is(.gouverner__commande, .gouverner__aller):hover:not(:disabled) { border-color: var(--or-vif); transform: none; }
#gouverner #gouverner-racine button.gouverner__commande:disabled { opacity: 0.55; filter: saturate(0.35); cursor: not-allowed; }
#gouverner #gouverner-racine button.gouverner__aller {
  width: auto;
  color: var(--parchemin);
  background: color-mix(in srgb, var(--pierre-2) 60%, transparent);
  border-color: color-mix(in srgb, var(--or) 45%, transparent);
}
#gouverner #gouverner-racine .gouverner__actes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }

#gouverner #gouverner-racine .gouverner__champ { display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-2); color: var(--texte-pale); }
#gouverner #gouverner-racine .gouverner__champ select {
  min-height: 44px;
  padding: var(--e-1) var(--e-2);
  font: inherit;
  font-size: var(--t-3);
  color: var(--parchemin);
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
  border-radius: 0;
}
#gouverner #gouverner-racine .gouverner__formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); margin-top: var(--e-2); }

#gouverner #gouverner-racine .gouverner__retour { margin: var(--e-1) 0 0; font-size: var(--t-3); line-height: 1.45; }
#gouverner #gouverner-racine .gouverner__retour.est-bon {
  padding: var(--e-2) var(--e-2);
  color: var(--parchemin);
  background: color-mix(in srgb, var(--or) 10%, transparent);
  border-left: 3px solid var(--or);
}

#gouverner #gouverner-racine .gouverner__verrou {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-3);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--or) 40%, transparent);
}
#gouverner #gouverner-racine .gouverner__verrou > * { margin: 0; }
#gouverner #gouverner-racine .gouverner__verrou .verrou { text-align: left; }

@media (min-width: 46.0625rem) {
  #gouverner #gouverner-racine .gouverner__entetes,
  #gouverner #gouverner-racine button.gouverner__rangee {
    grid-template-columns: minmax(11rem, 1.5fr) 4.8rem minmax(8.5rem, 1.1fr) 6rem 6.4rem 4.4rem minmax(8rem, 1fr);
    column-gap: var(--e-3);
  }
  #gouverner #gouverner-racine .gouverner__entetes > :first-child { display: block; }
  #gouverner #gouverner-racine button.gouverner__rangee .gouverner__terre { grid-column: auto; }
  #gouverner #gouverner-racine button.gouverner__rangee > :not(.gouverner__terre) { align-self: center; }
  #gouverner #gouverner-racine .gouverner__large { display: block; }
  #gouverner #gouverner-racine .gouverner__bilan-ligne.gouverner__large { display: flex; }
  #gouverner #gouverner-racine .gouverner__fiche {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
    gap: var(--e-4) var(--e-5);
  }
  #gouverner #gouverner-racine .gouverner__formulaire { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  #gouverner #gouverner-racine .gouverner__formulaire button.gouverner__commande { width: auto; }
}

@media (min-width: 72rem) {
  #gouverner #gouverner-racine .gouverner__fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
  #gouverner #gouverner-racine .gouverner__ordre { grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.4fr); align-items: center; }
}

/* ── Les onglets de Gouverner (lot G, 25/09/2026) ───────────────────────
   Le trône, l'influence et les lois, les alliances, les prisonniers, les
   titres et les secrets viennent d'autres pages avec leurs propres styles.
   Ici seulement l'espace entre les blocs d'un onglet, sa note d'ouverture et
   le renvoi vers les décrets de la Nuit, aux jetons du jeu. */
#gouverner .gouverner-onglet:not([hidden]) { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
#gouverner .gouverner-onglet__note { margin: 0; font-size: var(--t-3); line-height: 1.5; color: var(--texte); }
#gouverner .gouverner-onglet__note:empty { display: none; }
#gouverner .gouverner-onglet__renvoi {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4);
  margin: 0; padding: var(--e-3) var(--e-4);
  border-top: var(--filet);
  font-size: var(--t-3); line-height: 1.5; color: var(--texte);
}
/* Sans titre tenu, la ligne des titres se cache : son intertitre la suit. */
#gouverner .avoirs > .colonne__titre:has(+ .maison__titres[hidden]) { display: none; }