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

/* Elle habille aussi l'ecran du royaume, faute d'une feuille a son nom : la
   fiche de maison, les pretendants et la cour sont peints par royaume.js. */


/* ═══════════════════════════════════════════════════════════════════════
   LA CARTE
   La planche montre le monde plein cadre, deux panneaux de pierre poses
   dessus, les outils en medaillons a droite et le jour en cartouche en bas.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Les deux panneaux poses sur le monde ────────────────────────────────
   Les volets etaient deux rectangles de verre a coins arrondis. La planche
   les veut en pierre, cercles d'or, avec une ferrure a deux angles. */

.volet {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 94%, transparent), color-mix(in srgb, var(--pierre-0) 97%, 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-3);
}

/* Les ferrures : deux traits qui se croisent dans l'angle. Elles se posent
   au-dessus du contenu, donc elles ne prennent aucun clic. */
.volet::before,
.volet::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 0.8rem;
  height: 0.8rem;
  border: 0 solid var(--or);
  opacity: 0.7;
  pointer-events: none;
}

.volet::before {
  top: 3px;
  left: 3px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.volet::after {
  right: 3px;
  bottom: 3px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

/* Le titre du panneau, en bandeau. `html[data-vue="jeu"]` est repris de la
   feuille de coque : sans lui, la regle d'origine garderait le fond nu. */
html[data-vue="jeu"] .volet .volet__poignee {
  justify-content: flex-start;
  gap: var(--e-2);
  /* La hauteur reste celle de la feuille de coque : quarante-six pixels. En
     posant quarante ici, la parure ramenait la poignee sous la taille d'une
     cible au doigt, et le banc mobile la mesurait a quarante. */
  padding: 0.3rem 0.7rem;
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border-top: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
}

.volet .volet__poignee::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  background: var(--or);
  transform: rotate(45deg);
  opacity: 0.85;
}

.volet .volet__titre {
  flex: 1;
  text-align: center;
  font-size: var(--t-2);
  letter-spacing: 0.19em;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}

.volet .volet__titre::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: var(--e-2);
  vertical-align: 0.05em;
  background: var(--or);
  transform: rotate(45deg);
  opacity: 0.85;
}

.volet .volet__chevron {
  border-right-color: var(--or);
  border-bottom-color: var(--or);
}

.volet .volet__corps { padding: var(--e-3) var(--e-3) var(--e-3); }

/* La ligne du volet : la date du monde, puis l'assaut qui vient. Vide, elle
   ne prend pas de place. */
.volet .volet__note {
  display: grid;
  gap: var(--e-0);
  margin: 0 0 var(--e-2);
  font-style: normal;
  font-size: var(--t-2);
}

.volet .volet__note:empty { display: none; }

.volet .volet__note-date {
  padding: var(--e-1) var(--e-2);
  font-family: var(--police-titre);
  letter-spacing: 0.04em;
  color: var(--or-vif);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--or) 50%, transparent);
}

.volet .volet__note-nuit {
  padding: var(--e-1) var(--e-2);
  color: var(--glace-clair);
  background: color-mix(in srgb, var(--glace-ardoise) 60%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--glace) 55%, transparent);
}


/* ── Les lignes a traiter, dans le panneau de gauche ─────────────────────
   La planche pose chaque entree sur son propre bloc de pierre, marque a
   gauche, mot en or, phrase en dessous. Le bouton passe a droite du mot :
   pose sous la phrase il faisait trois fois la hauteur d'une ligne. */

#volet-cap .priorite {
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 92%, transparent), color-mix(in srgb, var(--pierre-0) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

#volet-cap .priorite--focus {
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 14%, transparent);
}

#volet-cap .priorite--urgent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire) 42%, transparent), color-mix(in srgb, var(--pierre-0) 92%, transparent));
  border-color: color-mix(in srgb, var(--cire-vif) 70%, transparent);
}

/* La marque tient dans un disque de pierre cercle d'or : le point seul se
   perdait sur le fond du panneau. */
#volet-cap .priorite__marque {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1;
  color: var(--or-vif);
  background: radial-gradient(circle at 35% 30%, var(--pierre-4), var(--pierre-1) 75%);
  border: 1px solid color-mix(in srgb, var(--or) 50%, transparent);
  border-radius: var(--rayon-rond);
}

#volet-cap .priorite--urgent .priorite__marque {
  color: var(--parchemin);
  border-color: color-mix(in srgb, var(--or) 75%, transparent);
  background: radial-gradient(circle at 35% 30%, var(--cire), var(--cire-fonce) 75%);
}

#volet-cap .priorite__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e-2);
}

#volet-cap .priorite__titre {
  grid-column: 1;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.02em;
  color: var(--or-vif);
}

#volet-cap .priorite__dit {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--e-0);
}

/* Le bouton passe par `#jeu #volet-cap` : la feuille des quetes habille tous
   les boutons du jeu depuis `#jeu button`, et une seule classe n'y suffit
   pas. */
#jeu #volet-cap .priorite__ouvrir {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  min-height: 34px;
  padding: var(--e-0) var(--e-3);
  font-family: var(--police-titre);
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  border-radius: 0;
  box-shadow: none;
}

#jeu #volet-cap .priorite__ouvrir:hover,
#jeu #volet-cap .priorite__ouvrir:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--cuir), var(--pierre-3));
  border-color: var(--or);
  box-shadow: none;
}


/* ── Les nouvelles, dans le panneau de droite ────────────────────────────
   Sur la planche, chaque nouvelle porte un ecu a gauche, son jour en petites
   capitales d'or, puis la phrase. */

#volet-nouvelles .volet__liste--nouvelles li {
  position: relative;
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

#volet-nouvelles .volet__liste--nouvelles li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  width: 1.05rem;
  height: 1.25rem;
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 55%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

#volet-nouvelles .volet__liste--nouvelles .jour { color: var(--or); }
#volet-nouvelles .volet__liste--nouvelles .dit { color: var(--parchemin); }

#volet-nouvelles .volet__vide { padding: var(--e-2) 0; }


/* ── La legende de la carte ──────────────────────────────────────────────
   Elle est posee sous les nouvelles. Sur la planche elle a son propre
   encadre, avec un titre en petites capitales. */

#carte-legende {
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-2) var(--e-2);
  background: color-mix(in srgb, var(--pierre-0) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
}

.carte-legende__titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
}

.carte-legende__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or) 45%, transparent), transparent);
}

.volet .carte__legende { margin-top: 0; }

/* La pastille devient un carre cercle d'or, comme sur la planche : le rond
   se confondait avec la puce du navigateur. */
.volet .carte__legende .carte__pastille {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 0;
  box-shadow: var(--ombre-1), 0 0 0 2px color-mix(in srgb, var(--or) 35%, transparent);
}


/* ── Le cartouche du jour ────────────────────────────────────────────────
   La planche garde la date du monde au bas de la carte, dans un sceau rond
   pose sur une plaque. Le jour vivait dans une ligne du volet de gauche, ou
   on ne le cherchait pas. */

/* Il se pose en haut, sous le bandeau : en bas de la carte il tombait sur le
   rappel de compte, qui occupe le meme point et passe devant. */
.cartouche-jour {
  position: absolute;
  left: 50%;
  top: calc(var(--marge-haut) + var(--barre-haut) + 0.6rem);
  z-index: 12;
  max-width: 22rem;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-1) var(--e-4) var(--e-1) var(--e-2);
  transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 94%, transparent), color-mix(in srgb, var(--pierre-0) 96%, transparent));
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 20%, transparent), var(--ombre-2);
  clip-path: polygon(0.8rem 0, calc(100% - 0.8rem) 0, 100% 50%, calc(100% - 0.8rem) 100%, 0.8rem 100%, 0 50%);
  pointer-events: none;
}

.cartouche-jour__sceau {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-variant-numeric: tabular-nums;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
  background: radial-gradient(circle at 35% 28%, var(--pierre-4), var(--pierre-1) 74%);
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon-rond);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--or) 30%, transparent), var(--ombre-2);
}

.cartouche-jour__mots {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.cartouche-jour__quoi {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.cartouche-jour__phase {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--parchemin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Une page ouverte couvre le monde : le cartouche part avec les outils. */
html[data-page-ouverte] .cartouche-jour { display: none; }

/* Sous 60 rem les deux panneaux mangent toute la largeur : le cartouche
   n'aurait plus de place au milieu, et la ligne du volet reprend la date. */
@media (max-width: 60rem) {
  .cartouche-jour { display: none; }
}

/* Au-dessus, le cartouche porte la date : la ligne du volet ne garde que
   l'assaut qui vient, sinon la meme phrase se lit deux fois sur l'ecran. */
@media (min-width: 60.0625rem) {
  .volet .volet__note-date { display: none; }
}



/* ── Les outils d'approche ───────────────────────────────────────────────
   La planche pose les gestes de la carte en medaillons ronds cercles d'or.
   Le bouton des couches garde sa forme longue : son texte ne tient pas dans
   un disque. */

#jeu #carte-outils button:not(.carte__mode) {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--rayon-rond);
  color: var(--or-vif);
  background: radial-gradient(circle at 35% 28%, var(--pierre-4), var(--pierre-1) 74%);
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 25%, transparent), var(--ombre-2);
  backdrop-filter: none;
}

#jeu #carte-outils button:not(.carte__mode):hover,
#jeu #carte-outils button:not(.carte__mode):focus-visible {
  color: var(--parchemin-clair);
  background: radial-gradient(circle at 35% 28%, var(--cuir), var(--pierre-1) 74%);
  border-color: var(--or);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or-vif) 50%, transparent), 0 0 10px color-mix(in srgb, var(--or) 35%, transparent);
}


/* ── La feuille du bas ───────────────────────────────────────────────────
   Le panneau qui monte quand on touche un lieu. Sur la planche il a le meme
   cadre que les autres, et son nom est pose en bandeau biseaute. */

.feuillet {
  background: 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);
  border-bottom: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--or) 14%, transparent), 0 -14px 40px color-mix(in srgb, var(--pierre-0) 65%, transparent);
}

.feuillet__poignee span { background: color-mix(in srgb, var(--or) 50%, transparent); }

.feuillet .feuillet__titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-1) var(--e-5);
  font-size: var(--t-5);
  letter-spacing: 0.09em;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
  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.9rem 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0.9rem 100%, 0 50%);
}

.feuillet .feuillet__titre::before,
.feuillet .feuillet__titre::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  background: var(--or);
  transform: rotate(45deg);
  opacity: 0.85;
}

.feuillet .feuillet__fermer {
  border-color: color-mix(in srgb, var(--or) 40%, transparent);
  border-radius: 0;
  color: var(--or);
}

.feuillet .feuillet__fermer:hover { border-color: var(--or); color: var(--parchemin-clair); }

.feuillet .carte-region__dit { color: var(--texte-pale); }

/* La piece qui traine par terre, dans sa feuille : l'image en tete, sur un
   fond sombre, avec le cadre de fer des objets. Elle est carree et sort du
   meme rendu que la forge, a 384 pixels de cote. */
.feuillet .butin__image {
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 0 auto var(--e-2);
  object-fit: contain;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pierre-4) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

.feuillet .carte-region__lignes {
  padding: var(--e-2) var(--e-2);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--or) 35%, transparent);
}

/* Les gestes de la feuille : le premier est celui qu'on attend, il porte le
   rouge du sceau ; les autres restent en or eteint. */
#feuille .feuillet__actions .carte-region__aller {
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-titre);
  letter-spacing: 0.06em;
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid var(--or-fonce);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 18%, transparent);
}

#feuille .feuillet__actions .carte-region__aller:hover:not(:disabled),
#feuille .feuillet__actions .carte-region__aller:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--cuir), var(--pierre-3));
  border-color: var(--or);
}

#feuille .feuillet__actions .carte-region__aller:first-child {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border-color: var(--or-fonce);
}

#feuille .feuillet__actions .carte-region__aller:first-child:hover:not(:disabled),
#feuille .feuillet__actions .carte-region__aller:first-child:focus-visible {
  background: linear-gradient(180deg, var(--cire-vif), var(--peril));
  border-color: var(--or);
}


/* ═══════════════════════════════════════════════════════════════════════
   LE ROYAUME
   La planche partage l'ecran en trois : la fiche de la maison a gauche,
   les rivaux au milieu, la cour en bas.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── La fiche de la maison ───────────────────────────────────────────────
   La planche range sous le nom de la maison trois sections : ce qu'on sait
   d'elle, ce qu'elle vaut, avec qui elle traite.

   Le panneau lui-meme, son cadre et son bandeau viennent de l'ecran de la
   famille, qui le tient. Je n'habille ici que les sections que j'y pose :
   deux mains sur le meme cadre, et le cadre change a chaque peinture. */

#maison-sections { display: grid; }

.fiche-maison__section { padding: var(--e-3) 0 var(--e-1); }

.fiche-maison__section + .fiche-maison__section {
  margin-top: var(--e-2);
  border-top: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}

.fiche-maison__titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.fiche-maison__titre::before,
.fiche-maison__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--or) 30%, transparent);
}

/* Une ligne de renseignement : le mot a gauche, la valeur a droite. */
.fiche-ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-1) 0;
}

.fiche-ligne + .fiche-ligne { border-top: 1px solid color-mix(in srgb, var(--or) 10%, transparent); }

.fiche-ligne__mot {
  flex: 1;
  min-width: 0;
  font-size: var(--t-3);
  color: var(--texte-pale);
}

.fiche-ligne__valeur {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  text-align: right;
  color: var(--parchemin);
}

/* Une jauge d'attribut : le mot, le rail, le nombre. */
.fiche-attribut {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--e-2);
  padding: var(--e-1) 0;
}

.fiche-attribut__mot {
  font-size: var(--t-3);
  color: var(--texte-pale);
}

/* Les ecus des maisons avec qui on traite, en file. */
.fiche-ecus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiche-ecus li { display: flex; }

.fiche-ecus .fanion {
  width: 2.1rem;
  height: 2.5rem;
  font-family: var(--police-titre);
  font-size: var(--t-3);
}

.fiche-ecus__vide {
  margin: 0;
  font-size: var(--t-3);
  color: var(--texte-pale);
}


/* ── Les avoirs : les titres en jetons ───────────────────────────────────
   La planche range les titres en petits ecus alignes, pas dans une phrase a
   virgules ou l'on ne compte plus rien. */

#avoirs.fiche-avoirs .maison__titres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-1) 0 var(--e-3);
}

.titre-jeton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
}

.titre-jeton::before {
  content: "";
  width: 0.75rem;
  height: 0.9rem;
  flex: none;
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 60%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

#avoirs.fiche-avoirs .maison__titres--vide {
  display: block;
  color: var(--texte-pale);
}


/* ── Le sang royal ───────────────────────────────────────────────────────
   Le compte des Grandes Maisons soumises est la condition du trone : il
   passe en bandeau, pas en ligne de texte parmi d'autres. */

.trone__sang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border-top: 1px solid color-mix(in srgb, var(--or) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 60%, transparent);
  clip-path: polygon(0.9rem 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0.9rem 100%, 0 50%);
}

.trone__sang::before,
.trone__sang::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  background: var(--or);
  transform: rotate(45deg);
}


/* ── Les pretendants ─────────────────────────────────────────────────────
   La planche les lit comme un classement : un ecu, un nom, une puissance en
   or a droite. La force de chacun etait noyee dans une phrase. */

.pretendant {
  gap: 0;
  padding: 0;
  border-radius: 0;
  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);
  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);
}

.pretendant__entete {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

.pretendant__entete .fanion {
  width: 1.9rem;
  height: 2.3rem;
  font-size: var(--t-3);
  font-family: var(--police-titre);
}

.pretendant .pretendant__nom {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--t-4);
  letter-spacing: 0.04em;
  color: var(--or-vif);
}

.pretendant__puissance {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-variant-numeric: tabular-nums;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}

.pretendant__puissance-mot {
  display: block;
  font-size: var(--t-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
  color: var(--or);
}

/* La carte prend la hauteur de la plus haute des trois, et le corps prend
   toute la place qui reste : sans cela le sceau de la decision se posait a
   une hauteur differente dans chaque carte. */
.pretendants { align-items: stretch; }

.pretendant__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-3);
}

.pretendant .pretendant__ignore {
  padding: var(--e-1) var(--e-2);
  color: var(--perte);
  background: color-mix(in srgb, var(--cire) 28%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--cire-vif) 75%, transparent);
}

/* Le sceau rouge de la decision. Il passe par deux identifiants : la feuille
   des quetes repeint sinon tous les boutons du jeu en or eteint. */
#pretendants .pretendant__marcher {
  align-self: stretch;
  min-height: 2.9rem;
  margin-top: auto;
  padding: var(--e-2) var(--e-5);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.08em;
  color: var(--parchemin-clair);
  text-shadow: var(--ombre-texte);
  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);
}

#pretendants .pretendant__marcher:hover:not(:disabled),
#pretendants .pretendant__marcher:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--cire-vif), var(--peril));
  border-color: var(--or);
}

#pretendants .pretendant__marcher: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);
}

.pretendant .pretendant__etat {
  align-self: flex-start;
  padding: var(--e-1) var(--e-3);
  font-family: var(--police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-pale);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}


/* Le nom de la maison, sous le titre du pretendant. */
.pretendant__maison {
  display: block;
  font-size: var(--t-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--or-fonce);
}

/* L'ecu de la colonne, devant le nom de la maison pour qui elle marche. */
.carte-armee__armes {
  width: 1.7rem;
  height: 2rem;
  object-fit: contain;
  vertical-align: -0.45rem;
  margin-right: var(--e-2);
}


/* En colonne a gauche, le panneau est ferme des quatre cotes : la parure lui
   otait sa bordure du bas, qui ne servait a rien tant qu'il collait a l'ecran. */
@media (min-width: 46rem) {
  .feuillet { border-bottom: 1px solid var(--or-fonce); }
}

.feuillet .feuillet__retour {
  border-color: color-mix(in srgb, var(--or) 40%, transparent);
  border-radius: 0;
  color: var(--or);
}
.feuillet .feuillet__retour:hover, .feuillet .feuillet__retour:focus-visible { border-color: var(--or); color: var(--parchemin-clair); }

.feuillet .sommaire__lien {
  border-color: color-mix(in srgb, var(--or) 18%, transparent);
  border-radius: 0;
  clip-path: polygon(0.45rem 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%, 0 0.45rem);
}
.feuillet .sommaire__lien:hover, .feuillet .sommaire__lien:focus-visible { border-color: color-mix(in srgb, var(--or) 60%, transparent); }
.feuillet .sommaire__note { color: var(--or-fonce); }

/* ── Les noms de la carte du mod ─────────────────────────────────────────
   Posés par-dessus la toile, jamais dans la scène : mille soixante-cinq
   textes en relief coûteraient plus cher que le monde entier. */

/* Glisser la carte surlignait tous les noms en bleu : le navigateur croyait à
   une selection de texte. Un nom de lieu se touche, il ne se copie pas. */
.carte-nom {
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.06em;
  color: var(--parchemin-clair);
  text-shadow: var(--ombre-texte);
  padding-bottom: var(--e-1);
}

.carte-nom--siege {
  font-size: var(--t-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchemin);
}

.carte-nom--chateau {
  font-size: var(--t-1);
  color: var(--parchemin);
}