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

   Cinq nombres en haut, puis la liste des troupes qui se compare, et sous la
   ligne ouverte la fiche de sa troupe (React depuis le 22/09/2026). Les
   selecteurs partent de #armee : la feuille de la guerre se charge apres
   celle-ci et ne doit rien reprendre. */


/* ── Le panneau entier ───────────────────────────────────────────────────── */

#hommes #armee.armee {
  position: relative;
  display: block;
  margin: 0 0 var(--e-4);
  padding: var(--e-4) var(--e-4) var(--e-4);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cuir-clair) 28%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 97%, transparent), color-mix(in srgb, var(--pierre-0) 99%, transparent));
  border: 1px solid var(--or-fonce);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--or) 16%, transparent), var(--ombre-2);
}

/* Les quatre ferrures d angle de la planche. */
#hommes #armee.armee::before,
#hommes #armee.armee::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 0 solid var(--or);
  opacity: 0.7;
  pointer-events: none;
}

#hommes #armee.armee::before { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
#hommes #armee.armee::after { right: 4px; bottom: 4px; border-right-width: 2px; border-bottom-width: 2px; }

#hommes #armee .colonne__titre {
  margin: 0 auto var(--e-3);
  max-width: 30rem;
  font-size: clamp(1.1rem, 2.3vw, 1.6rem);
  text-transform: uppercase;
}


/* ── Le bandeau des cinq nombres ─────────────────────────────────────────── */

#hommes #armee .armee__bandeau {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 0 0 var(--e-2);
  background: color-mix(in srgb, var(--or) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}

#hommes #armee .armee__jeton {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(180deg, var(--pierre-2), var(--pierre-0));
}

#hommes #armee .armee__jeton-corps { min-width: 0; }

#hommes #armee .armee__jeton-mot {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

#hommes #armee .armee__marque {
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#hommes #armee .armee__marque--petite { width: 0.95rem; height: 0.95rem; }
#hommes #armee .armee__marque--case { width: 1.35rem; height: 1.35rem; }
#hommes #armee .armee__marque--grande { width: 52%; height: 52%; }

/* Les phrases du bandeau gardent leurs chiffres qui s expliquent : seule leur
   mise en page change. */
#hommes #armee .armee__jeton .armee__effectif,
#hommes #armee .armee__jeton .armee__tenue,
#hommes #armee .armee__jeton .armee__entretien,
#hommes #armee .armee__jeton .armee__batailles {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-style: normal;
  line-height: 1.25;
  color: var(--or-vif);
  letter-spacing: 0.02em;
}

#hommes #armee .armee__jeton .armee__tenue.est-en-famine { color: var(--perte); }

#hommes #armee .armee__moral { min-width: 7rem; padding-top: var(--e-1); }
#hommes #armee .armee__moral .jauge-parure__rail { min-width: 4.5rem; height: 0.75rem; }
#hommes #armee .armee__moral .jauge-parure__valeur {
  font-size: var(--t-4);
  color: var(--or-vif);
}


/* ── La ligne des sortes d homme et des terres ───────────────────────────── */

#hommes #armee .armee__sous-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-4);
  margin: 0 0 var(--e-4);
  padding: var(--e-1) var(--e-1) var(--e-2);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}

#hommes #armee .armee__rangs { margin: 0; gap: var(--e-1) var(--e-3); }
#hommes #armee .armee__rangs li { color: var(--texte); font-size: var(--t-3); }

#hommes #armee .armee__terres-ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  min-width: 0;
}

#hommes #armee .armee__terres-mot {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

#hommes #armee .armee__terres { margin: 0; color: var(--texte); font-size: var(--t-3); }


/* ── Tes troupes : la liste qui se compare ─────────────────────────────────
   🔴 Refaite en React le 22/09/2026 (interface/composants/troupes.jsx). Les
   cartes du 16/09 prenaient 600 pixels chacune au téléphone, et le panneau
   « La troupe choisie » en répétait les chiffres et les boutons. Une ligne
   par sorte aligne ce qui se compare, et la fiche se déplie sous la ligne
   ouverte. Chaque ligne reprend la grille de l'en-tête, des colonnes fixes
   sauf la première : les chiffres tombent l'un sous l'autre.
   Trois largeurs : au téléphone, la troupe, l'attaque, la défense et le
   prix ; dès 46 rem, les forces et l'entretien ; dès 72 rem, la place. */

#hommes #armee .troupes { margin: var(--e-4) 0 0; }

#hommes #armee .troupes__banniere {
  max-width: 22rem;
  margin: 0 auto var(--e-3);
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-transform: uppercase;
}

#hommes #armee .troupes__entetes,
#hommes #armee button.troupes__rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem 3rem 4.6rem;
  align-items: center;
  column-gap: var(--e-2);
}

#hommes #armee .troupes__large,
#hommes #armee .troupes__moyen,
#hommes #armee .troupes__long { display: none; }

#hommes #armee .troupes__entetes {
  padding: 0 0.55rem 0.4rem calc(0.55rem + 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);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

#hommes #armee .troupes__liste { list-style: none; margin: 0; padding: 0; }

/* Le bas de l'écran porte la barre des onglets au téléphone : une ligne
   ramenée en vue s'arrête au-dessus. */
#hommes #armee .troupes__ligne {
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  scroll-margin: 0.5rem 0 5.5rem;
}

#hommes #armee button.troupes__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;
  cursor: pointer;
  scroll-margin: 0.5rem 0 5.5rem;
}

#hommes #armee button.troupes__rangee:hover { background: color-mix(in srgb, var(--or) 7%, transparent); transform: none; }
#hommes #armee .troupes__ligne.est-levee button.troupes__rangee { border-left-color: color-mix(in srgb, var(--or) 55%, transparent); }
#hommes #armee .troupes__ligne.est-ouverte button.troupes__rangee {
  background: color-mix(in srgb, var(--or) 12%, transparent);
  border-left-color: var(--or-vif);
}

#hommes #armee .troupes__troupe { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
#hommes #armee .troupes__visage { flex: none; width: 2.5rem; height: 2.5rem; }
#hommes #armee .troupes__visage--medaillon { display: flex; align-items: center; justify-content: center; }
#hommes #armee .troupes__visage--medaillon img { width: 86%; height: 86%; border-radius: var(--rayon-rond); }
#hommes #armee .troupes__ligne.est-fermee .troupes__visage { opacity: 0.55; filter: grayscale(0.7); }

#hommes #armee .troupes__noms { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }

#hommes #armee .troupes__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--parchemin-clair);
  overflow-wrap: anywhere;
}

#hommes #armee .troupes__sous {
  font-size: var(--t-1);
  line-height: 1.3;
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
}

#hommes #armee .troupes__sous--verrou { color: var(--parchemin-bas); }
#hommes #armee .troupes__blesses { color: var(--parchemin-bas); }

#hommes #armee .troupes__nombre {
  text-align: center;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
}

#hommes #armee .troupes__entetes .troupes__nombre { font-size: var(--t-1); color: var(--or); }
#hommes #armee .troupes__entete-marque { display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto; }

#hommes #armee .troupes__prix {
  display: flex;
  flex-direction: column;
  font-size: var(--t-2);
  line-height: 1.3;
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
}

#hommes #armee .troupes__lits { font-size: var(--t-1); color: var(--texte-pale); }

#hommes #armee .troupes__ligne.est-fermee :is(.troupes__nom, .troupes__nombre, .troupes__prix) { color: var(--texte); }


/* La fiche : les gestes et le matériel, puis l'échelon et le pouvoir d'une
   bête, puis l'ordre de bataille et l'instruction. Une colonne au téléphone,
   deux ailleurs. */
#hommes #armee .troupes__fiche {
  display: grid;
  gap: var(--e-2);
  padding: 0.55rem 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);
}

#hommes #armee .troupes__colonne { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
#hommes #armee .troupes__colonne:empty { display: none; }
#hommes #armee .troupes__colonne > * { margin: 0; }

#hommes #armee .troupes__traits { display: flex; flex-direction: column; gap: var(--e-0); }
#hommes #armee .troupes__trait { margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--texte); }
#hommes #armee .troupes__trait--place { display: flex; align-items: center; gap: var(--e-1); color: var(--parchemin); }

/* La levée : le nombre, le plus qu'on peut lever et le bouton ; le coût de la
   levée ou la raison d'un bouton fermé dessous, puis la réponse du serveur. */
#hommes #armee .troupes__levee { justify-content: flex-start; gap: var(--e-2); }

#hommes #armee .troupes__combien {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-2);
  color: var(--texte-pale);
}

#hommes #armee .troupes__levee input { width: 5rem; }

#hommes #armee button.troupes__au-plus {
  min-height: 44px;
  padding: var(--e-1) var(--e-3);
  font: inherit;
  font-size: var(--t-2);
  color: var(--or-vif);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

#hommes #armee .troupes__levee .troupes__lever { flex: 1 1 9rem; }
#hommes #armee .troupes__total { flex: 1 0 100%; margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--texte); }
#hommes #armee .troupes__levee .troupe__aide,
#hommes #armee .troupes__equiper .troupe__aide { margin: 0; text-align: left; }
#hommes #armee .troupes__renvoyer { flex: 1 0 100%; }

#hommes #armee .troupes__retour { flex: 1 0 100%; margin: 0; font-size: var(--t-3); line-height: 1.45; }
#hommes #armee .troupes__retour.refus { margin: 0; }

#hommes #armee .troupes__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);
}

#hommes #armee .troupes__equiper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  margin-top: var(--e-2);
}

#hommes #armee .troupes__chef { display: grid; gap: var(--e-1); margin-top: var(--e-3); }

#hommes #armee .troupe__ordre-bouton {
  display: flex;
  border-radius: 0;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 95%, transparent), color-mix(in srgb, var(--pierre-1) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
  cursor: pointer;
}

#hommes #armee .troupe__ordre-bouton:hover,
#hommes #armee .troupe__ordre-bouton:focus-visible {
  border-color: var(--or);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--pierre-2) 95%, transparent));
}

#hommes #armee .troupe__ordre-aide {
  display: block;
  font-size: var(--t-1);
  line-height: 1.4;
  color: var(--texte-pale);
}


/* ── La fiche : l'échelon, le matériel, la place et l'instruction ─────────── */

#hommes #armee .troupe__echelon {
  margin: var(--e-3) 0 0;
  padding: var(--e-2) var(--e-2);
  background: color-mix(in srgb, var(--pierre-0) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

#hommes #armee .troupe__marche { font-size: var(--t-2); color: var(--texte); }

#hommes #armee .troupe__jauge {
  height: 0.55rem;
  margin: var(--e-1) 0;
  background: color-mix(in srgb, var(--pierre-0) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}

#hommes #armee .troupe__jauge-pleine { background: linear-gradient(180deg, var(--or), var(--or-fonce)); }

#hommes #armee .troupe__apport { font-size: var(--t-2); color: var(--texte); }

#hommes #armee .armee__materiel { margin-top: var(--e-3); }

#hommes #armee .armee__materiel-titre,
#hommes #armee .troupe__rang-titre {
  display: block;
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

#hommes #armee .armee__cases {
  display: flex;
  gap: var(--e-2);
  margin-bottom: var(--e-1);
}

#hommes #armee .armee__case {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  background: linear-gradient(180deg, var(--pierre-2), var(--pierre-0));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

/* Les marques sont peintes : une case vide se lit à sa marque éteinte. */
#hommes #armee .armee__case:not(.armee__case--prise) .armee__marque { opacity: 0.35; filter: grayscale(1); }

#hommes #armee .armee__case--prise {
  border-color: var(--or);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--or) 28%, transparent);
}


/* La filiere du mod : les quatre noms que porte une troupe, du cran ou elle
   est jusqu'au dernier. Les crans atteints sont a l'encre claire, ceux a
   venir restent en creux : le joueur voit ce qu'il achete avant de payer. */
#hommes #armee .armee__filiere { margin-top: var(--e-3); }

#hommes #armee .armee__filiere-titre {
  display: block;
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

#hommes #armee .armee__echelons {
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  margin: 0;
  padding: 0 0 0 var(--e-4);
  list-style: none;
  border-left: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

#hommes #armee .armee__echelon-nom {
  position: relative;
  font-size: var(--t-2);
  line-height: 1.35;
  color: color-mix(in srgb, var(--texte) 42%, transparent);
}

#hommes #armee .armee__echelon-nom::before {
  content: '';
  position: absolute;
  left: -1.15rem;
  top: 0.45rem;
  width: 0.42rem;
  height: 0.42rem;
  background: color-mix(in srgb, var(--texte-pale) 50%, transparent);
  transform: rotate(45deg);
}

#hommes #armee .armee__echelon-nom.est-atteint {
  color: var(--sur-parchemin, var(--parchemin-clair));
  font-weight: 600;
}

#hommes #armee .armee__echelon-nom.est-atteint::before {
  background: var(--or-vif);
  box-shadow: 0 0 6px color-mix(in srgb, var(--or) 45%, transparent);
}

#hommes #armee .armee__devient {
  display: block;
  width: 100%;
  margin-top: var(--e-1);
  font-size: var(--t-2);
  color: var(--texte);
}

#hommes #armee .troupe__etat { margin: 0; font-size: var(--t-2); color: var(--texte-pale); }

#hommes #armee .armee__parole {
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--pierre-0) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}

#hommes #armee .armee__parole .troupe__dit { margin: 0; font-size: var(--t-3); line-height: 1.5; }

#hommes #armee .troupe__metier,
#hommes #armee .troupe__rang {
  margin: var(--e-3) 0 0;
  padding: var(--e-2) var(--e-2);
  background: color-mix(in srgb, var(--pierre-0) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
}

#hommes #armee .troupe__metier-dit,
#hommes #armee .troupe__rang-dit { font-size: var(--t-2); color: var(--texte); line-height: 1.45; }

#hommes #armee .troupe__metier-actions { gap: var(--e-2); }

#hommes #armee .troupe__metier-choix {
  border-radius: 0;
  box-shadow: none;
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-titre);
  color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire) 85%, transparent), color-mix(in srgb, var(--cire-fonce) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  cursor: pointer;
}

#hommes #armee .troupe__metier-choix:hover,
#hommes #armee .troupe__metier-choix:focus-visible { border-color: var(--or); }

#hommes #armee .troupe__metier-aide { font-size: var(--t-2); color: var(--texte-pale); }

#hommes #armee .troupe__rang-choix {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  min-height: 2.75rem;
  margin-bottom: var(--e-1);
  padding: var(--e-1) var(--e-2);
  font-family: var(--police-corps);
  color: var(--parchemin);
  background: color-mix(in srgb, var(--pierre-2) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

#hommes #armee .armee__contre {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  color: var(--texte);
}

#hommes #armee .armee__contre--faible { color: var(--perte); }


/* ── Les gestes : lever, renvoyer, équiper ───────────────────────────────── */

#hommes #armee .armee__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin: 0;
  padding: var(--e-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
}

#hommes #armee .armee__actions input {
  border-radius: 0;
  box-shadow: none;
  width: 5.5rem;
  min-height: 2.9rem;
  padding: var(--e-2) var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  text-align: center;
  color: var(--parchemin);
  background: color-mix(in srgb, var(--pierre-0) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

#hommes #armee .armee__acte {
  display: inline-flex;
  border-radius: 0;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  min-height: 2.9rem;
  padding: var(--e-2) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.07em;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-2));
  border: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
  cursor: pointer;
}

#hommes #armee .armee__acte:hover:not(:disabled),
#hommes #armee .armee__acte:focus-visible { border-color: var(--or); color: var(--or-vif); }

#hommes #armee .armee__acte--or {
  color: var(--pierre-3);
  background: linear-gradient(180deg, var(--or), var(--or-sourd));
  border-color: var(--or-vif);
}

#hommes #armee .armee__acte--or:hover:not(:disabled),
#hommes #armee .armee__acte--or:focus-visible { color: var(--pierre-3); background: linear-gradient(180deg, var(--or-vif), var(--or-sourd)); }

#hommes #armee .armee__acte--or:disabled {
  color: var(--texte-pale);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-2));
  border-color: color-mix(in srgb, var(--or) 25%, transparent);
  cursor: not-allowed;
}

#hommes #armee .armee__acte--sang { min-width: 9rem; }

#hommes #armee .armee__prix {
  font-size: var(--t-2);
  color: var(--or);
}

#hommes #armee .troupe__aide {
  flex: 1 0 100%;
  text-align: center;
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--or-vif);
}


/* ── Le pouvoir d'une bete ───────────────────────────────────────────────────
   Un geant n'est pas un homme avec un gros chiffre. Son encart porte donc une
   autre matiere que les lignes de chiffres : un fond plus sombre, un liseré or
   a gauche quand le pouvoir joue, fer et pierre quand il dort. */

#hommes #armee .armee__pouvoir {
  margin: var(--e-3) 0 0;
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 85%, transparent), color-mix(in srgb, var(--pierre-0) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--or-sourd) 22%, transparent);
  border-left: 3px solid var(--or-sourd);
}

#hommes #armee .armee__pouvoir.est-actif {
  border-color: color-mix(in srgb, var(--or) 34%, transparent);
  border-left-color: var(--or, var(--or));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 88%, transparent), color-mix(in srgb, var(--pierre-1) 94%, transparent));
}

#hommes #armee .armee__pouvoir-titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.04em;
  color: var(--texte-pale);
}

#hommes #armee .armee__pouvoir.est-actif .armee__pouvoir-titre { color: var(--or-vif, var(--or-vif)); }

#hommes #armee .armee__pouvoir-dit {
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--texte);
}

#hommes #armee .armee__pouvoir-borne {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  font-style: italic;
  color: var(--texte-pale);
}


/* ── Les largeurs ────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  #hommes #armee.armee { padding: var(--e-3) var(--e-2) var(--e-3); }
  /* Une colonne : les phrases du bandeau tenaient sur cinq lignes dans deux
     colonnes de 150 pixels, et la liste des troupes descendait d'autant. */
  #hommes #armee .armee__bandeau { grid-template-columns: minmax(0, 1fr); }
  #hommes #armee .armee__jeton { padding: var(--e-2) var(--e-2); }
}

@media (min-width: 46.0625rem) {
  #hommes #armee .troupes__entetes,
  #hommes #armee button.troupes__rangee {
    grid-template-columns: minmax(10rem, 1.5fr) 3.6rem 3.6rem minmax(6rem, 1fr) minmax(6rem, 1fr) 5.4rem minmax(6.5rem, 0.9fr);
    column-gap: var(--e-3);
  }
  #hommes #armee .troupes__moyen { display: block; }
  #hommes #armee .troupes__court { display: none; }
  #hommes #armee .troupes__long { display: inline; }
  #hommes #armee .troupes__contre,
  #hommes #armee .troupes__jour { font-size: var(--t-2); line-height: 1.35; color: var(--texte); }
  #hommes #armee .troupes__contre.est-faible { color: var(--perte); }
  #hommes #armee .troupes__trait.armee__contre,
  #hommes #armee .troupes__trait--jour { display: none; }
  /* Deux colonnes : les gestes à gauche sur toute la hauteur, l'échelon puis
     l'ordre de bataille à droite, l'un sous l'autre sans trou. */
  #hommes #armee .troupes__fiche {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.25fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--e-3) var(--e-4);
  }
  #hommes #armee .troupes__colonne:first-child { grid-row: 1 / span 2; }
}

@media (min-width: 72rem) {
  #hommes #armee .troupes__entetes,
  #hommes #armee button.troupes__rangee {
    grid-template-columns: minmax(11rem, 1.5fr) minmax(7rem, 1fr) 3.6rem 3.6rem minmax(7rem, 1fr) minmax(7rem, 1fr) 6rem minmax(7rem, 0.9fr);
  }
  #hommes #armee .troupes__large { display: block; }
  #hommes #armee .troupes__place { font-size: var(--t-2); line-height: 1.35; color: var(--texte); }
  #hommes #armee .troupes__traits { display: none; }
}


/* ── Les expéditions (lot 5) ─────────────────────────────────────────────
   Écran React (interface/composants/expeditions.jsx), sous la planche des
   hommes. Les fiches reprennent la tenue des ouvrages du domaine : même
   cadre, même en-tête, même bouton, pour qu'un lieu se lise comme un
   bâtiment qu'on peut lancer. */

#hommes .expeditions { margin: 0 0 var(--e-4); }
/* Lot E des onglets : les expéditions vivent dans l'onglet Opérations
   (interface/composants/operations.jsx), qui se peint à tout rang. */
/* La feuille d’un camp sur la carte (lot 6, interface/composants/camps.jsx), celles d’une place et d’une terre
   sauvage (lot 7, terres.jsx et expeditions.jsx) prennent
   la même tenue : `:is()` garde à chaque règle le poids qu'elle avait sous
   #hommes. */
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  align-items: stretch;
  border-color: color-mix(in srgb, var(--or) 22%, transparent);
}
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment__entete { display: flex; align-items: baseline; gap: var(--e-2); }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment__nom { flex: 1; min-width: 0; }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment__niveau { flex: none; }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment__verrou {
  display: block;
  padding: var(--e-2) var(--e-2);
  border-left: 2px solid var(--texte-pale);
  background: color-mix(in srgb, var(--texte-pale) 10%, transparent);
  color: var(--texte);
  font-size: var(--t-2);
  line-height: 1.4;
}
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment__cout,
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .batiment__promesse { margin: 0; }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .expedition-ferme { margin: 0 0 var(--e-2); }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .expedition-preparation { max-width: 40rem; }

/* Le choix des hommes : une ligne par arme, le compte réglé à deux crans. */
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__liste { list-style: none; margin: var(--e-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  border-top: 1px solid color-mix(in srgb, var(--or) 12%, transparent);
}
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__nom { flex: 1; min-width: 0; color: var(--parchemin); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__dispo { color: var(--texte-pale); font-size: var(--t-2); font-variant-numeric: tabular-nums; }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__reglage { display: flex; align-items: center; gap: var(--e-1); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__reglage output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--or-vif); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__reglage button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: color-mix(in srgb, var(--pierre-4) 70%, transparent);
  color: var(--or-vif);
  font: inherit;
  font-size: var(--t-5);
  line-height: 1;
  cursor: pointer;
}
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__reglage button:hover:not(:disabled) { background: color-mix(in srgb, var(--cuir) 90%, transparent); border-color: var(--or); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-choix__reglage button:disabled { opacity: 0.35; cursor: default; }

:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-apercu { display: flex; flex-direction: column; gap: var(--e-1); padding-top: var(--e-1); border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-danger { margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--texte-pale); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-danger.est-risque { color: var(--alerte); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-danger.est-perilleux { color: var(--perte); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-preparation__actes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .expedition-preparation__actes .batir { min-height: 44px; }

/* Le bilan d'une rentrée : le brut, ce qui s'est perdu, ce qui est entré. */
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-bilan { list-style: none; margin: 0; padding: 0; font-size: var(--t-2); line-height: 1.45; color: var(--texte-pale); font-variant-numeric: tabular-nums; }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-bilan__net { color: var(--parchemin); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-bilan .est-perte { color: var(--perte); }
/* « Regarder l'assaut » au bilan d'un camp (9/10/2026) : un bouton à sa taille, pas une barre. */
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche, .village-fiche, .gouverner-couronne) .camp-regarder { align-self: flex-start; justify-self: start; width: auto; min-height: 44px; margin: var(--e-1) 0; }

/* Récolter ou fouiller le vestige du lieu, et les pièces possibles
   (22/09/2026). Le bouton pressé porte l'or, l'autre reste de pierre. */
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-vestige { color: var(--or-vif); font-size: var(--t-2); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-objectif { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: var(--e-1) 0; padding: 0; border: 0; }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-objectif legend { float: left; width: 100%; margin-bottom: var(--e-1); }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .expedition-objectif .batir { min-height: 44px; }
/* Le séjour sur place (8/10/2026) : trois jetons à bascule, l'habit commun des choix. */
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-sejour { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); margin: var(--e-1) 0; padding: 0; border: 0; }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-sejour legend { float: left; width: 100%; margin-bottom: var(--e-1); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-sejour .jeton-mot { min-height: 44px; }
:is(#hommes .expeditions, .camp-fiche, .terre-fiche, .site-fiche) .expedition-objectif .batir[aria-pressed='true'] { border-color: var(--or); color: var(--or-vif); background: color-mix(in srgb, var(--bois) 55%, transparent); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-pieces { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding-top: var(--e-1); border-top: 1px solid color-mix(in srgb, var(--or) 12%, transparent); }
:is(#hommes, .camp-fiche, .terre-fiche, .site-fiche) .expedition-bilan__piece { color: var(--or-vif); }


/* ═════ Lot E des onglets (24/09/2026) : Troupes, Opérations, Commandants,
   Ton dragon ═══════════════════════════════════════════════════════════════
   Les quatre onglets de l'Armée. Chaque teinte, taille et espacement vient de
   jeu/jetons.css ; les boutons de commande prennent les trois dessins de
   jeu/styles/cadre.css. Seuls les filtres (aria-pressed) et les lignes de
   liste, que le cadre commun écarte, se dessinent ici. */

/* ── Troupes : la liste, et l'ordre de bataille à droite au bureau ─────── */
#hommes #armee .armee__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; margin-top: var(--e-3); }
#hommes #armee .armee__corps > #troupes-racine > .troupes { margin-top: 0; }
@media (min-width: 75rem) {
  #hommes #armee .armee__corps { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
}
#hommes #armee .armee__ordre:empty { display: none; }

/* ── Les cadres communs aux onglets ───────────────────────────────────── */
#hommes :is(.operations__grille, .operations__colonne, .commandants__ecran) { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
@media (min-width: 62rem) {
  #hommes .operations__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); align-items: start; }
}
#hommes .operations__cadre { min-width: 0; }
#hommes :is(.operations__tete, .commandants__tete) {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3);
  margin: 0 0 var(--e-2);
}
#hommes :is(.operations__titre, .commandants__titre) {
  margin: 0;
  font-family: var(--police-titre); font-size: var(--t-2); font-weight: 400;
  letter-spacing: var(--capitales); text-transform: uppercase;
  color: var(--or);
}
#hommes :is(.operations__repere, .commandants__repere) { font-size: var(--t-1); color: var(--texte-pale); font-variant-numeric: tabular-nums; }
#hommes .operations__intertitre {
  margin: var(--e-3) 0 var(--e-1);
  font-family: var(--police-titre); font-size: var(--t-1); font-weight: 400;
  letter-spacing: var(--capitales); text-transform: uppercase; color: var(--or-sourd);
}
#hommes :is(.operations__note, .commandants__note) { margin: var(--e-2) 0 0; font-size: var(--t-2); line-height: var(--interligne); color: var(--texte-pale); }
#hommes .operations__note--perte { color: var(--perte); }
#hommes :is(.operations__vide, .operations__dit, .commandants__vide, .commandants__dit) { margin: 0 0 var(--e-1); font-size: var(--t-3); line-height: var(--interligne); color: var(--texte); }
#hommes :is(.operations__verrou, .commandants__verrou) {
  margin: 0 0 var(--e-2); padding-left: var(--e-2);
  border-left: 2px solid var(--alerte-fond);
  font-size: var(--t-3); line-height: var(--interligne); color: var(--texte);
}
#hommes :is(.operations__retour, .commandants__retour) { margin: var(--e-2) 0 0; font-size: var(--t-3); line-height: var(--interligne); }
#hommes :is(.operations__retour, .commandants__retour).est-bon { color: var(--gain); }

/* ── Les lignes : un nom et sa sous-ligne, des chiffres alignés ────────── */
#hommes :is(.operations__cible, .commandants__nom) { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
#hommes :is(.operations__nom, .commandants__nom) { font-size: var(--t-3); line-height: 1.25; color: var(--texte-fort); overflow-wrap: anywhere; }
#hommes :is(.operations__sous, .commandants__sous) { font-size: var(--t-1); line-height: 1.3; color: var(--texte-pale); }
#hommes :is(.operations__nombre, .commandants__nombre) { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-fort); font-size: var(--t-3); }

/* ── Opérations : les filtres ─────────────────────────────────────────── */
#hommes .operations__filtres { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: 0 0 var(--e-2); }
#hommes #operations button.operations__tri {
  min-height: 36px; padding: var(--e-1) var(--e-3);
  border: var(--filet-cuir); border-radius: var(--rayon);
  background: var(--pierre-3); box-shadow: none;
  font-family: var(--police-corps); font-size: var(--t-2); color: var(--texte);
  cursor: pointer;
}
#hommes #operations button.operations__tri:is(:hover, :focus-visible) { border-color: var(--or); color: var(--texte-fort); transform: none; }
#hommes #operations button.operations__tri[aria-pressed="true"] { border-color: var(--or); background: var(--voile-or-fort); color: var(--or-vif); }

/* ── Opérations : les cibles, un tableau aligné sans <table> ───────────── */
#hommes .operations__cibles { --colonnes: 5.5rem minmax(0, 1fr) 4rem 6.5rem 7.5rem; }
#hommes :is(.operations__entetes, .operations__ligne) {
  display: grid; grid-template-columns: var(--colonnes); align-items: center; gap: var(--e-2);
}
#hommes :is(.operations__entetes, .ordre-bataille__entetes, .commandants__entetes) {
  padding: 0 0 var(--e-1);
  border-bottom: var(--filet);
  font-family: var(--police-titre); font-size: var(--t-1); letter-spacing: var(--capitales); text-transform: uppercase;
  color: var(--texte-pale);
}
#hommes :is(.operations__entetes, .ordre-bataille__entetes, .commandants__entetes) > :is(.operations__nombre, .commandants__nombre) { font-size: var(--t-1); color: var(--texte-pale); }
#hommes .operations__liste {
  list-style: none; margin: 0; padding: 0;
  /* Une liste longue défile dans son cadre : trente cibles chez le roi
     allongeaient l'onglet de deux écrans au téléphone. */
  max-height: min(27rem, 58vh); overflow-y: auto; overscroll-behavior: contain;
  /* Les mots cachés des cellules se placent dans la liste : sans position,
     ils sortaient du cadre et allongeaient la page de deux écrans. */
  position: relative;
}
#hommes .operations__ligne { padding: var(--e-2) 0; border-bottom: 1px solid var(--filet-pale); }
#hommes .operations__ligne.est-fermee :is(.operations__nom, .operations__nombre) { color: var(--texte-pale); }
#hommes .operations__genre {
  display: inline-block; padding: 0 var(--e-1);
  border: 1px solid currentColor; border-radius: var(--rayon);
  font-size: var(--t-1); line-height: 1.5; color: var(--or-sourd);
}
#hommes .operations__genre--camp { color: var(--perte); }
#hommes .operations__genre--recolte { color: var(--gain); }
#hommes .operations__genre--place { color: var(--or); }
#hommes #operations button.operations__preparer { justify-self: end; min-width: 0; white-space: nowrap; }

/* Les sièges et les jurés : le nom, puis un chiffre ou un geste. */
#hommes :is(.operations__sieges, .operations__jures-liste) { list-style: none; margin: 0; padding: 0; }
#hommes :is(.operations__siege, .operations__jure) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-2);
  padding: var(--e-2) 0; border-bottom: 1px solid var(--filet-pale);
}
/* Un serment à exiger : ce qu'il rapporte sur toute la largeur, le geste dessous. */
#hommes .operations__jure--serment { grid-template-columns: minmax(0, 1fr); }
#hommes #operations .operations__jure--serment button.operations__preparer { justify-self: start; white-space: normal; }
#hommes .operations__en-cours .expedition-dehors__liste { margin: 0 0 var(--e-2); }
#hommes .operations__repli { margin-top: var(--e-2); }
#hommes .operations__repli > summary { cursor: pointer; font-size: var(--t-2); color: var(--or); }
#hommes .operations__repli[open] > summary { margin-bottom: var(--e-2); }

/* La doctrine : une liste déroulante à la taille du doigt. */
#hommes .operations__champ { display: block; margin: 0 0 var(--e-2); }
#hommes .operations__champ select {
  width: 100%; min-height: var(--cible); padding: 0 var(--e-2);
  border: var(--filet); border-radius: var(--rayon);
  background: var(--pierre-4); color: var(--texte-fort);
  font-family: var(--police-corps); font-size: var(--t-3);
}

/* Le feu grégeois, replié : son état se lit dans le titre. */
#hommes .operations__feu-tete { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
#hommes .operations__feu-tete > .operations__titre { margin: 0; }
#hommes .operations__feu > .operations__feu-corps { padding: 0 var(--e-3) var(--e-3); }
#hommes .operations__feu .operations__resume { font-family: var(--police-corps); font-size: var(--t-2); letter-spacing: 0; text-transform: none; color: var(--texte); }
#hommes .operations__feu-corps { margin-top: var(--e-2); }
#hommes .operations__colonne > .operations__feu { margin: 0; }

/* L'ordre de bataille : le rang, ses hommes, ce qu'il change. */
#hommes .ordre-bataille { --colonnes: minmax(0, 1fr) 3.5rem 7.5rem; }
#hommes :is(.ordre-bataille__entetes, .ordre-bataille__rang) { display: grid; grid-template-columns: var(--colonnes); align-items: center; gap: var(--e-2); }
#hommes .ordre-bataille__liste { list-style: none; margin: 0; padding: 0; }
#hommes .ordre-bataille__rang { padding: var(--e-2) 0; border-bottom: 1px solid var(--filet-pale); }
#hommes .ordre-bataille__rang:not(.est-tenu) :is(.operations__nom, .operations__nombre) { color: var(--texte-pale); }
#hommes .ordre-bataille__rang .operations__nombre:last-child { font-size: var(--t-2); }

/* ── Commandants : la liste comparable, la fiche sous la ligne ─────────── */
#hommes .commandants__cadre { --colonnes: minmax(0, 1fr) 7.5rem 4.5rem 4.5rem 9rem; }
#hommes .commandants__recrue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: 0 0 var(--e-3); }
#hommes .commandants__condition { flex: 1 1 14rem; margin: 0; font-size: var(--t-2); line-height: var(--interligne); color: var(--texte-pale); }
#hommes .commandants__entetes { display: grid; grid-template-columns: var(--colonnes); gap: var(--e-2); padding-inline: var(--e-2); }
#hommes .commandants__liste { list-style: none; margin: 0; padding: 0; }
#hommes .commandants__item { border-bottom: 1px solid var(--filet-pale); }
#hommes #commandants button.commandants__rangee {
  display: grid; grid-template-columns: var(--colonnes); align-items: center; gap: var(--e-2);
  width: 100%; min-height: var(--cible); padding: var(--e-2);
  border: 0; border-left: 2px solid transparent; border-radius: 0;
  background: none; box-shadow: none;
  font-family: var(--police-corps); text-align: left; color: var(--texte);
  cursor: pointer;
}
#hommes #commandants button.commandants__rangee:is(:hover, :focus-visible) { background: var(--voile-or); transform: none; }
#hommes #commandants .commandants__item.est-chef button.commandants__rangee { border-left-color: var(--or); }
#hommes #commandants .commandants__item.est-ouverte button.commandants__rangee { background: var(--voile-or); }
#hommes .commandants__nom .commandants__sous { display: none; }
#hommes .commandants__poste { font-size: var(--t-2); color: var(--texte); }
#hommes .commandants__item.est-chef .commandants__poste { color: var(--or-vif); }
#hommes .commandants__fiche { padding: var(--e-2) var(--e-2) var(--e-3) calc(var(--e-2) + 2px); }
#hommes .commandants__gestes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }

/* ── Ton dragon : les jauges et les ordres d'abord, le relief à droite ─── */
#hommes #armee-dragon { --gel: var(--or-sourd); --gel-vif: var(--texte); --gel-pale: var(--parchemin-clair); --gel-fonce: var(--fer-sombre); --gel-nuit: var(--pierre-1); }
#hommes .armee-dragon__note { margin: 0 0 var(--e-3); font-style: italic; font-size: var(--t-3); color: var(--texte-pale); }
#hommes .armee-dragon__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }
#hommes .armee-dragon__corps > .dragon-relief { order: 3; margin-inline: auto; width: 100%; }
/* Avant l'œuf, les chemins pour en avoir un passent devant la bête verrouillée :
   c'est là que se trouve le premier geste possible. */
#hommes .armee-dragon__corps > .voie { order: -1; }
#hommes #armee-dragon .dragon-relief__toile { height: clamp(22rem, 62vh, 44rem); }
@media (min-width: 62rem) {
  #hommes .armee-dragon__corps { grid-template-columns: minmax(0, 1fr) minmax(18rem, 30%); }
  /* Les deux blocs de gauche s'empilent : posés tous deux au rang 1, ils se
     recouvraient avant l'œuf. */
  #hommes .armee-dragon__corps > :is(.bete, .voie) { grid-column: 1; grid-row: auto; }
  #hommes .armee-dragon__corps > .dragon-relief { grid-column: 2; grid-row: 1 / span 2; order: 0; position: sticky; top: calc(var(--onglets-haut, 0px) + var(--e-2)); }
  /* Dans sa colonne, la planche de la bête pose la fiche et les ordres côte
     à côte, puis la scène, puis les notes : les jauges et les ordres tiennent
     au premier écran. */
  #hommes #armee-dragon .planche-bete {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "titre titre"
      "fiche ordres"
      "centre centre"
      "notes notes";
  }
}

/* ── Au téléphone : les colonnes qui ne tiennent pas se retirent ───────── */
@media (max-width: 42rem) {
  #hommes #armee-dragon .dragon-relief__toile { height: auto; aspect-ratio: 4 / 5; max-height: 56vh; }
  #hommes .operations__cibles { --colonnes: minmax(0, 1fr) 2.75rem 4.75rem 5.5rem; }
  /* Caché par la découpe, pas par display: none : le lecteur d'écran lit
     encore le genre de la cible. */
  #hommes .operations__cibles .operations__large,
  #hommes .commandants__large { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #hommes .operations__liste { max-height: min(22rem, 50vh); }
  /* Au doigt, une cible de 44 px : le socle ne fixe que la hauteur minimale
     du bureau, la hauteur se pose ici. */
  #hommes #operations .operations__ligne button.operations__preparer { height: var(--cible); padding-inline: var(--e-2); font-size: var(--t-2); }
  #hommes .commandants__cadre { --colonnes: minmax(0, 1fr) 4.5rem 3.5rem; }
  #hommes .commandants__nom .commandants__sous { display: block; }
  #hommes .ordre-bataille { --colonnes: minmax(0, 1fr) 3rem 6.5rem; }
}

/* Ton dragon dans l'Armée (lot E, suite) : la gravure de la scène est
   réduite, le relief 3D montre déjà la bête en grand. Elle reste entière. */
#hommes #armee-dragon .planche-bete__scene { aspect-ratio: auto; min-height: 0; height: clamp(9rem, 24vh, 13rem); }
#hommes #armee-dragon .planche-bete__scene-image { object-fit: contain; background: var(--pierre-0); }
/* Le bouton qui déplie le relief ne sert qu'au téléphone. */
#hommes #armee-dragon .dragon-relief__deplier { display: none; }

@media (max-width: 61.9375rem) {
  /* Les ordres d'abord, puis les jauges, avant la scène : le premier geste
     tient au premier écran, et l'ordre choisi se lit allumé. */
  #hommes #armee-dragon .planche-bete {
    grid-template-areas:
      "titre"
      "ordres"
      "fiche"
      "centre"
      "notes";
  }
  #hommes #armee-dragon .planche-bete .bete__portrait { width: min(7rem, 40%); }
}

@media (max-width: 42rem) {
  /* Le relief est replié au téléphone : son bouton le déplie, et la scène
     3D ne se monte qu'à ce moment. */
  #hommes #armee-dragon .dragon-relief__deplier { display: flex; width: 100%; justify-content: center; }
  #hommes #armee-dragon .dragon-relief:not(.est-deplie) .dragon-relief__toile { display: none; }
  #hommes #armee-dragon .dragon-relief:not(.est-deplie) { min-height: 0; }
  #hommes #armee-dragon .dragon-relief:not(.est-deplie) .dragon-relief__legende { position: static; }
}

/* L'onglet Troupes (lot E, suite). Le titre de la planche redisait « Ton
   armée » sous le titre de la page : il reste pour le lecteur d'écran. */
#hommes #armee > .colonne__titre {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 42rem) {
  /* Au téléphone, les nombres du bandeau vont deux par deux : empilés un par
     ligne, ils repoussaient la liste des troupes au deuxième écran. */
  #hommes #armee .armee__bandeau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hommes #armee .armee__jeton { padding: var(--e-1) var(--e-2); }
  #hommes #armee .armee__jeton .armee__marque { display: none; }
  #hommes #armee .armee__jeton :is(.armee__effectif, .armee__tenue, .armee__entretien, .armee__batailles) { font-size: var(--t-2); }
  #hommes #armee.armee { padding: var(--e-3) var(--e-2); }
}

/* Le feu grégeois de l’ordre de prise : un curseur de jarres, dans la teinte des réglages. */
.terre-preparation__jarres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.terre-preparation__jarres input[type="range"] {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 10rem; min-width: 8rem; height: 1.7rem; margin: 0; padding: 0; background: transparent; cursor: pointer;
}
.terre-preparation__jarres input[type="range"]::-webkit-slider-runnable-track {
  height: .42rem; border: 1px solid color-mix(in srgb, var(--or) 42%, transparent); border-radius: 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or-sourd) 70%, transparent), color-mix(in srgb, var(--pierre-1) 95%, transparent));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pierre-0) 50%, transparent);
}
.terre-preparation__jarres input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: calc(-1 * var(--e-2));
  border: 2px solid var(--or-vif); border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 35% 30%, var(--or-vif), var(--or-fonce) 72%); box-shadow: var(--ombre-2);
}
.terre-preparation__jarres input[type="range"]::-moz-range-track {
  height: .42rem; border: 1px solid color-mix(in srgb, var(--or) 42%, transparent); border-radius: 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or-sourd) 70%, transparent), color-mix(in srgb, var(--pierre-1) 95%, transparent));
}
.terre-preparation__jarres input[type="range"]::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem; border: 2px solid var(--or-vif); border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 35% 30%, var(--or-vif), var(--or-fonce) 72%); box-shadow: var(--ombre-2);
}
.terre-preparation__jarres input[type="range"]:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 3px; }

/* ── Plusieurs dragons et la toise (29/09/2026) ────────────────────────────
   Les bêtes du joueur en cases à médaillon au-dessus de la planche ; la toise
   en bandeau pleine largeur sous la planche et le relief. */
#hommes .dragons-du-joueur { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); }
#hommes .dragons-du-joueur__bete {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--e-2); align-items: center;
  min-height: var(--cible); padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2); text-align: left;
  border: 1px solid var(--fer-sombre); border-radius: var(--rayon-1, 4px);
  background: linear-gradient(180deg, var(--pierre-2, #2a241f), var(--pierre-1, #1d1916)); color: var(--texte);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.08), var(--ombre-1, 0 1px 2px rgba(0, 0, 0, 0.5));
}
#hommes .dragons-du-joueur__bete:hover { border-color: var(--or-sourd); }
#hommes .dragons-du-joueur__bete.est-actif { border-color: var(--or-vif); box-shadow: inset 0 0 0 1px var(--or-vif), var(--ombre-2, 0 2px 6px rgba(0, 0, 0, 0.6)); }
#hommes .dragons-du-joueur__marque { grid-row: 1 / span 2; width: 1.4rem; height: 1.4rem; color: var(--or-vif); }
#hommes .dragons-du-joueur__nom { font-family: var(--police-titre, serif); font-size: var(--t-3); }
#hommes .dragons-du-joueur__stade { font-size: var(--t-2); color: var(--texte-pale); }
#hommes .bete__repere { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--texte-pale); font-style: italic; }

#hommes .armee-dragon__corps > .dragon-toise { order: 4; grid-column: 1 / -1; margin: 0; }
#hommes .dragon-toise {
  padding: var(--e-3); border: 1px solid var(--fer-sombre); border-radius: var(--rayon-1, 4px);
  background: radial-gradient(ellipse at 50% 30%, rgba(80, 60, 44, 0.35), transparent 70%), var(--pierre-0, #14110f);
}
#hommes .dragon-toise__titre { margin: 0 0 var(--e-2); }
#hommes .dragon-toise__toile { position: relative; width: 100%; height: auto; aspect-ratio: 3; }
#hommes .dragon-toise__toile canvas { display: block; width: 100%; height: 100%; }
#hommes .dragon-toise__dit { margin: var(--e-2) 0 var(--e-1); font-size: var(--t-2); color: var(--texte-pale); }
#hommes .dragon-toise__legende { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--e-1) var(--e-4); margin: 0; padding-left: 1.3rem; font-size: var(--t-2); color: var(--texte); }
#hommes .dragon-toise__bete.est-valyria { color: var(--or-vif); }
/* Au bureau, la toise reste dans la colonne de la planche : le relief, collant
   dans la colonne de droite, la recouvrait en pleine largeur. */
@media (min-width: 62rem) {
  #hommes .armee-dragon__corps > .dragon-toise { grid-column: 1; grid-row: auto; }
}
@media (max-width: 42rem) {
  #hommes .dragon-toise { padding: var(--e-2); }
  #hommes .dragon-toise__toile { height: auto; }
  #hommes .dragon-toise__legende { grid-template-columns: minmax(0, 1fr); }
}

/* Les dragons d'une troupe de guerre : les places (la seconde verrouillée sans
   abonnement), puis une case par bête. */
.terre-preparation__places { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-2); padding: 0; list-style: none; }
.terre-preparation__place {
  padding: var(--e-1) var(--e-3); border: 1px solid var(--or-sourd); border-radius: var(--rayon-1, 4px);
  background: linear-gradient(180deg, var(--pierre-2), var(--pierre-1)); font-size: var(--t-2); color: var(--texte);
}
.terre-preparation__place.est-fermee { border-color: var(--fer-sombre); color: var(--texte-pale); border-style: dashed; }
.terre-preparation__dragon { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-2); min-height: var(--cible); }
.terre-preparation__dragon input { width: 1.2rem; height: 1.2rem; accent-color: var(--or-vif); }

/* La décomposition ouverte dans une jauge de la bête (longueur, poids, puissance)
   prenait les capitales grises de `.jauge dt` et le parchemin de `.jauge dd` :
   clair sur clair sur la note. Relevé le 29/09/2026. */
#bete .jauge .chiffre__table dt,
#bete .jauge .chiffre__table dd { color: var(--encre); font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; }

/* Les numéros de la toise, au-dessus de chaque tête (30/09/2026). */
#hommes .dragon-toise__numeros { position: absolute; inset: 0; pointer-events: none; }
#hommes .dragon-toise__numero { position: absolute; transform: translate(-50%, -115%); min-width: 1.5em; padding: 0 0.3em; border: 1px solid var(--or-sourd); border-radius: 999px; background: color-mix(in srgb, var(--pierre-2) 85%, transparent); color: var(--parchemin); font-family: var(--police-titre); font-size: var(--t-1); line-height: 1.5; text-align: center; }