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


/* ─────────────────────────────────────────────────────────────────────────
   PREMIERE PLANCHE : LA PREPARATION DE LA BATAILLE

   Un bandeau de titre, trois onglets biseautes, le plan de deploiement au
   centre, trois panneaux a droite, les cartes d hommes en bas et le sceau
   rouge de la decision. Tout est pose sur la pierre presque noire.
   ───────────────────────────────────────────────────────────────────────── */

.parure-guerre {
  --guerre-filet: color-mix(in srgb, var(--or) 28%, transparent);
  display: grid;
  gap: var(--e-4);
  margin: 0 0 var(--e-4);
  padding: var(--e-4) var(--e-5) var(--e-4);
}

.parure-guerre[hidden] { display: none; }

/* La part peinte de la jauge est un span, et un span ne prend pas de largeur.
   Sans cette ligne le rail reste vide : le moral, les places tenues et
   l avantage de chaque tour se lisaient sur un rail noir. */

/* Le bandeau du haut. La planche le pose seul sur toute la largeur, avec un
   filet d or de chaque cote qui rejoint les bords du panneau. */
.parure-guerre__banniere {
  position: relative;
  justify-self: center;
  min-width: min(100%, 26rem);
  margin: 0;
}

.parure-guerre__banniere::before,
.parure-guerre__banniere::after { opacity: 0.9; }


/* ── Les trois onglets ───────────────────────────────────────────────────
   Des tuiles biseautees, separees par un losange. Celui qui porte le regard
   est rempli d or brule ; les autres restent en pierre. */

.parure-guerre__onglets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
}

/* La feuille des pages peint tous les boutons de l ecran de guerre en rouge
   brique. L onglet doit la battre en poids, sinon la tuile choisie ne se
   distingue plus des deux autres. */
#guerre.page .parure-guerre .parure-guerre__onglets button.parure-guerre__onglet {
  min-height: 2.6rem;
  padding: var(--e-2) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.08em;
  color: var(--texte);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 95%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid var(--guerre-filet);
  border-radius: 0;
  clip-path: polygon(0.75rem 0, calc(100% - 0.75rem) 0, 100% 50%, calc(100% - 0.75rem) 100%, 0.75rem 100%, 0 50%);
  cursor: pointer;
}

#guerre.page .parure-guerre .parure-guerre__onglets button.parure-guerre__onglet:hover,
#guerre.page .parure-guerre .parure-guerre__onglets button.parure-guerre__onglet:focus-visible {
  color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--pierre-2) 95%, transparent));
  border-color: var(--or);
}

#guerre.page .parure-guerre .parure-guerre__onglets button.parure-guerre__onglet[aria-current="true"] {
  color: var(--pierre-2);
  background: linear-gradient(180deg, var(--or-vif), var(--or-sourd));
  border-color: var(--or-vif);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 50%, transparent);
}


/* ── Le corps de la planche ──────────────────────────────────────────────
   Le plan a gauche, la colonne des trois panneaux a droite. Sous 68rem la
   colonne repasse dessous : c est le seul point ou la planche se plie. */

/* Le plan tient toute la hauteur de la colonne de droite, comme la carte de la
   planche. Range en haut, il laissait un trou noir sous lui. */
.parure-guerre__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  align-items: stretch;
}

@media (min-width: 68rem) {
  .parure-guerre__corps { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}

.parure-guerre__panneau {
  position: relative;
  display: grid;
  gap: var(--e-1);
  align-content: start;
  min-width: 0;
}

/* La colonne de droite fait 22rem : a la taille pleine du socle, « Ce qu il y a
   en face » passait sur deux lignes et les losanges se retrouvaient au milieu. */
.parure-guerre__panneau .parure__banniere {
  margin-bottom: var(--e-2);
  padding-inline: var(--e-4);
  font-size: clamp(0.95rem, 1.5vw, 1.18rem);
}

.parure-guerre__colonne {
  display: grid;
  align-content: start;
  gap: var(--e-4);
  min-width: 0;
}

/* Le sceau rouge de la decision, au pied de la colonne comme sur la planche. */
.parure-guerre__decision {
  display: grid;
  gap: var(--e-1);
  justify-items: center;
}

.parure-guerre__decision .parure-guerre__vide { text-align: center; }

/* La feuille des pages repeint tous les boutons de cet ecran en rouge brique a
   coins arrondis. Le sceau reprend ses couleurs et ses angles droits. */
#guerre.page .parure-guerre .parure-guerre__decision button.sceau-sang {
  width: 100%;
  font-family: var(--police-titre);
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border: 1px solid var(--or-fonce);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 30%, transparent), var(--ombre-2);
}

#guerre.page .parure-guerre .parure-guerre__decision button.sceau-sang:hover:not(:disabled),
#guerre.page .parure-guerre .parure-guerre__decision button.sceau-sang:focus-visible {
  background: linear-gradient(180deg, var(--cire-vif), var(--peril));
  border-color: var(--or);
}

#guerre.page .parure-guerre .parure-guerre__decision button.sceau-sang[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);
}


/* ── Le plan de deploiement ──────────────────────────────────────────────
   Le fond est le camp au crepuscule, assombri pour que les chiffres tiennent
   dessus. Chaque rang est un carreau ; celui qui porte des hommes s allume. */

/* Le camp au crepuscule sert de sol au plan. Sous un voile a 0,9 il ne restait
   qu un rectangle noir : le voile s allege en haut et se ferme vers le bas,
   ou les carreaux portent les chiffres. */
.parure-guerre__plan {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 50%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 78%, transparent) 42%, color-mix(in srgb, var(--pierre-0) 58%, transparent) 100%),
    url("/jeu/images/fonds/soldat.webp") center 62% / cover no-repeat;
}

.deploiement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-content: start;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deploiement__rang {
  display: grid;
  gap: var(--e-1);
  align-content: start;
  min-width: 0;
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 92%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

.deploiement__rang.est-tenue {
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 85%, transparent), inset 0 0 18px color-mix(in srgb, var(--cire-vif) 18%, transparent);
}

.deploiement__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.05em;
  color: var(--or-vif);
}

.deploiement__compte {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
}

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

.deploiement__sorte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-0) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--or) 18%, transparent);
  font-size: var(--t-3);
  color: var(--texte);
}

.deploiement__sorte-nom { min-width: 0; overflow-wrap: anywhere; }

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

.deploiement__vide,
.deploiement__effet {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--texte-pale);
}

.deploiement__vide { font-style: italic; }


/* ── Les lignes des trois panneaux ───────────────────────────────────────
   Le mot a gauche, le chiffre a droite, un filet pointille entre les deux.
   La planche aligne tous les chiffres sur le meme bord. */

.parure-guerre__ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-1) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--or) 16%, transparent);
}

.parure-guerre__ligne:last-child { border-bottom: 0; }

.parure-guerre__mot {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte);
  overflow-wrap: anywhere;
}

.parure-guerre__valeur {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.parure-guerre__ligne--sorte .parure-guerre__valeur { color: var(--or); }

.parure-guerre__ligne--jauge { align-items: center; }
.parure-guerre__ligne--jauge .jauge-parure { flex: 1 1 8rem; min-width: 0; }

.parure-guerre__marque { flex: none; font-size: var(--t-2); }
.parure-guerre__ligne.est-favorable .parure-guerre__valeur,
.parure-guerre__ligne.est-favorable .parure-guerre__marque { color: var(--gain); }
.parure-guerre__ligne.est-contraire .parure-guerre__valeur,
.parure-guerre__ligne.est-contraire .parure-guerre__marque { color: var(--perte); }
.parure-guerre__ligne.est-neutre .parure-guerre__marque { color: var(--texte-pale); }

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

/* L ecu pend au coin du panneau de tes forces, comme sur la planche. */
.parure-guerre__fanion {
  position: absolute;
  top: -0.5rem;
  right: 0.6rem;
  width: 2rem;
  height: 2.5rem;
  font-family: var(--police-titre);
  font-size: var(--t-4);
}

.parure-guerre__fanion svg { width: 1.3rem; height: auto; }


/* ─────────────────────────────────────────────────────────────────────────
   LES BLOCS DEJA EN PLACE, REPRIS DANS LA MEME PARURE
   ───────────────────────────────────────────────────────────────────────── */

/* Les titres de colonne deviennent des bandeaux biseautes. */
#diplomatie-fiefs .guerre__titre {
  margin: 0 0 var(--e-3);
  padding: var(--e-1) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  clip-path: polygon(0.9rem 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0.9rem 100%, 0 50%);
}

#diplomatie-fiefs .guerre__titre--fiefs,
#diplomatie-fiefs .guerre__titre--feu { margin-top: var(--e-5); }

/* Les cartes de jures. Les hommes et les places voisines ont chacun leur
   feuille : parure-armee.css et parure-voisins.css, chargees a cote de
   celle-ci. Rien ici ne les touche. */
#guerre-jures .jure {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  border: 1px solid var(--or-fonce);
  border-radius: 0;
  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) 18%, transparent), var(--ombre-2);
}

#guerre-jures .jure::before,
#guerre-jures .jure::after {
  content: "";
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border: 0 solid var(--or);
  opacity: 0.7;
  pointer-events: none;
}

#guerre-jures .jure::before {
  top: 3px;
  left: 3px;
  border-top-width: 2px;
  border-left-width: 2px;
}

#guerre-jures .jure::after {
  right: 3px;
  bottom: 3px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

#guerre-jures .jure.est-vide { border-style: dashed; }

#guerre-jures .jure__nom {
  font-family: var(--police-titre);
  color: var(--or-vif);
}


/* ─────────────────────────────────────────────────────────────────────────
   SECONDE PLANCHE : LA BATAILLE

   Deux bannieres aux coins, les deux commandants en vis-a-vis, le champ au
   centre, la colonne des trois tours, et en bas les pertes cumulees, ce qui
   pese et le resume sur parchemin.
   ───────────────────────────────────────────────────────────────────────── */

.guerre-duel {
  position: relative;
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-4);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-1) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  border: 1px solid var(--or-fonce);
  border-radius: 0;
  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) 20%, transparent), var(--ombre-2);
}

.guerre-duel::before,
.guerre-duel::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 0 solid var(--or);
  opacity: 0.75;
  pointer-events: none;
}

.guerre-duel::before { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
.guerre-duel::after { right: 4px; bottom: 4px; border-right-width: 2px; border-bottom-width: 2px; }

.guerre-duel.est-gagnee { border-color: var(--or); }
.guerre-duel.est-perdue { border-color: color-mix(in srgb, var(--cire-vif) 75%, transparent); }

/* Le titre du combat prend le bandeau du socle. */
.guerre-duel__titre {
  justify-self: center;
  min-width: min(100%, 22rem);
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  text-transform: none;
}

/* L ampleur du combat : quatre tuiles, celle du combat en cours allumee. */
.melee__ampleur {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.melee__echelle {
  padding: var(--e-1) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.07em;
  color: var(--texte-pale);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  clip-path: polygon(0.6rem 0, calc(100% - 0.6rem) 0, 100% 50%, calc(100% - 0.6rem) 100%, 0.6rem 100%, 0 50%);
}

.melee__echelle.est-courante {
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
}

/* Le corps : camp, champ, tours, camp. Sur telephone tout se met en pile. */
.melee__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
}

@media (min-width: 60rem) {
  .melee__corps {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 15rem) minmax(0, 11rem);
  }

  .melee__corps--sans-tours {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 11rem);
  }
}

/* Les deux camps. Le portrait sous cadre, le nom, la force, la jauge. */
.melee__camp {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  min-width: 0;
  padding: var(--e-3) var(--e-3);
}

.melee__camp .vignette {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.melee__role {
  margin: 0;
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.melee__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--perte);
  overflow-wrap: anywhere;
}

.melee__camp--eux .melee__nom { color: var(--or-vif); }

.melee__mesure {
  margin: var(--e-1) 0 0;
  padding-top: var(--e-2);
  border-top: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.melee__chiffre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  text-align: center;
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--ombre-texte);
}

.melee__camp .jauge-parure { margin-top: var(--e-1); }

/* La banniere pendante en tete du camp. Elle porte l ecu de la maison quand la
   maison en a un, sa premiere lettre sinon. */
.melee__fanion {
  justify-self: center;
  width: 2.7rem;
  height: 3.3rem;
  padding-bottom: var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  box-shadow: var(--ombre-2);
}

.melee__fanion svg { width: 1.85rem; height: auto; }

/* Le champ : l illustration, les deux barres de force, la phrase du tour. */
.melee__champ {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  min-width: 0;
}

.melee__vue {
  position: relative;
  min-height: 9rem;
  aspect-ratio: 16 / 10;
  /* Le camp est peint en hauteur : cadre sur le bas de l image, sinon la
     vignette ne montre que le ciel. */
  background-position: center 82%;
  background-size: cover;
}

.melee__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, transparent 30%, color-mix(in srgb, var(--pierre-0) 85%, transparent) 100%);
  pointer-events: none;
}

.guerre-duel__champ { margin-top: 0; }

.guerre-duel__phase {
  margin: 0;
  padding: var(--e-2) var(--e-2);
  text-align: center;
  background: color-mix(in srgb, var(--pierre-0) 60%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

/* ── La colonne des tours ────────────────────────────────────────────────
   Chaque tour du journal devient une carte a banniere rouge, reliee a la
   suivante par une pointe d or. */

.melee__tours {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  min-width: 0;
}

.melee__tours:empty { display: none; }

.guerre-journal__titre {
  margin: 0 0 var(--e-2);
  text-align: center;
}

.guerre-journal {
  gap: var(--e-4);
  min-width: 0;
}

.guerre-journal__tour {
  position: relative;
  display: grid;
  gap: var(--e-1);
  min-width: 0;
  padding: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 92%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--cire-vif) 65%, transparent);
  border-left-width: 1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 85%, transparent), var(--ombre-2);
}

/* La pointe qui relie un tour au suivant. */
.guerre-journal__tour + .guerre-journal__tour::before {
  content: "";
  position: absolute;
  top: -0.72rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--or);
  opacity: 0.75;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.guerre-journal__banniere {
  margin: 0;
  padding: var(--e-1) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border-bottom: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  overflow-wrap: anywhere;
}

.guerre-journal__dit {
  padding: var(--e-1) var(--e-2) 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
  overflow-wrap: anywhere;
}

/* Les mesures du tour : ton chiffre a gauche, le mot au milieu, celui d en
   face a droite. La planche aligne les deux camps de part et d autre du mot. */
.guerre-journal__mesures {
  display: grid;
  gap: var(--e-0);
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--e-1) var(--e-2) 0;
}

.guerre-journal__mesure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--e-2);
  align-items: baseline;
}

.guerre-journal__mien,
.guerre-journal__leur {
  min-width: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.guerre-journal__leur { text-align: right; }

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

.guerre-journal__tour > :last-child { padding-bottom: var(--e-2); }

.guerre-journal__avantage {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  padding: 0 var(--e-2) var(--e-0);
}

.guerre-journal__avantage .guerre-journal__dit { flex: none; padding: 0; }
.guerre-journal__avantage .jauge-parure { flex: 1 1 4rem; min-width: 0; }

/* ── Le pied de la planche ───────────────────────────────────────────────
   Les pertes cumulees, ce qui pese sur le combat, et le resume. */

.melee__pied {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  align-items: stretch;
}

@media (min-width: 60rem) {
  .melee__pied { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
}

.melee__pertes {
  display: grid;
  gap: var(--e-1);
  align-content: start;
  min-width: 0;
  padding: var(--e-3) var(--e-3);
}

.melee__compte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-1) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--or) 16%, transparent);
  font-size: var(--t-3);
  color: var(--texte);
}

.melee__compte:last-child { border-bottom: 0; }

/* Les deux camps du panneau des pertes, cote a cote. */
.melee__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--e-1) var(--e-4);
}

.melee__colonne { min-width: 0; }

.melee__compte-mot { min-width: 0; overflow-wrap: anywhere; }

.melee__compte-nombre {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
}

.melee__cote {
  margin: var(--e-2) 0 var(--e-0);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
}

.melee__cote:first-of-type { margin-top: 0; }

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

/* Ce qui pese : le dragon, l operation de siege. La bete peinte derriere. */
.melee__atouts {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  min-width: 0;
  padding: var(--e-3) var(--e-3);
}

.melee__bete {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.guerre-duel__atout {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.45;
  text-align: left;
  color: var(--or);
  overflow-wrap: anywhere;
}

/* Le resume, sur parchemin, avec le sceau de cire en filigrane. */
#guerre-issue {
  position: relative;
  margin: var(--e-2) var(--e-5) var(--e-4);
  padding: var(--e-4) var(--e-4);
  color: var(--pierre-4);
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--parchemin-clair) 55%, transparent), transparent 60%),
    linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
  border: 1px solid color-mix(in srgb, var(--bois) 60%, transparent);
  border-radius: 0;
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--bois) 35%, transparent), var(--ombre-2);
}

#guerre-issue.est-gagnee { border-color: color-mix(in srgb, var(--bois) 60%, transparent); }
#guerre-issue.est-perdue { border-color: color-mix(in srgb, var(--cire) 70%, transparent); }

/* Range au pied de la planche, le parchemin perd ses marges de page et garde
   une bande libre en bas pour le sceau de cire. */
#guerre-issue.melee__resume {
  margin: 0;
  padding-bottom: 3.6rem;
}

#guerre-issue.melee__resume::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  width: 2.6rem;
  height: 2.6rem;
  background:
    radial-gradient(circle at 50% 50%, transparent 34%, color-mix(in srgb, var(--cire-fonce) 45%, transparent) 36%, transparent 40%),
    radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--perte) 35%, transparent), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--cire) 58%, var(--cire-fonce) 72%, transparent 74%);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--bois-sombre) 45%, transparent);
  pointer-events: none;
}

#guerre-issue.melee__resume.est-perdue::after {
  background:
    radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--texte-pale) 60%, transparent), transparent 52%),
    radial-gradient(circle at 50% 50%, var(--cuir) 60%, var(--pierre-3) 74%, transparent 76%);
}

.melee-resume__titre {
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.04em;
  color: var(--cire-fonce);
}

.melee-resume__dit {
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.55;
  color: var(--pierre-4);
}

#guerre-issue.est-perdue .melee-resume__titre { color: var(--peril); }


/* ── Les ordres pris round par round ─────────────────────────────────────
   Le panneau qui coupe la bataille pour demander l ordre du tour reprend le
   cadre et le sceau. */

.guerre-ordres {
  margin-top: 0;
  padding: var(--e-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  border: 1px solid var(--or-fonce);
}

.guerre-ordres__titre {
  padding: var(--e-1) var(--e-4);
  font-size: var(--t-4);
  letter-spacing: 0.09em;
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border-top: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  clip-path: polygon(0.8rem 0, calc(100% - 0.8rem) 0, 100% 50%, calc(100% - 0.8rem) 100%, 0.8rem 100%, 0 50%);
}

#guerre.page .guerre-ordres .guerre-ordres__choix button {
  font-family: var(--police-titre);
  letter-spacing: 0.06em;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 95%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border-color: var(--or-fonce);
  border-radius: 0;
}

#guerre.page .guerre-ordres .guerre-ordres__choix button:hover,
#guerre.page .guerre-ordres .guerre-ordres__choix button:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border-color: var(--or);
}


/* ── Le telephone ────────────────────────────────────────────────────────
   Sous 52rem la planche perd ses colonnes mais garde ses cadres. */

/* Sous 60rem la planche de bataille passe en pile : le portrait du commandant
   prendrait toute la largeur de la page, donc il se borne ici. */
@media (max-width: 60rem) {
  .melee__camp .vignette { max-width: 9rem; justify-self: center; }
}

@media (max-width: 52rem) {
  .parure-guerre { padding: var(--e-3) var(--e-4) var(--e-4); }
  .parure-guerre__onglet { flex: 1 1 8rem; padding: var(--e-2) var(--e-3); }
  #guerre-issue { margin: var(--e-2) var(--e-4) var(--e-4); }
}


/* ─────────────────────────────────────────────────────────────────────────
   TROISIEME PLANCHE : LE SIEGE

   Une banniere pendante au coin, la place assiegee a gauche sur la pierre,
   les trois chemins de l assaut au centre sur parchemin, le sceau rouge en
   bas. Les trois fiches portent les memes lignes dans le meme ordre : la
   grille des facteurs est la seule chose qui les rend comparables.

   Les selecteurs partent de `#guerre` et jamais de `#jeu` : la page de guerre
   n est pas dans `#jeu`, un selecteur prefixe `#jeu` ne mordrait sur rien.
   ───────────────────────────────────────────────────────────────────────── */

.parure-siege-guerre {
  display: grid;
  gap: var(--e-4);
  margin: 0 0 var(--e-4);
  padding: var(--e-4) var(--e-5) var(--e-4);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 55%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 86%, transparent) 45%, color-mix(in srgb, var(--pierre-0) 94%, transparent) 100%),
    url("/jeu/images/siege/forteresse.webp") center 30% / cover no-repeat;
}

.parure-siege-guerre[hidden] { display: none; }

/* La banniere pendante du coin : l ecu de ta maison, le titre a cote. */
.parure-siege__tete {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

.parure-siege__fanion {
  width: 2.6rem;
  height: 3.2rem;
  margin-top: calc(-1 * var(--e-4));
  font-size: var(--t-5);
  box-shadow: var(--ombre-2);
}

.parure-siege__fanion svg { width: 1.7rem; height: auto; }

.parure-siege__banniere {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}


/* ── Le corps : la pierre a gauche, le parchemin au centre ───────────────
   Sous 68rem la colonne de la place repasse au-dessus des fiches. */

.parure-siege__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
}

@media (min-width: 68rem) {
  .parure-siege__corps { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.parure-siege__situation,
.parure-siege__chemins {
  display: grid;
  gap: var(--e-1);
  align-content: start;
  min-width: 0;
}

.parure-siege__situation .parure__banniere,
.parure-siege__chemins .parure__banniere {
  margin-bottom: var(--e-2);
  padding-inline: var(--e-4);
  font-size: clamp(0.95rem, 1.5vw, 1.18rem);
}

/* La vue de la place, cadree sur ses murs. */
.parure-siege__vue {
  margin: 0 0 var(--e-2);
  aspect-ratio: 16 / 9;
  width: 100%;
}

.parure-siege__place {
  margin: 0 0 var(--e-1);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
}

.parure-siege__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.04em;
  color: var(--or-vif);
  overflow-wrap: anywhere;
}

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

/* L objectif, au pied de la colonne de pierre. */
.parure-siege__objectif {
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
}

.parure-siege__objectif-titre {
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}

.parure-siege__objectif-dit {
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--texte);
  overflow-wrap: anywhere;
}


/* ── Les trois fiches de parchemin ───────────────────────────────────────
   Cote a cote tant que la place le permet, en pile ensuite. Chaque fiche est
   un bouton : le joueur choisit son chemin en touchant la fiche entiere. */

.parure-siege__fiches {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  align-items: stretch;
}

@media (min-width: 46rem) {
  .parure-siege__fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La feuille des pages repeint tous les boutons de l ecran de guerre en rouge
   brique a coins arrondis, avec un selecteur a quatre `:not()`. La fiche doit
   la battre en poids, sinon le parchemin disparait sous la brique. */
#guerre.page .parure-siege-guerre .parure-siege__fiches button.parure-siege__fiche.parchemin-bloc:not(.lien) {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--e-2);
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: var(--e-5) var(--e-4) var(--e-4);
  font: inherit;
  text-align: left;
  color: var(--pierre-4);
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--parchemin-clair) 55%, transparent), transparent 60%),
    linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
  border: 1px solid color-mix(in srgb, var(--bois) 60%, transparent);
  border-radius: 0;
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--bois) 35%, transparent), var(--ombre-2);
  cursor: pointer;
}

#guerre.page .parure-siege-guerre .parure-siege__fiches button.parure-siege__fiche.parchemin-bloc:not(.lien):hover,
#guerre.page .parure-siege-guerre .parure-siege__fiches button.parure-siege__fiche.parchemin-bloc:not(.lien):focus-visible {
  border-color: var(--or);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--bois) 35%, transparent), 0 0 12px color-mix(in srgb, var(--or) 40%, transparent);
}

#guerre.page .parure-siege-guerre .parure-siege__fiches button.parure-siege__fiche.parchemin-bloc.est-choisie:not(.lien) {
  border-color: var(--or-vif);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--or) 55%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--bois) 30%, transparent),
    0 0 14px color-mix(in srgb, var(--or) 45%, transparent);
}

/* L ecu pend au-dessus de la fiche, comme sur la planche. */
.parure-siege__ecu {
  position: absolute;
  top: -1.4rem;
  left: 50%;
  width: 2.9rem;
  height: 3.4rem;
  transform: translateX(-50%);
  box-shadow: var(--ombre-2);
}

.parure-siege__marque {
  width: 1.75rem;
  height: auto;
  margin-bottom: var(--e-2);
  fill: none;
  stroke: var(--or-vif);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le titre de la fiche, sur son propre bandeau sombre. Le socle peint deja
   `.parchemin-bloc__titre` en rouge sombre : sur le bandeau rouge il ne se
   lisait plus, donc la regle d ici porte une classe de plus. */
.parure-siege__fiche .parchemin-bloc__titre.parure-siege__titre {
  margin: 0;
  padding: var(--e-1) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border: 1px solid color-mix(in srgb, var(--or) 55%, transparent);
  overflow-wrap: anywhere;
}

/* La gravure : des traits d or sur la pierre, dans le cadre du socle. */
.parure-siege__gravure {
  display: block;
  aspect-ratio: 5 / 3;
  width: 100%;
  padding: var(--e-2);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
}

.parure-siege__trait {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: color-mix(in srgb, var(--or) 90%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.parure-siege__dit {
  margin: 0;
  min-height: 6.2em;
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--cuir);
  overflow-wrap: anywhere;
}


/* ── La grille des facteurs ──────────────────────────────────────────────
   Les memes quatre lignes, dans le meme ordre, sur les trois fiches : le mot
   a gauche, l appreciation dessous, le chiffre a droite. */

.parure-siege__facteurs {
  display: grid;
  gap: var(--e-0);
  margin-top: var(--e-1);
  padding-top: var(--e-1);
  border-top: 1px solid color-mix(in srgb, var(--bois) 50%, transparent);
}

.parure-siege__facteur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-0) var(--e-2);
  align-items: baseline;
  padding: var(--e-1) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--bois) 45%, transparent);
}

.parure-siege__facteur:last-child { border-bottom: 0; }

.parure-siege__facteur-mot {
  min-width: 0;
  font-size: var(--t-3);
  color: var(--cuir-clair);
  overflow-wrap: anywhere;
}

.parure-siege__facteur-mesure {
  grid-column: 1;
  min-width: 0;
  font-size: var(--t-1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bois);
  overflow-wrap: anywhere;
}

.parure-siege__facteur-mesure:empty { display: none; }

.parure-siege__facteur-valeur {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  text-align: right;
  color: var(--pierre-4);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.parure-siege__facteur.est-favorable .parure-siege__facteur-valeur,
.parure-siege__facteur.est-favorable .parure-siege__facteur-mesure { color: var(--gain-fond); }

.parure-siege__facteur.est-contraire .parure-siege__facteur-valeur,
.parure-siege__facteur.est-contraire .parure-siege__facteur-mesure { color: var(--cire); }

.parure-siege__manque {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--cire);
  overflow-wrap: anywhere;
}


/* ── Le sceau du siege ───────────────────────────────────────────────────
   Il reprend le bloc de decision de la premiere planche, donc ses regles de
   couleur et d angles droits valent aussi ici. */

.parure-siege__decision { margin-top: var(--e-1); }

#guerre.page .parure-siege-guerre .parure-siege__decision button.sceau-sang {
  width: min(100%, 34rem);
  justify-self: center;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.parure-siege__decision .parure-guerre__vide { text-align: center; }


/* ── Le telephone ────────────────────────────────────────────────────────
   Sous 52rem la planche perd ses marges de page et les fiches s ecartent pour
   que l ecu ne morde pas sur la fiche du dessus. */

@media (max-width: 52rem) {
  .parure-siege-guerre { padding: var(--e-3) var(--e-4) var(--e-4); }
  .parure-siege__fiches { gap: var(--e-5); }
}

/* L ecu de la maison qui tient le fief : peint quand il existe, compose sinon. */
.fief__blason { width: 34px; height: 39px; flex: none; margin-right: var(--e-2); align-self: center; }