/* ── Le bestiaire ──────────────────────────────────────────────────────────
   Une fiche jamais croisée n'est pas une fiche vide : elle est fermée. Le
   hachage dit qu'il y a quelque chose là, et qu'on ne l'a pas encore vu. */

.bestiaire {
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-3);
}

.fiche {
  padding: var(--e-3) var(--e-3);
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 2%, transparent), transparent 70%), var(--pierre-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.fiche__nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.03em;
  color: var(--texte);
}

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

.fiche__dit {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--texte-pale);
}

.fiche__traits {
  list-style: none;
  margin: var(--e-0) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}

.fiche__traits li {
  padding: var(--e-0) var(--e-2);
  font-size: var(--t-1);
  letter-spacing: 0.02em;
  color: var(--cire);
  border: 1px solid color-mix(in srgb, var(--cire) 55%, transparent);
  border-radius: var(--rayon);
}

.fiche__cout {
  margin: var(--e-0) 0 0;
  font-size: var(--t-1);
  color: var(--or-sourd);
  font-variant-numeric: tabular-nums;
}

.fiche.est-muette {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--fer) 30%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--parchemin-clair) 2%, transparent) 0 6px, transparent 6px 12px),
    var(--pierre-1);
  min-height: 5.5rem;
  justify-content: center;
}

.fiche.est-muette .fiche__nom {
  color: var(--texte-pale);
  font-style: italic;
  letter-spacing: 0.06em;
}

.fiche.est-liee { border-color: var(--or-sourd); }

/* Ce qui te suit : le prix d'abord, l'apport ensuite. */
.suivante {
  margin-top: var(--e-2);
  padding: var(--e-4) var(--e-4);
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, color-mix(in srgb, var(--echelon-5) 8%, transparent), transparent 70%), var(--pierre-3);
}

.suivante__dit {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  color: var(--texte);
}

.suivante__cout {
  margin: var(--e-2) 0 0;
  color: var(--cire);
  font-variant-numeric: tabular-nums;
}

.suivante__apport {
  margin: var(--e-1) 0 0;
  color: var(--or);
  font-size: var(--t-3);
  font-variant-numeric: tabular-nums;
}

/* La composition d'une nuit. */
.nuit__annonce {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--fer-sombre);
}

.nuit__annonce-titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--texte-pale);
  text-transform: uppercase;
}

.horde {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.horde__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-1) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--fer) 25%, transparent);
  font-size: var(--t-3);
  color: var(--texte);
}

.horde__nombre {
  font-variant-numeric: tabular-nums;
  color: var(--cire);
}

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

/* ── Le rêve, le sang, les reliques ────────────────────────────────────────
   Un rêve n'est pas une affaire : il ne se tranche pas. Il se lit, et il se
   distingue par le fond, pas par un bouton. */

.reve {
  margin: 0 0 var(--e-5);
  padding: var(--e-1) 0 var(--e-4);
  /* Le rêve se distingue par ce qui l'entoure, pas par un liseré : un filet
     fin dessous, de l'air autour, et le texte qui change de voix. */
  border-bottom: 1px solid color-mix(in srgb, var(--cire) 35%, transparent);
}

.reve__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(--texte-pale);
}

.reve__texte {
  margin: 0;
  max-width: 46ch;
  font-family: var(--police-corps);
  font-size: var(--t-4);
  line-height: 1.5;
  color: var(--texte);
  font-style: italic;
}

.sang {
  margin: var(--e-2) 0 0;
  padding: var(--e-4) var(--e-4);
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}

.sang__dit {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  color: var(--texte);
}

.reliques {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--e-2);
}

.reliques__rien {
  color: var(--texte-pale);
  font-style: italic;
  font-size: var(--t-3);
}

.relique {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--echelon-5) 6%, transparent);
}

.relique__nom {
  display: block;
  font-family: var(--police-titre);
  color: var(--or);
  letter-spacing: 0.03em;
}

.relique__dit {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--texte-pale);
}

.relique__image, .fiche__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  margin-bottom: var(--e-2);
  image-rendering: pixelated;
}

/* ── Ce que tu portes ──────────────────────────────────────────────────────
   Trois emplacements en haut, les rayons dessous. Un emplacement vide se dit :
   il tient sa ligne, il ne disparaît pas. */

.porte {
  list-style: none;
  margin: 0 0 var(--e-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-3);
}

.porte__ligne {
  padding: var(--e-3) var(--e-3);
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--echelon-5) 6%, transparent);
}

.porte__ligne.est-vide {
  border-color: var(--fer-sombre);
  border-style: dashed;
  background: transparent;
}

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

.porte__quoi {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
  margin-top: var(--e-0);
}

.porte__ligne.est-vide .porte__quoi { color: var(--texte-pale); font-style: italic; }

.porte__dit {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-2);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.rayon { margin-bottom: var(--e-5); }

.rayon__liste {
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-2);
}

.piece {
  padding: var(--e-3) var(--e-3);
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  background: var(--pierre-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

/* L echelon d une piece se lit a la couleur de son cadre entier et a la lueur
   qui la cerne. Une barre de couleur posee sur la seule tranche gauche donnait
   la meme piece sous deux formes selon l ecran.

   Ces regles vivaient dans salle.css, charge AVANT cette feuille : la bordure
   posee ci-dessus sur `.piece` pesait autant et gagnait par l ordre. La couleur
   d echelon ne s est jamais vue. */
.piece--echelon-1 { border-color: var(--echelon-1); }
.piece--echelon-2 { border-color: var(--echelon-2); }
.piece--echelon-3 { border-color: var(--echelon-3); }
.piece--echelon-4 { border-color: var(--echelon-4); box-shadow: 0 0 6px color-mix(in srgb, var(--echelon-4) 25%, transparent); }
.piece--echelon-5 { border-color: var(--echelon-5); box-shadow: 0 0 8px color-mix(in srgb, var(--echelon-5) 30%, transparent); }
.piece--echelon-6 { border-color: var(--echelon-6); box-shadow: 0 0 10px color-mix(in srgb, var(--echelon-6) 35%, transparent); }

.piece__nom {
  font-family: var(--police-titre);
  color: var(--texte);
  letter-spacing: 0.02em;
}

.piece__provenance {
  color: var(--or-sourd);
  font-size: var(--t-1);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.piece__rarete {
  color: var(--parchemin-bas);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.piece--legendaire .piece__rarete { color: var(--or); }
.piece--commun .piece__rarete { color: var(--texte-doux, var(--texte)); }

.piece__dit {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--texte-pale);
}

.piece__fait {
  margin: 0;
  font-size: var(--t-2);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.piece__cout {
  margin: 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
  font-variant-numeric: tabular-nums;
}

.piece__forger {
  margin-top: var(--e-1);
  align-self: flex-start;
}

.piece__etat {
  margin-top: var(--e-1);
  font-size: var(--t-1);
  letter-spacing: 0.04em;
  color: var(--texte-pale);
}

.piece.est-portee { border-color: var(--or); }
.piece.est-portee .piece__etat { color: var(--or); }
.piece.est-fermee { opacity: 0.55; }

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

.piece__image { display: block; width: 100%; height: auto; border-radius: var(--rayon); image-rendering: pixelated; }

.fief__actions-aide {
  flex: 1 0 100%;
  margin: var(--e-1) 0 0;
  color: var(--or-sourd);
  font-size: var(--t-2);
  line-height: 1.45;
}

.guerre__action-aide {
  margin: var(--e-1) 0 0;
  color: var(--or-sourd);
  font-size: var(--t-2);
  line-height: 1.4;
}

/* ── Le trône et la cour ───────────────────────────────────────────────────
   Trois prétendants, quatre charges. Un prétendant abattu reste à sa place :
   la liste raconte la guerre, elle ne l'efface pas. */

.trone__sang {
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--echelon-5) 6%, transparent);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.actes { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--e-2); }
.acte { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-3) var(--e-3); background: var(--parchemin); border: 1px solid var(--or-sourd); border-radius: var(--rayon); }
.acte__nom { margin: 0; font-family: var(--serif-titres); font-size: var(--t-4); color: var(--pierre-1); }
.acte__rang { font-size: var(--t-2); color: var(--sur-parchemin-pale, var(--encre-pale)); }
.acte__dit { margin: 0; font-size: var(--t-3); color: var(--pierre-1); }
.acte__etat { font-size: var(--t-3); color: var(--sur-parchemin-pale, var(--encre-pale)); font-variant-numeric: tabular-nums; }
.acte__faire { min-height: 44px; margin-top: var(--e-1); align-self: flex-start; padding: var(--e-1) var(--e-4); color: var(--pierre-1); background: var(--or); border: 1px solid var(--or-sourd); border-radius: var(--rayon); font: inherit; cursor: pointer; }
/* Un acte indisponible garde un texte lisible (contraste 7 sur le parchemin) : c'est le bord qui dit pourquoi. */
.acte__faire:disabled, .acte.est-en-repos .acte__faire, .acte.est-bloque .acte__faire { color: var(--cuir); background: var(--parchemin-bas); border-color: var(--parchemin-bas); cursor: default; }
.acte.est-bloque .acte__faire { border-color: color-mix(in srgb, var(--perte-fond) 75%, transparent); }
.acte.est-en-repos { opacity: 0.8; }

.pretendants {
  list-style: none;
  margin: 0 0 var(--e-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--e-3);
}

.pretendant {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  background: var(--pierre-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.pretendant__nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--texte);
}

.pretendant__dit {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--texte-pale);
}

.pretendant__ignore {
  margin: 0;
  font-size: var(--t-2);
  color: var(--cire);
}

.pretendant__forces,
.pretendant__cout {
  margin: 0;
  font-size: var(--t-2);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.pretendant__marcher { margin-top: var(--e-2); align-self: flex-start; }

.pretendant.est-abattu { opacity: 0.5; }
.pretendant__etat {
  margin-top: var(--e-1);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.cour { border-top: 1px solid var(--fer-sombre); padding-top: var(--e-4); }
.cour__note { margin: var(--e-1) 0 var(--e-4); color: var(--or); font-variant-numeric: tabular-nums; }

.charges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-3);
}

.charge {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.charge.est-vacante { border-color: var(--fer-sombre); border-style: dashed; }

.charge__nom {
  font-family: var(--police-titre);
  color: var(--texte);
  letter-spacing: 0.02em;
}

.charge__dit {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--texte-pale);
}

.charge__qui {
  font-size: var(--t-2);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.charge.est-vacante .charge__qui { color: var(--texte-pale); font-style: italic; }

.charge__choix { margin-top: var(--e-1); }
.charge__bouton { margin-top: var(--e-1); align-self: flex-start; }

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