/* L'onglet Troupes de l'Armée, refait le 28/09/2026 (interface/composants/troupes.jsx).

   Quatre plaques de fer en tête (hommes, vivres, solde, moral), la
   répartition des hommes, puis le registre : une ligne par sorte, les mêmes
   colonnes d'une ligne à l'autre, un en-tête qui range. La ligne ouverte
   déplie sa fiche en quatre volets, côte à côte sur un grand écran, un à la
   fois au téléphone. L'ordre de bataille ferme l'onglet.

   Les largeurs se décident sur la largeur de l'onglet (requête de conteneur),
   pas sur celle de l'écran. Les boutons de commande reprennent le préfixe du
   cadre commun (cadre.css) et y ajoutent :is(#hommes #armee, #siege #recrutement) : sans lui, la règle
   des boutons (quatre identifiants) passe devant. */

:is(#hommes #armee, #siege #recrutement) .ost {
  container: ost / inline-size;
  display: grid;
  gap: var(--e-3);
  min-width: 0;
}

:is(#hommes #armee, #siege #recrutement) .ost__marque {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  object-fit: contain;
  vertical-align: -0.15em;
}
:is(#hommes #armee, #siege #recrutement) .ost__marque--tuile { width: 1rem; height: 1rem; margin-right: var(--e-1); opacity: 0.85; }
:is(#hommes #armee, #siege #recrutement) .ost__marque--entete { width: 1.05rem; height: 1.05rem; }
:is(#hommes #armee, #siege #recrutement) .ost__marque--case { width: 1.5rem; height: 1.5rem; }

:is(#hommes #armee, #siege #recrutement) .ost__attente,
:is(#hommes #armee, #siege #recrutement) .ost__erreur {
  margin: 0;
  padding: var(--e-4);
  border: var(--filet);
  background: var(--pierre-1);
  font-family: var(--police-corps);
  font-size: var(--t-4);
  color: var(--texte-pale);
}
:is(#hommes #armee, #siege #recrutement) .ost__erreur { border-color: var(--cire); color: var(--perte-texte, var(--perte)); }
:is(#hommes #armee, #siege #recrutement) .ost--attente { min-height: 18rem; }


/* ── Le verrou ───────────────────────────────────────────────────────────── */

:is(#hommes #armee, #siege #recrutement) .ost__verrou {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cire-fonce);
  border-left: 4px solid var(--cire);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire-fonce) 22%, var(--pierre-2)), var(--pierre-1));
}
:is(#hommes #armee, #siege #recrutement) .ost__verrou-titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-weight: 400;
  letter-spacing: var(--capitales);
  color: var(--or-vif);
}
:is(#hommes #armee, #siege #recrutement) .ost__conditions { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
:is(#hommes #armee, #siege #recrutement) .ost__condition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  min-height: 40px;
  font-family: var(--police-corps);
  font-size: var(--t-4);
  color: var(--texte-fort);
}
/* Le sceau : de cire rouge quand la condition manque, d'or quand elle est remplie. */
:is(#hommes #armee, #siege #recrutement) .ost__sceau {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cire-vif), var(--cire-fonce) 75%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cire-fonce) 60%, transparent);
}
:is(#hommes #armee, #siege #recrutement) .ost__condition.est-acquise .ost__sceau {
  background: radial-gradient(circle at 35% 30%, var(--or-vif), var(--or-fonce) 75%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--or-fonce) 60%, transparent);
}
:is(#hommes #armee, #siege #recrutement) .ost__condition-etat {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--perte);
}
:is(#hommes #armee, #siege #recrutement) .ost__condition.est-acquise .ost__condition-etat { color: var(--gain); }
/* Au téléphone, la condition prend toute la ligne ; l'état et le lien passent dessous. */
@container ost (max-width: 39.99rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__condition {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "sceau texte texte" ". etat lien";
    gap: var(--e-0) var(--e-2);
    font-size: var(--t-3);
  }
  :is(#hommes #armee, #siege #recrutement) .ost__sceau { grid-area: sceau; }
  :is(#hommes #armee, #siege #recrutement) .ost__condition-texte { grid-area: texte; }
  :is(#hommes #armee, #siege #recrutement) .ost__condition-etat { grid-area: etat; }
  :is(#hommes #armee, #siege #recrutement) .ost__condition .ost__lien { grid-area: lien; }
}
:is(#hommes #armee, #siege #recrutement) .ost__verrou-dit { margin: var(--e-2) 0 0; font-size: var(--t-3); color: var(--texte-pale); }


/* ── L'état-major : quatre plaques ───────────────────────────────────────── */

:is(#hommes #armee, #siege #recrutement) .ost__etat-major {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}
@container ost (min-width: 40rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__etat-major { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:is(#hommes #armee, #siege #recrutement) .ost__tuile {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e-0);
  min-width: 0;
  padding: var(--e-2) var(--e-3) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--or-fonce) 80%, transparent);
  border-top: 2px solid var(--or-fonce);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fer-sombre) 70%, var(--pierre-2)), var(--pierre-0));
  box-shadow: var(--ombre-creux);
}
/* Deux rivets par plaque, en haut. */
:is(#hommes #armee, #siege #recrutement) .ost__tuile::before,
:is(#hommes #armee, #siege #recrutement) .ost__tuile::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--or) 55%, var(--fer-sombre));
}
:is(#hommes #armee, #siege #recrutement) .ost__tuile::before { left: 5px; }
:is(#hommes #armee, #siege #recrutement) .ost__tuile::after { right: 5px; }
:is(#hommes #armee, #siege #recrutement) .ost__tuile-mot {
  display: flex;
  align-items: center;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
:is(#hommes #armee, #siege #recrutement) .ost__tuile-chiffre {
  font-family: var(--police-titre);
  font-size: var(--t-7);
  line-height: 1.1;
  color: var(--or-vif);
  font-variant-numeric: lining-nums tabular-nums;
}
:is(#hommes #armee, #siege #recrutement) .ost__tuile-sous {
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--texte);
}
:is(#hommes #armee, #siege #recrutement) .ost__tuile.est-en-famine { border-top-color: var(--cire); }
:is(#hommes #armee, #siege #recrutement) .ost__tuile.est-en-famine .ost__tuile-chiffre { color: var(--perte); }
:is(#hommes #armee, #siege #recrutement) .ost__tuile.est-bas .ost__tuile-chiffre { color: var(--perte); }
:is(#hommes #armee, #siege #recrutement) .ost__moral { display: flex; align-items: center; gap: var(--e-2); }
/* Le seuil sous lequel la maisonnée ne grandit plus, sous la pente du moral. */
:is(#hommes #armee, #siege #recrutement) .ost__moral-verrou { display: block; color: var(--perte); }
:is(#hommes #armee, #siege #recrutement) .ost__moral-rail {
  flex: 1 1 auto;
  max-width: 7rem;
  height: 0.55rem;
  border: 1px solid var(--or-fonce);
  background: var(--pierre-0);
}
:is(#hommes #armee, #siege #recrutement) .ost__moral-part { display: block; height: 100%; background: linear-gradient(90deg, var(--or-fonce), var(--or)); }


/* ── Batailles et commandant, puis la répartition ────────────────────────── */

:is(#hommes #armee, #siege #recrutement) .ost__ligne-chef {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-1) var(--e-4);
  padding: 0 var(--e-1);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte);
}
:is(#hommes #armee, #siege #recrutement) .ost__ligne-chef p { margin: 0; line-height: 1.5; }
:is(#hommes #armee, #siege #recrutement) .ost__ligne-chef .ost__marque { margin-right: var(--e-2); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__lien {
  min-height: 32px;
  padding: 0 var(--e-1);
  font-size: var(--t-3);
}

:is(#hommes #armee, #siege #recrutement) .ost__repartition {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  background: color-mix(in srgb, var(--or) 18%, transparent);
}
/* Au téléphone : le nombre en haut, le mot dessous, quatre cases sur une ligne. */
:is(#hommes #armee, #siege #recrutement) .ost__lieu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 0;
  padding: var(--e-1) var(--e-1) var(--e-2);
  background: var(--pierre-1);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte);
}
:is(#hommes #armee, #siege #recrutement) .ost__lieu-n {
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
}
:is(#hommes #armee, #siege #recrutement) .ost__lieu.est-vide { color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__lieu.est-vide .ost__lieu-n { color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__lieu-marque { display: none; }
:is(#hommes #armee, #siege #recrutement) .ost__lieu-mot { order: 2; font-size: var(--t-1); line-height: 1.25; }
:is(#hommes #armee, #siege #recrutement) .ost__lieu-n { order: 1; }
:is(#hommes #armee, #siege #recrutement) .ost__lieu-terres { order: 3; font-size: var(--t-1); color: var(--texte-pale); }
@container ost (min-width: 40rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__lieu {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: stretch;
    text-align: start;
    gap: 0 var(--e-2);
    padding: var(--e-2) var(--e-3);
  }
  :is(#hommes #armee, #siege #recrutement) .ost__lieu-marque { display: inline-flex; }
  :is(#hommes #armee, #siege #recrutement) .ost__lieu-mot { order: 0; font-size: var(--t-3); }
  :is(#hommes #armee, #siege #recrutement) .ost__lieu-n { order: 0; }
  :is(#hommes #armee, #siege #recrutement) .ost__lieu-terres { grid-column: 2 / -1; font-size: var(--t-2); }
}


/* ── Le registre ─────────────────────────────────────────────────────────── */

:is(#hommes #armee, #siege #recrutement) .ost__registre {
  border: 1px solid var(--or-fonce);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cuir) 30%, var(--pierre-1)), var(--pierre-0));
  box-shadow: var(--ombre-1);
}
:is(#hommes #armee, #siege #recrutement) .ost__registre-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-4);
  padding: var(--e-3) var(--e-3) var(--e-2);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
:is(#hommes #armee, #siege #recrutement) .ost__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-vif);
}
:is(#hommes #armee, #siege #recrutement) .ost__registre-dit { margin: 0; font-size: var(--t-2); color: var(--texte-pale); }

/* Le même gabarit pour l'en-tête et chaque ligne : les chiffres tombent dans
   les mêmes colonnes. Au téléphone : troupe, attaque, défense, prix. */
:is(#hommes #armee, #siege #recrutement) .ost__entetes,
:is(#hommes #armee, #siege #recrutement) .ost__rangee {
  display: grid;
  /* 44 px : la cible tactile des deux tris du téléphone (30/09/2026). */
  grid-template-columns: minmax(0, 1fr) 44px 44px 3.7rem;
  align-items: center;
  column-gap: var(--e-1);
}
:is(#hommes #armee, #siege #recrutement) .ost__large { display: none; }
@container ost (min-width: 52rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__entetes,
  :is(#hommes #armee, #siege #recrutement) .ost__rangee {
    grid-template-columns: minmax(12rem, 2.2fr) 5.5rem 4.2rem 4.2rem 6rem minmax(7rem, 1.1fr) 6rem 6.2rem;
    column-gap: var(--e-3);
  }
  :is(#hommes #armee, #siege #recrutement) .ost__large { display: block; }
}

:is(#hommes #armee, #siege #recrutement) .ost__entetes {
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
:is(#hommes #armee, #siege #recrutement) .ost__entete--nombre { text-align: center; }
:is(#hommes #armee, #siege #recrutement) .ost__entete--nombre .ost__trier { justify-content: center; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__trier {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--e-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: start;
  color: inherit;
  cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__trier:is(:hover, :focus-visible) { color: var(--texte-fort); border-bottom-color: var(--or-fonce); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__trier.est-actif { color: var(--or-vif); border-bottom-color: var(--or); }
:is(#hommes #armee, #siege #recrutement) .ost__fleche { min-width: 0.6em; font-size: 0.9em; }
/* Au téléphone, la marque gravée remplace le mot ; il reste lu par le
   lecteur d'écran (piège 10 : pas de display: none sur un mot). */
:is(#hommes #armee, #siege #recrutement) .ost__court { display: inline-flex; }
:is(#hommes #armee, #siege #recrutement) .ost__long {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@container ost (min-width: 52rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__court { display: none; }
  :is(#hommes #armee, #siege #recrutement) .ost__long { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

:is(#hommes #armee, #siege #recrutement) .ost__liste { margin: 0; padding: 0; list-style: none; }
:is(#hommes #armee, #siege #recrutement) .ost__ligne { border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent); }
:is(#hommes #armee, #siege #recrutement) .ost__ligne:last-child { border-bottom: 0; }

html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__rangee {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  text-align: start;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte);
  cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__rangee:is(:hover, :focus-visible) {
  background: var(--voile-or);
  border-left-color: var(--or-fonce);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__ligne.est-levee > button.ost__rangee { border-left-color: color-mix(in srgb, var(--or) 55%, transparent); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__ligne.est-ouverte > button.ost__rangee {
  border-left-color: var(--cire-vif);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cire-fonce) 30%, transparent), color-mix(in srgb, var(--or) 6%, transparent));
}
:is(#hommes #armee, #siege #recrutement) .ost__ligne.est-fermee .ost__nom,
:is(#hommes #armee, #siege #recrutement) .ost__ligne.est-fermee .ost__c { color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__ligne.est-fermee .ost__visage img { filter: grayscale(0.7) brightness(0.75); }

:is(#hommes #armee, #siege #recrutement) .ost__troupe { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
@container ost (max-width: 51.99rem) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__rangee { padding-inline: var(--e-2); }
  :is(#hommes #armee, #siege #recrutement) .ost__entetes { padding-inline: var(--e-2); }
  :is(#hommes #armee, #siege #recrutement) .ost__troupe { gap: var(--e-1); }
}
:is(#hommes #armee, #siege #recrutement) .ost__visage {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  overflow: hidden;
  border: 1px solid var(--or-fonce);
  background: var(--pierre-0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 60%, transparent);
}
:is(#hommes #armee, #siege #recrutement) .ost__visage--bete { border-radius: 50%; }
:is(#hommes #armee, #siege #recrutement) .ost__visage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
:is(#hommes #armee, #siege #recrutement) .ost__noms { display: grid; min-width: 0; }
:is(#hommes #armee, #siege #recrutement) .ost__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--texte-fort);
  overflow-wrap: break-word;
}
:is(#hommes #armee, #siege #recrutement) .ost__sous { font-size: var(--t-2); line-height: 1.3; color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__sous-hommes { color: var(--texte); }
:is(#hommes #armee, #siege #recrutement) .ost__sous--verrou { color: var(--ferme); }
:is(#hommes #armee, #siege #recrutement) .ost__sous-autres { color: var(--alerte, var(--texte-pale)); }
:is(#hommes #armee, #siege #recrutement) .ost__sous > span { white-space: nowrap; }
:is(#hommes #armee, #siege #recrutement) .ost__sep { color: var(--texte-pale); }
/* Au bureau, l'effectif, l'échelon, les blessés et les hommes dehors ont
   leurs colonnes : la ligne du nom ne les répète pas. */
@container ost (min-width: 52rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__ligne:not(.est-fermee) .ost__sous { display: none; }
  :is(#hommes #armee, #siege #recrutement) .ost__visage { width: 2.9rem; height: 2.9rem; }
  :is(#hommes #armee, #siege #recrutement) .ost__nom { font-size: var(--t-4); }
}

:is(#hommes #armee, #siege #recrutement) .ost__c { min-width: 0; font-variant-numeric: lining-nums tabular-nums; }
:is(#hommes #armee, #siege #recrutement) .ost__c--nombre {
  text-align: center;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--or-vif);
}
:is(#hommes #armee, #siege #recrutement) .ost__c--hommes .ost__n,
:is(#hommes #armee, #siege #recrutement) .ost__c--echelon .ost__n {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--texte-fort);
}
:is(#hommes #armee, #siege #recrutement) .ost__c--echelon small { font-size: var(--t-2); color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__c-sous { display: block; font-size: var(--t-1); line-height: 1.3; color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__mini-jauge {
  display: block;
  width: 100%;
  max-width: 4.5rem;
  height: 4px;
  margin-top: 3px;
  background: var(--pierre-0);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
:is(#hommes #armee, #siege #recrutement) .ost__mini-jauge > span { display: block; height: 100%; background: var(--or); }
:is(#hommes #armee, #siege #recrutement) .ost__c--place { display: none; font-size: var(--t-2); color: var(--texte); }
@container ost (min-width: 52rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__c--place { display: flex; align-items: center; gap: var(--e-1); }
}
:is(#hommes #armee, #siege #recrutement) .ost__c--prix {
  display: grid;
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--texte);
}
:is(#hommes #armee, #siege #recrutement) .ost__c--jour { font-size: var(--t-2); line-height: 1.35; color: var(--texte); }
@container ost (min-width: 52rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__c--jour { display: grid; }
}
:is(#hommes #armee, #siege #recrutement) .ost__lits { color: var(--texte-pale); }


/* ── La fiche ────────────────────────────────────────────────────────────── */

:is(#hommes #armee, #siege #recrutement) .ost__fiche {
  container: fiche / inline-size;
  padding: var(--e-2) var(--e-3) var(--e-3);
  border-left: 3px solid var(--cire-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 92%, var(--cire-fonce)), var(--pierre-0));
}
:is(#hommes #armee, #siege #recrutement) .ost__volets-choix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: var(--e-2);
  padding: 2px;
  border: 1px solid var(--or-fonce);
  background: var(--pierre-0);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__volet-bouton {
  min-height: 44px;
  margin: 0;
  padding: var(--e-1);
  border: 0;
  border-radius: 0;
  background: var(--pierre-2);
  box-shadow: none;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--texte);
  cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__volet-bouton[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--cuir-clair), var(--cuir));
  color: var(--or-vif);
  box-shadow: inset 0 -2px 0 var(--or);
}
:is(#hommes #armee, #siege #recrutement) .ost__volets { display: grid; gap: var(--e-3); }
:is(#hommes #armee, #siege #recrutement) .ost__volet { display: none; min-width: 0; align-content: start; gap: var(--e-2); }
:is(#hommes #armee, #siege #recrutement) .ost__volet.est-choisi { display: grid; }
:is(#hommes #armee, #siege #recrutement) .ost__volet-titre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@container fiche (min-width: 50rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__volets-choix { display: none; }
  :is(#hommes #armee, #siege #recrutement) .ost__volets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(#hommes #armee, #siege #recrutement) .ost__volet { display: grid; padding-left: var(--e-3); border-left: 1px solid color-mix(in srgb, var(--or) 18%, transparent); }
  :is(#hommes #armee, #siege #recrutement) .ost__volet:first-child { padding-left: 0; border-left: 0; }
  :is(#hommes #armee, #siege #recrutement) .ost__volet-titre {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin: 0;
    font-family: var(--police-titre);
    font-size: var(--t-1);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--or);
  }
}

:is(#hommes #armee, #siege #recrutement) .ost__sous-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
:is(#hommes #armee, #siege #recrutement) .ost__note,
:is(#hommes #armee, #siege #recrutement) .ost__effet,
:is(#hommes #armee, #siege #recrutement) .ost__raison { margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--texte); }
:is(#hommes #armee, #siege #recrutement) .ost__raison { color: var(--perte); }
:is(#hommes #armee, #siege #recrutement) .ost__dit { margin: 0; font-family: var(--police-corps); font-style: italic; font-size: var(--t-2); color: var(--texte-pale); }

/* Combien : moins, le champ, plus. Des cibles de 44 px au doigt. */
:is(#hommes #armee, #siege #recrutement) .ost__combien { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
:is(#hommes #armee, #siege #recrutement) .ost__combien-mot { font-size: var(--t-2); color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__pas { display: inline-flex; align-items: stretch; border: 1px solid var(--or-fonce); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__pas-bouton {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--cuir), var(--bois-sombre));
  box-shadow: none;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--or-vif);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__pas-bouton:disabled { color: var(--ferme); background: var(--pierre-3); }
:is(#hommes #armee, #siege #recrutement) .ost__pas input {
  width: 4.2rem;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--e-1);
  border: 0;
  border-inline: 1px solid var(--or-fonce);
  border-radius: 0;
  background: var(--pierre-0);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  text-align: center;
  color: var(--texte-fort);
  -moz-appearance: textfield;
}
:is(#hommes #armee, #siege #recrutement) .ost__pas input::-webkit-inner-spin-button,
:is(#hommes #armee, #siege #recrutement) .ost__pas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__au-plus { min-height: 44px; font-size: var(--t-2); }

/* Le récapitulatif : coût, entretien, lits, délai, avant le clic. */
:is(#hommes #armee, #siege #recrutement) .ost__recap {
  display: grid;
  gap: 1px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  background: color-mix(in srgb, var(--or) 14%, transparent);
}
:is(#hommes #armee, #siege #recrutement) .ost__recap > div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  background: var(--pierre-1);
}
:is(#hommes #armee, #siege #recrutement) .ost__recap dt {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
  align-self: center;
}
:is(#hommes #armee, #siege #recrutement) .ost__recap dd { margin: 0; font-size: var(--t-2); color: var(--texte-fort); }

:is(#hommes #armee, #siege #recrutement) .ost__gestes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__geste { min-height: 44px; }
/* Lever : l'action décisive, en cire. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__geste--or:not(:disabled) {
  flex: 1 1 8rem;
  border: 1px solid var(--or-fonce);
  background: linear-gradient(180deg, var(--cire-vif), var(--cire));
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--or-vif);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__geste--or:disabled { flex: 1 1 8rem; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__geste--or:not(:disabled):is(:hover, :focus-visible) {
  border-color: var(--or);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire-vif) 85%, var(--or-vif)), var(--cire-vif));
  color: var(--parchemin-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__geste--sang:not(:disabled) { color: var(--perte); border-color: var(--cire-fonce); }

:is(#hommes #armee, #siege #recrutement) .ost__retour { margin: 0; padding: var(--e-1) var(--e-2); font-size: var(--t-2); border-left: 3px solid var(--perte); background: var(--perte-fond); color: var(--texte-fort); }
:is(#hommes #armee, #siege #recrutement) .ost__retour.est-bon { border-left-color: var(--gain); background: var(--gain-fond); }

/* Entraîner : l'échelon en grand, sa jauge, puis l'instruction. */
:is(#hommes #armee, #siege #recrutement) .ost__echelon-grand { display: flex; align-items: baseline; gap: var(--e-2); margin: 0; }
:is(#hommes #armee, #siege #recrutement) .ost__echelon-n { font-family: var(--police-titre); font-size: var(--t-8); line-height: 1; color: var(--or-vif); }
:is(#hommes #armee, #siege #recrutement) .ost__echelon-sur { font-size: var(--t-3); color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__jauge { height: 6px; border: 1px solid var(--or-fonce); background: var(--pierre-0); }
:is(#hommes #armee, #siege #recrutement) .ost__jauge > span { display: block; height: 100%; background: linear-gradient(90deg, var(--or-fonce), var(--or-vif)); }
:is(#hommes #armee, #siege #recrutement) .ost__instruction { display: grid; gap: var(--e-1); padding-top: var(--e-2); border-top: 1px solid color-mix(in srgb, var(--or) 16%, transparent); }
:is(#hommes #armee, #siege #recrutement) .ost__voies { display: grid; gap: var(--e-1); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__voie {
  display: grid;
  gap: 2px;
  min-height: 44px;
  margin: 0;
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--cuir), var(--bois-sombre));
  box-shadow: none;
  text-align: start;
  text-transform: none;
  cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__voie:is(:hover, :focus-visible):not(:disabled) { border-color: var(--or); background: linear-gradient(180deg, var(--cuir-clair), var(--cuir)); }
:is(#hommes #armee, #siege #recrutement) .ost__voie-nom { font-family: var(--police-titre); font-size: var(--t-3); color: var(--or-vif); }
:is(#hommes #armee, #siege #recrutement) .ost__voie-dit { font-size: var(--t-2); color: var(--texte); }

/* Équiper : trois cases de matériel et la filière du mod. */
:is(#hommes #armee, #siege #recrutement) .ost__cases { display: flex; align-items: center; gap: var(--e-1); }
:is(#hommes #armee, #siege #recrutement) .ost__case {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--fer-sombre);
  background: var(--pierre-0);
  opacity: 0.45;
}
:is(#hommes #armee, #siege #recrutement) .ost__case.est-prise { border-color: var(--or); background: color-mix(in srgb, var(--or) 14%, var(--pierre-1)); opacity: 1; }
:is(#hommes #armee, #siege #recrutement) .ost__cases-n { margin-left: var(--e-1); font-family: var(--police-titre); font-size: var(--t-4); color: var(--texte-fort); }
:is(#hommes #armee, #siege #recrutement) .ost__filiere { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
:is(#hommes #armee, #siege #recrutement) .ost__filiere li {
  padding: 1px var(--e-2);
  border: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
  font-size: var(--t-1);
  color: var(--texte-pale);
}
:is(#hommes #armee, #siege #recrutement) .ost__filiere li.est-atteint { border-color: var(--or-fonce); color: var(--or-vif); }

/* Au combat : contre qui elle tient, devant qui elle tombe, sa place. */
:is(#hommes #armee, #siege #recrutement) .ost__contres { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
:is(#hommes #armee, #siege #recrutement) .ost__contres li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--e-2); padding: var(--e-1) 0; font-size: var(--t-2); }
:is(#hommes #armee, #siege #recrutement) .ost__contre-mot { font-family: var(--police-titre); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-pale); align-self: center; }
:is(#hommes #armee, #siege #recrutement) .ost__contre-qui { color: var(--gain); }
:is(#hommes #armee, #siege #recrutement) .ost__contres li.est-faible .ost__contre-qui { color: var(--perte); }
:is(#hommes #armee, #siege #recrutement) .ost__contres li.est-vide .ost__contre-qui { color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__place { display: grid; gap: var(--e-1); }
:is(#hommes #armee, #siege #recrutement) .ost__place select {
  min-height: 44px;
  padding: 0 var(--e-2);
  border: 1px solid var(--or-fonce);
  background: var(--pierre-1);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte-fort);
}
:is(#hommes #armee, #siege #recrutement) .ost__pouvoir { display: grid; gap: var(--e-1); padding: var(--e-2); border: 1px solid color-mix(in srgb, var(--or) 22%, transparent); }
:is(#hommes #armee, #siege #recrutement) .ost__pouvoir.est-actif { border-color: var(--or); }


/* ── L'ordre de bataille, sous le registre ───────────────────────────────── */

:is(#hommes #armee, #siege #recrutement) .ost__formation { display: grid; gap: var(--e-2); }
:is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille { margin: 0; }
@container ost (min-width: 52rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille__entetes { display: none; }
  :is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1px;
    background: color-mix(in srgb, var(--or) 16%, transparent);
  }
  :is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille__rang {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cible hommes" "effet effet";
    align-content: start;
    gap: var(--e-1) var(--e-2);
    padding: var(--e-2) var(--e-3);
    border: 0;
    background: var(--pierre-1);
  }
  :is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille__rang > .operations__cible { grid-area: cible; }
  :is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille__rang > .operations__nombre:nth-child(2) { grid-area: hommes; font-family: var(--police-titre); font-size: var(--t-5); color: var(--or-vif); }
  :is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille__rang > .operations__nombre:nth-child(3) { grid-area: effet; text-align: start; font-size: var(--t-2); color: var(--texte-pale); }
}
:is(#hommes #armee, #siege #recrutement) .ost__formation-geste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
:is(#hommes #armee, #siege #recrutement) .ost__formation-corps { display: grid; gap: var(--e-2); }
/* Le bandeau porte déjà le titre : celui du cadre reste pour le lecteur d'écran. */
:is(#hommes #armee, #siege #recrutement) .ost__formation .ordre-bataille .operations__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Le bandeau qui déplie l'ordre de bataille : une barre de cuir, pas un bouton doré. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__formation-bouton {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--or-fonce);
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 30%, var(--pierre-1)), var(--pierre-0));
  box-shadow: none;
  font: inherit;
  text-align: start;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte);
  cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) button.ost__formation-bouton:is(:hover, :focus-visible) { border-color: var(--or); background: var(--voile-or); }
:is(#hommes #armee, #siege #recrutement) .ost__formation-mot { font-family: var(--police-titre); font-size: var(--t-4); letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-vif); }
:is(#hommes #armee, #siege #recrutement) .ost__formation-dit { font-size: var(--t-2); color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__formation-dit::after { content: " \25BE" / ""; }
:is(#hommes #armee, #siege #recrutement) .ost__formation.est-ouverte .ost__formation-dit::after { content: " \25B4" / ""; }


/* ── Les onglets de l'Armée au téléphone : les quatre tiennent sur la ligne ── */

@media (max-width: 30rem) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .onglets-page .onglets-page__entree {
    padding-inline: var(--e-2);
    font-size: var(--t-2);
    letter-spacing: 0;
  }
}


/* ── Opérations au téléphone : le nom de la cible sur toute la ligne ────────
   Quatre colonnes sur 343 pixels serraient le nom en trois lignes. La cible
   prend la première ligne, hommes, marche et bouton la seconde. */

@media (max-width: 42rem) {
  #hommes .operations__cibles .operations__entetes { display: none; }
  #hommes .operations__cibles .operations__ligne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "cible cible cible"
      "hommes marche preparer";
    row-gap: var(--e-1);
  }
  #hommes .operations__cibles .operations__ligne > .operations__cible { grid-area: cible; }
  #hommes .operations__cibles .operations__ligne > .operations__nombre:nth-of-type(3) { grid-area: hommes; text-align: start; }
  #hommes .operations__cibles .operations__ligne > .operations__nombre:nth-of-type(4) { grid-area: marche; text-align: start; }
  #hommes .operations__cibles .operations__ligne > .operations__preparer { grid-area: preparer; }
  #hommes .operations__cibles .operations__ligne > .operations__nombre > .visuellement-cache {
    /* Les en-têtes tombent, le mot caché revient devant son chiffre : il faut
       défaire les !important de `.visuellement-cache` (salle.css). */
    position: static !important; width: auto !important; height: auto !important; overflow: visible !important;
    clip: auto !important; clip-path: none !important; white-space: normal !important; margin: 0 0.3em 0 0 !important; color: var(--texte-pale); font-size: var(--t-1);
  }
}


/* ── Ton dragon : le mot « tourne la bête » reste dans la toile ────────────
   Sans ancre, il se posait sur le bouton « Replier le relief » au téléphone. */

#hommes #armee-dragon .dragon-relief__toile { position: relative; }
/* La bête est posée, ailes repliées : elle est longue et basse. Un cadre en
   hauteur (400 × 546 au bureau) la laissait dans une bande au milieu du vide ;
   un cadre de cinq sur quatre la remplit à chaque angle du tour. */
#hommes #armee-dragon .dragon-relief__toile { height: auto; aspect-ratio: 5 / 4; max-height: 70vh; }
/* La légende passe sous la toile : posée dessus, elle couvrait les pattes et
   l'ombre de la bête. */
#hommes #armee-dragon .dragon-relief__legende { position: static; }

/* La milice de reprise (lot 10, 29/09/2026) : la règle en veille, la levée de
   demain et son prix quand l'armée tombe sous le seuil. */
:is(#hommes #armee, #siege #recrutement) .ost__milice { margin: var(--e-2) 0 0; padding: var(--e-1) var(--e-3); font-size: var(--t-2); line-height: 1.45; color: var(--texte-pale); }
:is(#hommes #armee, #siege #recrutement) .ost__milice.est-active { color: var(--texte); background: var(--pierre-2); box-shadow: inset 3px 0 0 var(--or), var(--ombre-1); }
:is(#hommes #armee, #siege #recrutement) .ost__milice.est-bloquee { box-shadow: inset 3px 0 0 var(--cire-vif), var(--ombre-1); }
:is(#hommes #armee, #siege #recrutement) .ost__milice-titre { font-family: var(--police-titre); font-size: var(--t-1); letter-spacing: var(--capitales); text-transform: uppercase; color: var(--or); }

/* Le renvoi vers la caserne du domaine (7 octobre 2026) : le registre et les levées vivent dans son tiroir. */
#hommes #armee .ost__vers-caserne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin: var(--e-3) 0 0; }
#hommes #armee .ost__vers-caserne .ost__note { color: var(--texte-pale); font-size: var(--t-2); }
/* La règle des gestes du cadre les étire sur toute la ligne ; le renvoi garde sa largeur. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes #armee .ost__vers-caserne > button.ost__geste { flex: 0 1 auto; width: auto; }
/* Le bouton de jeu en laiton, comme celui du chantier (9/10/2026) : la cire rouge en capitales faisait bouton de site. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes #armee button.ost__geste--caserne {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .45rem 1.2rem .45rem .8rem;
  text-transform: none; letter-spacing: .02em; font: 700 1rem / 1.1 var(--police-titre, serif); color: #fff3d6; text-shadow: 0 1px 2px #000;
  background: var(--hud-grain, none), linear-gradient(180deg, #8a6a2c, #5a3f17 55%, #3d2a0f);
  border: 1px solid #0c0906; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 230 170 / .35), inset 0 -2px 3px rgb(0 0 0 / .5), 0 0 0 1px #b8964f, 0 3px 8px rgb(0 0 0 / .6);
  transition: filter .12s ease, transform .12s ease;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes #armee button.ost__geste--caserne:is(:hover, :focus-visible) { filter: brightness(1.15); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes #armee button.ost__geste--caserne:focus-visible { outline: 2px solid #f0d9a0; outline-offset: 3px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes #armee button.ost__geste--caserne:active { transform: translateY(1px); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes #armee button.ost__geste--caserne .ost__marque { width: 1.6rem; height: 1.6rem; }

/* La vignette en pied du registre (7 octobre 2026) : le soldat entier dans une case de deux sur trois, jamais rogné. */
:is(#hommes #armee, #siege #recrutement) .ost__visage.ost__visage--en-pied { width: auto; height: 3.3rem; aspect-ratio: 2 / 3; border-radius: 2px; background: radial-gradient(ellipse at 50% 40%, #2c2620, #14110e 75%); }
:is(#hommes #armee, #siege #recrutement) .ost__visage.ost__visage--en-pied img { object-fit: contain; object-position: 50% 100%; }