/* ─────────────────────────────────────────────────────────────────────────
   Le Sang et le Sel — feuille de l'écran.
   Parti pris : pierre, parchemin, cire, fer. Une seule ambiance, sombre,
   éclairée à la bougie. Rien de blanc, rien d'arrondi sans raison.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Encres et supports */
  --pierre:        #12100d;
  --pierre-claire: #1d1a15;
  --parchemin:     #e3d5b3;
  --parchemin-bas: #c9b78d;
  --encre:         #2a2018;
  --encre-pale:    #5c4d3c;

  /* Matières */
  --cuir:          #3a2b1c;
  --cuir-clair:    #55402a;
  --fer:           #7b8189;
  --fer-sombre:    #4a4e54;
  --cire:          #7e1d16;
  --or:            #c39b3e;
  --or-eteint:     #b99545;

  /* Sur pierre */
  --sur-pierre:      #cbbfa6;
  --sur-pierre-pale: #8a8171;

  --serif-titre: 'Palatino Linotype', Palatino, Georgia, serif;
  --serif-corps: Georgia, 'Times New Roman', serif;
  --serif-dit:   Georgia, 'Times New Roman', serif;

  --gouttiere: clamp(0.75rem, 2vw, 1.4rem);
  --rayon: 2px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--serif-corps);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  line-height: 1.5;
  color: var(--sur-pierre);
  background:
    radial-gradient(120% 90% at 50% -10%, #241f18 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 110%, #1a1712 0%, transparent 70%),
    var(--pierre);
  background-attachment: fixed;
}

/* Le grain de la pierre, posé une fois pour toute la page. */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 100;
}

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ── Titres ─────────────────────────────────────────────────────────────── */

.titre-jeu {
  font-family: var(--serif-titre);
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--parchemin);
  text-shadow: 0 2px 0 #000, 0 0 40px rgba(195, 155, 62, 0.18);
  text-wrap: balance;
}

.colonne__titre,
.bloc__titre {
  font-family: var(--serif-titre);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-eteint);
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(195, 155, 62, 0.22);
}

/* ── Création ───────────────────────────────────────────────────────────── */

.creation {
  position: relative;
  isolation: isolate;
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--gouttiere) 5rem;
}

.creation::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 10, 11, 0.52) 0%, rgba(9, 10, 11, 0.22) 43%, rgba(9, 10, 11, 0.48) 100%),
    url("images/accueil-background.jpg") center center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

@media (max-width: 700px) {
  .creation::before {
    background:
      linear-gradient(180deg, rgba(9, 10, 11, 0.42) 0%, rgba(9, 10, 11, 0.2) 48%, rgba(9, 10, 11, 0.58) 100%),
      url("images/accueil-background-mobile.jpg") center top / cover no-repeat;
  }
}

.creation__entete { text-align: center; margin-bottom: 2.5rem; }

.creation__sous {
  font-family: var(--serif-dit);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sur-pierre-pale);
  margin: 0.6rem 0 0;
}

.feuille { display: flex; flex-direction: column; gap: 1.8rem; }

.bloc {
  border: 1px solid rgba(123, 129, 137, 0.18);
  border-top: 1px solid rgba(195, 155, 62, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%), var(--pierre-claire);
  padding: 1.1rem 1.2rem 1.4rem;
}

.bloc__note {
  font-family: var(--serif-dit);
  font-style: italic;
  color: var(--sur-pierre-pale);
  margin: -0.2rem 0 0.9rem;
}

.ligne-champs { display: flex; flex-wrap: wrap; gap: 1rem; }

.champ { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 12rem; }

.champ > span, .champ__intitule {
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}

input, select {
  font: inherit;
  color: var(--encre);
  background: linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  padding: 0.45rem 0.6rem;
  min-width: 0;
}

input::placeholder { color: var(--encre-pale); }

.lore { margin: 0 0 1rem; padding: .85rem; border: 1px solid var(--or-sombre); background: rgba(25, 22, 17, .72); }
.lore__accroche, .lore__details p, .lore__compteur { margin: .45rem 0 0; color: var(--encre-pale); font-style: italic; line-height: 1.45; }
.lore__details { margin-top: .65rem; }
.lore__details summary { color: var(--or-clair); cursor: pointer; }
.lore__compteur { font-size: .78rem; font-style: normal; }
.lore__chapitres { display: grid; gap: .45rem; margin: .75rem 0 0; padding-left: 1.2rem; }
.lore__chapitre { padding-left: .15rem; line-height: 1.35; }
.lore__chapitre-titre { display: inline; color: var(--or-clair); }
.lore__chapitre-statut { margin-left: .4rem; color: var(--rouge-clair); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.lore__chapitre-texte { margin: .15rem 0 0; color: var(--encre-pale); font-size: .82rem; }

.choix-deux { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.choix-deux .champ__intitule { margin-right: 0.3rem; }

.jeton {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.35rem 1rem;
  color: var(--sur-pierre-pale);
  font-family: var(--serif-titre);
  letter-spacing: 0.08em;
  transition: color 120ms, border-color 120ms, background-color 120ms;
}
.jeton[aria-pressed="true"] {
  color: var(--pierre);
  background: linear-gradient(180deg, var(--or), var(--or-eteint));
  border-color: var(--or);
}

.continents { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.onglet-continent {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.3rem 0.2rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--sur-pierre-pale);
}
.onglet-continent.est-actif { color: var(--parchemin); border-bottom-color: var(--cire); }

.cartes-origine { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.7rem; }

.carte-origine, .carte-trait, .carte-apparence {
  text-align: left;
  background: linear-gradient(160deg, rgba(226, 213, 179, 0.06), transparent 70%), #191610;
  border: 1px solid rgba(123, 129, 137, 0.22);
  border-radius: var(--rayon);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 140ms, background-color 140ms, transform 140ms;
}
.carte-origine:hover, .carte-trait:hover, .carte-apparence:hover { border-color: var(--or-eteint); }
.carte-origine[aria-pressed="true"], .carte-trait[aria-pressed="true"], .carte-apparence[aria-pressed="true"] {
  border-color: var(--or);
  background: linear-gradient(160deg, rgba(195, 155, 62, 0.14), transparent 70%), #1d1913;
  box-shadow: inset 0 0 0 1px rgba(195, 155, 62, 0.25);
}

.carte-origine__nom, .carte-trait__nom, .carte-apparence__nom {
  font-family: var(--serif-titre);
  font-size: 1.05rem;
  color: var(--parchemin);
  letter-spacing: 0.04em;
}
.carte-origine__dit, .carte-trait__dit, .carte-apparence__dit {
  font-family: var(--serif-dit);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--sur-pierre-pale);
  line-height: 1.35;
}
.carte-origine__durete { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--cire); }

.cartes-trait { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.cartes-apparence { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }

.competences { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem 1.2rem; }

.competence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.25rem 0;
  border-bottom: 1px dotted rgba(123, 129, 137, 0.2);
}
.competence__nom { font-family: var(--serif-corps); }
.competence__reglage { display: flex; align-items: center; gap: 0.5rem; }
.competence__valeur { font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: center; color: var(--parchemin); }

.pas {
  width: 1.7rem; height: 1.7rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--fer-sombre);
  color: var(--sur-pierre);
  border-radius: var(--rayon);
}
.pas:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.pas:disabled { opacity: 0.3; cursor: not-allowed; }

.sceau {
  align-self: center;
  margin-top: 0.5rem;
  padding: 0.7rem 3rem;
  font-family: var(--serif-titre);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f0e5cd;
  background: radial-gradient(120% 140% at 50% 0%, #a02a20, var(--cire) 60%, #5c130e);
  border: 1px solid #4a0f0b;
  border-radius: var(--rayon);
  box-shadow: 0 2px 0 #3b0c09, 0 8px 24px rgba(126, 29, 22, 0.35);
}
.sceau:hover { filter: brightness(1.12); }
.sceau:active { transform: translateY(1px); box-shadow: 0 1px 0 #3b0c09; }

.creation__reprendre { text-align: center; color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; }
.lien { background: none; border: 0; padding: 0; color: var(--or); text-decoration: underline; text-underline-offset: 3px; font-family: inherit; font-style: inherit; }

/* ── Le jeu ─────────────────────────────────────────────────────────────── */

.bandeau {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem var(--gouttiere);
  border-bottom: 1px solid rgba(195, 155, 62, 0.2);
  background: linear-gradient(180deg, #1a1611, #12100d);
}
.bandeau__jour, .bandeau__rang {
  font-family: var(--serif-titre);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}
.bandeau__rang { text-align: right; color: var(--or); }
.bandeau__nom {
  margin: 0;
  font-family: var(--serif-titre);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--parchemin);
  white-space: nowrap;
}

.colonnes {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--gouttiere);
  align-items: start;
  padding: var(--gouttiere);
  max-width: 90rem;
  margin: 0 auto;
}

.colonne { min-width: 0; }
.colonne--personnage, .colonne--domaine { display: flex; flex-direction: column; gap: 1.4rem; }

/* Portrait */
.portrait { margin: 0; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--cuir-clair);
  box-shadow: 0 0 0 4px #14110d, 0 0 0 5px rgba(195, 155, 62, 0.25), 0 18px 40px rgba(0, 0, 0, 0.6);
  filter: saturate(0.85) contrast(1.05);
}
.portrait figcaption {
  margin-top: 0.7rem;
  font-family: var(--serif-dit);
  font-style: italic;
  color: var(--sur-pierre-pale);
  text-align: center;
  line-height: 1.35;
}

.jauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0; }
.jauge { text-align: center; border: 1px solid rgba(123, 129, 137, 0.2); padding: 0.4rem 0.2rem; }
.jauge--experience { grid-column: 1 / -1; text-align: left; position: relative; }
.jauge--experience .jauge__remplissage { display: block; width: 0%; height: 0.24rem; margin-top: 0.35rem; background: var(--or); transition: width 0.5s ease; }
.jauge dt {
  font-family: var(--serif-titre);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}
.jauge dd { margin: 0.15rem 0 0; font-size: 1.25rem; color: var(--parchemin); font-variant-numeric: tabular-nums; }

.mestre-guide {
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--or-eteint);
  border-left: 3px solid var(--or);
  background: linear-gradient(115deg, rgba(83, 61, 26, 0.28), rgba(22, 18, 13, 0.72));
}

.priorites { margin: 0 0 1.1rem; padding: .7rem .8rem; border: 1px solid rgba(180, 142, 55, .65); background: rgba(22, 18, 13, .55); }
.priorites__note { margin: .25rem 0 .55rem; color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; }
#priorites-liste { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.priorite { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; padding: .45rem .5rem; border-left: 2px solid var(--or-eteint); background: rgba(8, 9, 10, .24); }
.priorite--urgent { border-left-color: #a94332; }
.priorite__marque { color: var(--or); font: 1.1rem var(--serif-titre); }
.priorite--urgent .priorite__marque { color: #db7658; }
.priorite__corps { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; align-items: baseline; }
.priorite__titre { color: var(--parchemin); }
.priorite__dit { grid-column: 1 / -1; color: var(--sur-pierre-pale); font: .92rem/1.35 var(--serif-dit); }
.priorite__ouvrir { min-height: 40px; padding: .3rem .5rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); font: inherit; cursor: pointer; }
.priorite__ouvrir:hover, .priorite__ouvrir:focus-visible { filter: brightness(1.08); }
.priorite--vide { color: var(--sur-pierre-pale); font-family: var(--serif-dit); }

.lien-evitement {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  color: var(--pierre);
  background: var(--or);
  border-radius: var(--rayon);
  transform: translateY(-180%);
  transition: transform 120ms ease;
}
.lien-evitement:focus { transform: translateY(0); }
.mestre-guide__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.objectifs { margin: 0 0 1.1rem; }
#objectifs-liste { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
.objectif { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem 0.6rem; align-items: baseline; padding: 0.55rem 0.65rem; border: 1px solid rgba(123, 129, 137, 0.22); background: rgba(22, 18, 13, 0.45); }
.objectif__genre { grid-column: 1 / -1; color: var(--or); font: 0.68rem var(--serif-titre); letter-spacing: 0.1em; text-transform: uppercase; }
.objectif__titre { color: var(--parchemin); font-weight: 400; }
.objectif__progression { color: var(--sur-pierre-pale); font-variant-numeric: tabular-nums; }
.objectif__statut { grid-column: 2 / -1; color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; }
.objectif.est-atteint { border-color: var(--or-eteint); }
.objectif.est-reclame { opacity: 0.62; }
.objectif__reclamer { grid-column: 1 / -1; min-height: 44px; padding: 0.45rem 0.65rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); cursor: pointer; }
.campagne { margin: 0 0 1.1rem; }
.hauts-faits { margin: 0 0 1.1rem; }
.defis { margin: 0 0 1.1rem; }
.evenements-mondiaux { margin: 0 0 1.1rem; }
.evenement-mondial { margin: 0 0 .65rem; padding: .65rem; border: 1px solid rgba(180, 142, 55, .55); background: rgba(22, 18, 13, .44); }
.evenement-mondial__texte { margin: .35rem 0 .55rem; color: var(--sur-pierre-pale); }
.evenement-mondial__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.evenement-mondial__choix { min-height: 44px; padding: .4rem .55rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); cursor: pointer; }
.evenement-mondial__choix:hover, .evenement-mondial__choix:focus-visible { filter: brightness(1.08); }
.fin-campagne { margin: 0 0 1.1rem; padding: .8rem .9rem; border: 1px solid var(--or); background: linear-gradient(115deg, rgba(83, 61, 26, .32), rgba(22, 18, 13, .72)); }
.fin-campagne p { margin: .45rem 0 0; color: var(--sur-pierre-pale); }
.fin-campagne__suite { display: grid; gap: .35rem; margin-top: .8rem; max-width: 30rem; }
.fin-campagne__suite input { min-height: 40px; padding: .35rem .5rem; color: var(--pierre); background: var(--parchemin); border: 1px solid var(--or-eteint); border-radius: var(--rayon); font: inherit; }
.fin-campagne__suite button { min-height: 44px; padding: .4rem .65rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); font: inherit; cursor: pointer; }
.reglages__danger { min-height: 44px; margin-top: .5rem; padding: .4rem .65rem; color: #fff4ed; background: #6f251d; border: 1px solid #b54a3b; border-radius: var(--rayon); font: inherit; cursor: pointer; }
.maisonnee__crises { display: grid; gap: .45rem; margin: .4rem 0 .8rem; padding: 0; list-style: none; }
.crise-dynastique { padding: .55rem; border: 1px solid rgba(143, 51, 37, .7); background: rgba(80, 30, 20, .2); }
.crise-dynastique__texte { margin: 0 0 .4rem; color: var(--sur-pierre-pale); }
.crise-dynastique__actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.crise-dynastique__choix { min-height: 42px; padding: .35rem .5rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); cursor: pointer; }
.maisonnee__guerres { display: grid; gap: .45rem; margin: .4rem 0 .8rem; padding: 0; list-style: none; }
.guerre-civile { padding: .55rem; border: 1px solid rgba(143, 51, 37, .7); background: rgba(80, 30, 20, .2); }
.guerre-civile__texte { margin: 0 0 .4rem; color: var(--sur-pierre-pale); }
.guerre-civile__actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.guerre-civile__action { min-height: 42px; padding: .35rem .5rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); cursor: pointer; }
.campagne__arc { margin: 0 0 0.65rem; padding: 0.55rem 0.65rem; border: 1px solid rgba(123, 129, 137, 0.22); background: rgba(22, 18, 13, 0.38); }
.campagne__titre { margin: 0 0 0.35rem; color: var(--or); font-family: var(--serif-titre); }
.campagne__jalons { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.campagne__jalon { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem; align-items: center; color: var(--sur-pierre); }
.campagne__reclamer { min-height: 40px; padding: 0.3rem 0.5rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); cursor: pointer; }
.mestre-guide__titre { margin: 0; color: var(--or); font-family: var(--serif-titre); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.mestre-guide__fermer { padding: 0.15rem 0.35rem; color: var(--sur-pierre-pale); background: transparent; border: 0; font: inherit; cursor: pointer; }
.mestre-guide__fermer:hover { color: var(--parchemin); }
.mestre-guide__intro { margin: 0.35rem 0 0; color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; }
.mestre-guide__etapes { margin: 0.45rem 0 0; padding-left: 1.25rem; color: var(--sur-pierre); }
.mestre-guide__etapes li { padding: 0.16rem 0; }
.mestre-guide__action { min-height: 44px; margin-top: 0.7rem; padding: 0.45rem 0.7rem; color: var(--pierre); background: var(--or); border: 1px solid var(--or-eteint); border-radius: var(--rayon); font: inherit; cursor: pointer; }
.mestre-guide__action:hover, .mestre-guide__action:focus-visible { filter: brightness(1.08); }
.vente__prix { margin: 0.35rem 0 0; color: var(--sur-pierre-pale); font-variant-numeric: tabular-nums; }
.guerre__rounds { display: grid; gap: 0.35rem; margin: 0.7rem 0; padding: 0.55rem 0.65rem; border: 1px solid rgba(123, 129, 137, 0.35); }
.guerre__rounds legend { padding: 0 0.25rem; color: var(--or); font-family: var(--serif-titre); }
.guerre__rounds label { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.guerre__rounds select { min-height: 40px; max-width: 12rem; }

/* La montée */
.montee-cible { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.05em; }
.conditions { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.condition { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.95rem; }
.condition__marque { color: var(--fer-sombre); flex: 0 0 auto; }
.condition.est-atteinte .condition__marque { color: var(--or); }
.condition__dit { color: var(--sur-pierre-pale); }
.condition.est-atteinte .condition__dit { color: var(--sur-pierre); }
.condition__chiffre { font-variant-numeric: tabular-nums; color: var(--sur-pierre-pale); }

.bouton-monter {
  margin-top: 0.8rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pierre);
  background: linear-gradient(180deg, var(--or), var(--or-eteint));
  border: 1px solid #6d5520;
  border-radius: var(--rayon);
}
.bouton-monter:disabled { opacity: 0.35; cursor: not-allowed; }

.traits-tenus ul, ul#traits-tenus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
#traits-tenus li {
  border: 1px solid var(--cuir-clair);
  padding: 0.15rem 0.6rem;
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--parchemin);
}

/* ── Les affaires du jour : des feuilles de parchemin ───────────────────── */

.affaire {
  position: relative;
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(175deg, var(--parchemin) 0%, var(--parchemin-bas) 100%);
  color: var(--encre);
  padding: 1.5rem 1.6rem 1.3rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(120, 90, 45, 0.18);
  clip-path: polygon(
    0% 1.1%, 6% 0.2%, 14% 1.3%, 23% 0.1%, 34% 1.2%, 46% 0.2%, 58% 1.3%, 70% 0.3%, 82% 1.2%, 92% 0.2%, 100% 1.1%,
    100% 99%, 91% 99.9%, 80% 98.8%, 68% 99.9%, 55% 98.8%, 43% 99.8%, 30% 98.7%, 18% 99.8%, 8% 98.9%, 0% 99.7%
  );
}

.affaire__titre {
  font-family: var(--serif-titre);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
  color: #1d1610;
  padding-right: 3.5rem;
}

.affaire__texte {
  margin: 0 0 1.1rem;
  font-size: 1.06rem;
  line-height: 1.62;
  color: #33281d;
  max-width: 62ch;
}

.affaire__choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.choix {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: rgba(42, 32, 24, 0.05);
  border: 1px solid rgba(58, 43, 28, 0.35);
  border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 0.55rem 0.8rem;
  color: var(--encre);
  transition: background-color 120ms, border-left-color 120ms, transform 120ms;
}
.choix:hover:not(:disabled) { background: rgba(126, 29, 22, 0.1); border-color: rgba(126, 29, 22, 0.5); transform: translateX(2px); }
.choix:disabled { opacity: 0.45; cursor: not-allowed; }
.choix__cout { font-variant-numeric: tabular-nums; font-size: 0.88rem; color: #6b4a1e; white-space: nowrap; }
.choix.est-impossible .choix__cout { color: var(--cire); }

.affaire.est-tranchee { filter: saturate(0.6) brightness(0.92); }
.affaire__verdict {
  font-family: var(--serif-dit);
  font-style: italic;
  color: #5b4023;
  border-top: 1px solid rgba(58, 43, 28, 0.25);
  padding-top: 0.6rem;
  margin: 0.8rem 0 0;
}

/* Le sceau de cire, coin haut droit */
.affaire__sceau {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 35% 30%, #a5301f, var(--cire) 55%, #4e100c);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  font-family: var(--serif-titre);
  font-size: 1.1rem;
  color: rgba(255, 235, 210, 0.75);
}

.rien-a-trancher {
  font-family: var(--serif-dit);
  font-style: italic;
  color: var(--sur-pierre-pale);
  border: 1px dashed rgba(123, 129, 137, 0.28);
  padding: 1.4rem;
  text-align: center;
}

/* ── Chronique ──────────────────────────────────────────────────────────── */

.chronique { margin-top: 2rem; }
.chronique__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; margin: 0.6rem 0 0.8rem; font-family: var(--serif-dit); color: var(--sur-pierre-pale); }
.chronique__outils select, .chronique__outils button { min-height: 44px; padding: 0.45rem 0.65rem; color: var(--parchemin); background: var(--pierre-claire); border: 1px solid var(--cuir-clair); border-radius: var(--rayon); }
.chronique__outils button { color: var(--or); cursor: pointer; }
.chronique__outils button:hover, .chronique__outils select:focus { border-color: var(--or); }
#chronique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
#chronique li { display: flex; gap: 0.8rem; align-items: baseline; font-family: var(--serif-dit); }
#chronique .jour {
  flex: 0 0 4.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--or-eteint);
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}
#chronique .dit { color: var(--sur-pierre-pale); }

/* ── Domaine ────────────────────────────────────────────────────────────── */

.ressources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ressource {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0.1rem;
  border-bottom: 1px dotted rgba(123, 129, 137, 0.2);
}
.ressource__nom { font-family: var(--serif-titre); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sur-pierre-pale); }
.ressource__stock { font-variant-numeric: tabular-nums; color: var(--parchemin); font-size: 1.05rem; }
.ressource__debit { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--or-eteint); min-width: 4.5rem; text-align: right; }
.ressource__debit.est-negatif { color: #b8503f; }

.chantier {
  border: 1px solid var(--or-eteint);
  background: linear-gradient(180deg, rgba(195, 155, 62, 0.1), transparent);
  padding: 0.6rem 0.7rem;
}
.chantier__quoi { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.chantier__reste { font-variant-numeric: tabular-nums; color: var(--or); }
.provinces { margin-top: 1rem; }
.provinces > p { margin-bottom: .6rem; }
#provinces-liste { display: grid; gap: .65rem; padding: 0; list-style: none; }
.province { display: grid; gap: .35rem; padding: .65rem; border: 1px solid var(--ligne); background: rgba(0, 0, 0, .12); }
.province__nom { color: var(--or-pale); }
.province__etat { color: var(--texte-doux); font-size: .9rem; }
.parent__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.fief__memoire { margin: .45rem 0; color: var(--texte-doux); }
.fief__memoire summary { cursor: pointer; color: var(--or-pale); }
.fief__memoire-liste { margin: .35rem 0 0 1.2rem; padding: 0; }
.chantier__barre { height: 3px; background: var(--fer-sombre); margin-top: 0.5rem; }
.chantier__barre span { display: block; height: 100%; background: var(--or); }

.batiments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }

.batiment {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.8rem;
  align-items: center;
  border: 1px solid rgba(123, 129, 137, 0.18);
  padding: 0.5rem 0.6rem;
  background: #171410;
}
.batiment.est-fermee { opacity: 0.45; }
.batiment__nom { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.batiment__niveau { font-variant-numeric: tabular-nums; color: var(--or-eteint); font-size: 0.85rem; }
.batiment__dit { grid-column: 1 / -1; font-family: var(--serif-dit); font-style: italic; font-size: 0.9rem; color: var(--sur-pierre-pale); line-height: 1.3; }
.batiment__cout { grid-column: 1 / -1; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--sur-pierre-pale); }
.batiment__cout .manque { color: #b8503f; }

.batir {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0.25rem 0.9rem;
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  color: var(--sur-pierre);
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.batir:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.batir:disabled { opacity: 0.4; cursor: not-allowed; }

.colporteur__dit { font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); margin: 0 0 0.6rem; line-height: 1.35; }
.vente { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.vente select { flex: 1 1 7rem; }
.vente input { width: 5.5rem; }
.vente button {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.35rem 0.9rem;
  color: var(--sur-pierre);
  font-family: var(--serif-titre);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.vente button:hover { border-color: var(--or); color: var(--or); }

/* ── Refus ──────────────────────────────────────────────────────────────── */

.refus {
  color: #e9b4a8;
  background: rgba(126, 29, 22, 0.18);
  border: 1px solid rgba(126, 29, 22, 0.55);
  padding: 0.5rem 0.8rem;
  margin: 0.8rem 0 0;
}
.refus--flottant {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(30rem, calc(100vw - 2rem));
  background: #2a120f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ── Reprise ────────────────────────────────────────────────────────────── */

dialog {
  border: 1px solid var(--cuir-clair);
  background: var(--pierre-claire);
  color: var(--sur-pierre);
  padding: 1.5rem;
  max-width: 26rem;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
.reprise h2 { font-family: var(--serif-titre); font-weight: 400; margin: 0 0 1rem; color: var(--parchemin); }
.reprise label { display: flex; flex-direction: column; gap: 0.3rem; }
.reprise menu { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0; margin: 1.2rem 0 0; }
.reprise menu button {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.35rem 1rem;
  color: var(--sur-pierre);
}
.reprise menu button:hover { border-color: var(--or); color: var(--or); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */

.onglets-mobile { display: none; }

@media (max-width: 60rem) {
  .colonnes { grid-template-columns: 1fr; padding-bottom: 5rem; }
  .colonne { display: none; }
  .colonne.est-visible { display: flex; flex-direction: column; gap: 1.4rem; }

  .onglets-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: linear-gradient(180deg, #1a1611, #0e0c0a);
    border-top: 1px solid rgba(195, 155, 62, 0.25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .onglets-mobile button {
    background: none;
    border: 0;
    border-top: 2px solid transparent;
    padding: 0.85rem 0.3rem;
    font-family: var(--serif-titre);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sur-pierre-pale);
  }
  .onglets-mobile button.est-actif { color: var(--or); border-top-color: var(--cire); }

  .bandeau { grid-template-columns: auto 1fr; row-gap: 0.2rem; }
  .bandeau__nom { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .bandeau__rang { text-align: right; }

  .portrait img { max-width: 15rem; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

.visuellement-cache {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mouvement-reduit *, .mouvement-reduit *::before, .mouvement-reduit *::after {
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
  scroll-behavior: auto !important;
}

:root[data-taille-texte="grand"] { font-size: 112%; }
:root[data-taille-texte="tres-grand"] { font-size: 125%; }
.contraste-renforce {
  --sur-pierre: #f1e9d4;
  --sur-pierre-pale: #d6c9ad;
  --or: #f0c95c;
  --or-eteint: #e0ba55;
}

/* ── La vue du domaine ──────────────────────────────────────────────────── */

.domaine-vue { margin: 0 0 0.4rem; }
.domaine-vue img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--cuir-clair);
  box-shadow: 0 0 0 3px #14110d, 0 12px 28px rgba(0, 0, 0, 0.55);
  filter: saturate(0.85) contrast(1.05);
}
.domaine-vue figcaption {
  margin-top: 0.5rem;
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-eteint);
  text-align: center;
}


/* ── Le Rôle et la boutique ─────────────────────────────────────────────── */

.bandeau__lien {
  background: none;
  border: 0;
  padding: 0 0 0 1rem;
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
  border-bottom: 1px solid transparent;
}
.bandeau__lien:hover { color: var(--or); border-bottom-color: var(--or-eteint); }

.etat-reseau {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid #a56b38;
  background: rgba(94, 45, 22, 0.25);
  color: #f0c98b;
  text-align: center;
  font-size: 0.85rem;
}

.grand-dialogue {
  width: min(56rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100dvh - 3rem));
  overflow: auto;
  padding: 0;
  border: 1px solid var(--cuir-clair);
  background: var(--pierre-claire);
  color: var(--sur-pierre);
}
.dialogue__entete {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding: 1.1rem 1.3rem 0.9rem;
  background: linear-gradient(180deg, #1f1b15, var(--pierre-claire));
  border-bottom: 1px solid rgba(195, 155, 62, 0.25);
}
.dialogue__titre {
  margin: 0;
  font-family: var(--serif-titre);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--parchemin);
}
.dialogue__note { grid-column: 1; margin: 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); }
.dialogue__fermer {
  grid-row: 1 / span 2;
  align-self: start;
  background: none;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  width: 2rem; height: 2rem;
  color: var(--sur-pierre-pale);
  line-height: 1;
}
.dialogue__fermer:hover { border-color: var(--cire); color: #e9b4a8; }

.petit-dialogue { width: min(32rem, calc(100vw - 2rem)); }
.reglages { display: grid; gap: 1.2rem; }
.reglages fieldset { display: grid; gap: .65rem; margin: 0; border: 1px solid rgba(123, 129, 137, .25); padding: .8rem; }
.reglages legend { color: var(--or-eteint); font-family: var(--serif-titre); letter-spacing: .12em; text-transform: uppercase; }
.reglages__ligne { display: grid; grid-template-columns: 1fr minmax(8rem, 12rem); align-items: center; gap: 1rem; }
.reglages__ligne--colonne { grid-template-columns: 1fr; align-items: stretch; }
.reglages__ligne textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: .55rem; color: var(--encre); background: var(--parchemin); border: 1px solid var(--cuir-clair); }
.reglages__ligne input[type="checkbox"] { justify-self: start; width: 1.2rem; height: 1.2rem; accent-color: var(--or); }
.reglages__ligne input[type="range"] { width: 100%; accent-color: var(--or); }
.reglages__note { margin: 0; color: var(--sur-pierre-pale); font-style: italic; }
.reglages__confidentialite { border-top: 1px solid var(--bordure); padding-top: .7rem; }
.reglages__confidentialite summary { cursor: pointer; color: var(--or-clair); font-weight: 700; }
.reglages__confidentialite[open] { display: grid; gap: .55rem; }

.role__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; padding: 1rem 1.3rem; }
.role__etat { font-family: var(--serif-titre); letter-spacing: 0.06em; color: var(--parchemin); }
.role__jauge { flex: 1 1 12rem; height: 4px; background: var(--fer-sombre); }
.role__jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--or-eteint), var(--or)); }
.role__actions { display: flex; gap: 0.5rem; }
.role__actions button {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.35rem 1rem;
  color: var(--sur-pierre);
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.role__actions button:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.role__actions button:disabled { opacity: 0.35; cursor: not-allowed; }

.role__liste { list-style: none; margin: 0; padding: 0 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.echelon {
  display: grid;
  grid-template-columns: 3.4rem 1fr 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(123, 129, 137, 0.16);
  background: #17140f;
}
.echelon.est-atteint { border-color: rgba(195, 155, 62, 0.35); background: #1c1811; }
.echelon__numero { font-family: var(--serif-titre); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--sur-pierre-pale); }
.echelon.est-atteint .echelon__numero { color: var(--or); }
.echelon__don { font-size: 0.92rem; color: var(--sur-pierre); }
.echelon__don.est-vide { color: var(--fer-sombre); }
.echelon__don.est-scelle { color: var(--sur-pierre-pale); }
.echelon__don .recu { color: var(--or-eteint); }
.echelon__colonne {
  display: block;
  font-family: var(--serif-titre);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}

.rayon { padding: 0 1.3rem 1.2rem; }
.rayon__titre {
  font-family: var(--serif-titre);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-eteint);
  margin: 1rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(195, 155, 62, 0.2);
}
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.article {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid rgba(123, 129, 137, 0.2);
  background: linear-gradient(160deg, rgba(226, 213, 179, 0.05), transparent 70%), #191610;
  padding: 0.7rem 0.85rem;
}
.article__nom { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.article__rarete { font-family: var(--serif-titre); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; }
.article__rarete.est-legendaire { color: var(--or); }
.article__rarete.est-epique { color: #b06be0; }
.article__rarete.est-rare { color: #6ba3e0; }
.article__rarete.est-commun { color: var(--sur-pierre-pale); }
.article__detail { font-size: 0.88rem; color: var(--sur-pierre-pale); font-variant-numeric: tabular-nums; }
.article__prix { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
.article__prix button {
  flex: 1 1 auto;
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.3rem 0.6rem;
  color: var(--sur-pierre);
  font-family: var(--serif-corps);
  font-variant-numeric: tabular-nums;
}
.article__prix button:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.article__prix button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── La bête ────────────────────────────────────────────────────────────── */

.bete__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.bete__ligne > span:first-child { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.bete__rarete { font-family: var(--serif-titre); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }
.jauges--bete { margin-top: 0.6rem; }
.bete__mange { margin: 0.6rem 0 0; font-family: var(--serif-dit); font-style: italic; color: #d09a86; }
.bete__monture { margin: 0.45rem 0 0; color: var(--or); font-size: 0.82rem; line-height: 1.35; }
.bete__monture.est-ferme { color: #b9a99a; }
.bete__capacites { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bete__capacites li {
  border: 1px solid var(--cuir-clair);
  padding: 0.1rem 0.5rem;
  font-family: var(--serif-titre);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--sur-pierre-pale);
}

@media (max-width: 60rem) {
  .bandeau__lien { padding-left: 0.7rem; font-size: 0.7rem; }
  /* Le troisième élément du bandeau contenait tous les onglets sur une seule
     ligne : sur téléphone il élargissait la page à la largeur de ses textes.
     Les liens peuvent se répartir dans leur cellule sans créer de défilement
     horizontal. */
  .bandeau__rang { min-width: 0; flex-wrap: wrap; justify-content: flex-start; gap: 0.45rem 0.85rem; }
  .bandeau__lien {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .echelon { grid-template-columns: 2.6rem 1fr; }
  .echelon__don:last-child { grid-column: 2; }
}

/* Corrections après passage à l'écran. */

/* Le dialogue générique plafonnait à 26rem et écrasait les grands panneaux. */
.grand-dialogue { max-width: none; }

/* La croix était placée en colonne 1 par le placement automatique. */
.dialogue__fermer { grid-column: 2; }

/* Le rang collait aux liens du bandeau. */
.bandeau__rang { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.5rem 1.4rem; }
.bandeau__lien { padding: 0; }
#rang-affiche { color: var(--or); }

/* Le sous-titre du Rôle tenait sur deux lignes pour rien. */
.dialogue__note { white-space: nowrap; }
@media (max-width: 40rem) { .dialogue__note { white-space: normal; } }


/* ── La maison ──────────────────────────────────────────────────────────── */

.bandeau__blason { display: inline-block; vertical-align: -0.35em; margin-right: 0.5rem; }
.bandeau__blason svg { display: block; }

.maison__corps { display: flex; gap: 0.9rem; align-items: flex-start; }
.maison__nom { margin: 0; font-family: var(--serif-titre); font-size: 1.05rem; color: var(--parchemin); letter-spacing: 0.04em; }
.maison__devise { margin: 0.25rem 0 0; font-family: var(--serif-dit); font-style: italic; color: var(--or-eteint); }
.maison__terres { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--sur-pierre-pale); }

.bouton-fonder {
  margin-top: 0.8rem;
  width: 100%;
  padding: 0.55rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #f0e5cd;
  background: radial-gradient(120% 140% at 50% 0%, #a02a20, var(--cire) 60%, #5c130e);
  border: 1px solid #4a0f0b;
  border-radius: var(--rayon);
}
.bouton-fonder:hover { filter: brightness(1.12); }

.fondation { display: grid; grid-template-columns: 1fr 16rem; gap: 1.4rem; padding: 1.2rem 1.3rem 1.4rem; }
.fondation__champs { display: flex; flex-direction: column; gap: 0.9rem; }
.fondation__regle { margin: 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); font-size: 0.9rem; }
.fondation__apercu { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fondation__apercu > div:first-child { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); }
.fondation__nom { margin: 0.6rem 0 0; font-family: var(--serif-titre); font-size: 1.2rem; color: var(--parchemin); letter-spacing: 0.05em; text-align: center; }
.fondation__devise { margin: 0; font-family: var(--serif-dit); font-style: italic; color: var(--or-eteint); text-align: center; text-wrap: balance; }

.jetons { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.jetons button {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.2rem 0.7rem;
  color: var(--sur-pierre-pale);
  font-family: var(--serif-titre);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.jetons button[aria-pressed="true"] { color: var(--pierre); background: linear-gradient(180deg, var(--or), var(--or-eteint)); border-color: var(--or); }

.emaux { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.emaux button {
  width: 2rem; height: 2rem;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0;
}
.emaux button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--or); border-color: var(--or); }
.emaux button.est-impossible { opacity: 0.25; cursor: not-allowed; }

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

/* Les champs de la fondation s'étiraient sur toute la colonne. */
.fondation__champs .champ { flex: 0 0 auto; }
.fondation__champs input { max-width: 26rem; }


/* ── La guerre ──────────────────────────────────────────────────────────── */

.armee__effectif { margin: 0; font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.armee__rangs { list-style: none; margin: 0.45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.armee__rangs li { font-size: 0.9rem; color: var(--sur-pierre); font-variant-numeric: tabular-nums; }
.armee__entretien { margin: 0.5rem 0 0; font-family: var(--serif-dit); font-style: italic; color: #c9a37e; font-size: 0.9rem; }
.armee__terres { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--sur-pierre-pale); }

.guerre { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding: 0.4rem 1.3rem 1.4rem; align-items: start; }
.guerre__titre {
  margin: 0 0 0.7rem;
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
  border-bottom: 1px solid var(--cuir);
  padding-bottom: 0.35rem;
}
.guerre__compte { margin: 0; font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.guerre__entretien { margin: 0.3rem 0 0.9rem; font-family: var(--serif-dit); font-style: italic; color: #c9a37e; }

.guerre__issue {
  margin: 0 1.3rem 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  font-family: var(--serif-dit);
  font-style: italic;
  color: var(--parchemin);
  background: #191510;
}
.guerre__issue.est-gagnee { border-color: var(--or-eteint); }
.guerre__issue.est-perdue { border-color: #6d2019; color: #e0b3a9; }
.guerre__posture { display: grid; gap: 0.3rem; margin: 0.65rem 0 0.25rem; color: var(--sur-pierre-pale); font-family: var(--serif-dit); }
.guerre__posture select { width: 100%; padding: 0.35rem 0.45rem; color: var(--parchemin); background: #17130f; border: 1px solid var(--fer-sombre); border-radius: var(--rayon); font: inherit; }
.guerre__posture-dit { min-height: 1.2em; margin: 0 0 0.55rem; color: var(--or-eteint); font-family: var(--serif-dit); font-style: italic; }

.guerre-duel {
  margin: 0 1.3rem 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cuir-clair);
  background: #100d0a;
  overflow: hidden;
}
.guerre-duel.est-gagnee { border-color: var(--or-eteint); }
.guerre-duel.est-perdue { border-color: #6d2019; }
.guerre-duel__titre, .guerre-duel__phase { margin: 0; text-align: center; color: var(--parchemin); font-family: var(--serif-dit); }
.guerre-duel__titre { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.guerre-duel__atout { margin: 0.3rem 0 0; text-align: center; color: #d4a94f; font-size: 0.82rem; }
.guerre-duel__phase { margin-top: 0.55rem; color: var(--or); font-style: italic; }
.guerre-duel__champ { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.7rem; margin-top: 0.7rem; }
.guerre-duel__camp { display: grid; gap: 0.25rem; min-width: 0; }
.guerre-duel__camp--eux { text-align: right; }
.guerre-duel__nom { overflow: hidden; color: var(--sur-pierre); text-overflow: ellipsis; white-space: nowrap; }
.guerre-duel__barre { display: block; height: 0.45rem; background: linear-gradient(90deg, var(--or), #705820); transform-origin: left; transform: scaleX(var(--force)); transition: transform 1.1s cubic-bezier(.2,.75,.25,1); }
.guerre-duel__camp--eux .guerre-duel__barre { justify-self: end; background: linear-gradient(90deg, #6d2019, #b45b42); transform-origin: right; }
.guerre-duel__pertes { color: var(--sur-pierre-pale); font-size: 0.8rem; }
.guerre-duel__contre { color: var(--or); font-size: 1.25rem; }
.guerre-duel.est-au-choc .guerre-duel__contre { animation: choc 0.22s 3; }
@keyframes choc { 50% { transform: scale(1.35) rotate(-8deg); color: #d86d4e; } }
@media (prefers-reduced-motion: reduce) { .guerre-duel__barre, .guerre-duel.est-au-choc .guerre-duel__contre { animation: none; transition: none; } }
.guerre-ordres { display: grid; gap: 0.65rem; margin-top: 0.8rem; padding: 0.8rem; border: 1px solid rgba(195, 155, 62, 0.4); background: rgba(22, 18, 13, 0.72); }
.guerre-ordres__titre, .guerre-ordres__consigne { margin: 0; text-align: center; }
.guerre-ordres__titre { color: var(--parchemin); font-family: var(--serif-titre); }
.guerre-ordres__consigne { color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; }
.guerre-ordres__choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.guerre-ordres__choix button, .guerre-ordres__annuler { min-height: 44px; padding: 0.5rem; border: 1px solid var(--fer-sombre); background: rgba(195, 155, 62, 0.08); color: var(--parchemin); font: inherit; cursor: pointer; }
.guerre-ordres__choix button:hover, .guerre-ordres__choix button:focus-visible { border-color: var(--or); background: rgba(195, 155, 62, 0.2); }
.guerre-ordres__annuler { justify-self: center; }

.guerre__troupes, .guerre__fiefs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}

.troupe, .fief {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #17130f;
  padding: 0.7rem 0.9rem;
}
.troupe__tete, .fief__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.troupe__nom, .fief__nom { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.troupe__avoir { font-variant-numeric: tabular-nums; color: var(--or); font-family: var(--serif-titre); }
.fief__maison { font-family: var(--serif-dit); font-style: italic; font-size: 0.85rem; color: var(--sur-pierre-pale); }

.troupe__dit { margin: 0.3rem 0 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); font-size: 0.92rem; }
.troupe__chiffres, .fief__etat, .fief__revenu {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--sur-pierre);
  font-variant-numeric: tabular-nums;
}
.fief__revenu { color: var(--or-eteint); }

.troupe__actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.troupe__actions input {
  width: 4.5rem;
  background: var(--pierre);
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.25rem 0.4rem;
  color: var(--parchemin);
  font-family: var(--serif-corps);
  font-variant-numeric: tabular-nums;
}
.troupe__actions button {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  padding: 0.25rem 0.8rem;
  color: var(--sur-pierre);
  font-family: var(--serif-titre);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.troupe__actions button:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.troupe__actions button.est-discret { color: var(--sur-pierre-pale); }
.troupe__actions button.est-discret:hover { border-color: #6d2019; color: #e0b3a9; }

.fief__chances { height: 3px; margin-top: 0.6rem; background: var(--fer-sombre); }
.fief__part { display: block; height: 100%; background: linear-gradient(90deg, var(--cire), var(--or)); }
.fief__pronostic { margin: 0.3rem 0 0; font-family: var(--serif-titre); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--sur-pierre-pale); }

.fief__marcher {
  margin-top: 0.7rem;
  width: 100%;
  padding: 0.45rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #f0e5cd;
  background: radial-gradient(120% 140% at 50% 0%, #a02a20, var(--cire) 60%, #5c130e);
  border: 1px solid #4a0f0b;
  border-radius: var(--rayon);
}
.fief__marcher:hover:not(:disabled) { filter: brightness(1.12); }
.fief__marcher:disabled { background: none; border-color: var(--fer-sombre); color: var(--sur-pierre-pale); cursor: not-allowed; }
.fief__parlementer {
  margin-top: 0.7rem;
  width: 100%;
  padding: 0.45rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--parchemin);
  background: linear-gradient(180deg, #4b3b25, #2d2419);
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
}
.fief__parlementer:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.fief__parlementer:disabled { background: none; border-color: var(--fer-sombre); color: var(--sur-pierre-pale); cursor: not-allowed; }

.fief.est-tenu { border-color: var(--or-eteint); background: #1b1710; }
.fief.est-tenu .fief__etat { color: var(--or); font-family: var(--serif-titre); letter-spacing: 0.08em; font-size: 0.78rem; text-transform: uppercase; }

@media (max-width: 52rem) {
  .guerre { grid-template-columns: 1fr; }
  .fief__actions { flex-wrap: wrap; }
  .fief__actions > button { flex-basis: calc(50% - 0.2rem); }
}
.fief__relation, .fief__champ { margin: 0.25rem 0 0; color: var(--sur-pierre-pale); font-style: italic; font-size: 0.9rem; }

/* ── Les jurés et les marches ───────────────────────────────────────────── */

.guerre__titre--fiefs { margin-top: 1.4rem; }
.guerre__jures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.jure {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #17130f;
  padding: 0.55rem 0.9rem;
}
.jure.est-vide { color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; border-style: dashed; }
.jure__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.jure__nom { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.jure__maison { font-family: var(--serif-dit); font-style: italic; font-size: 0.85rem; color: var(--sur-pierre-pale); }
.jure__dit { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--or-eteint); font-variant-numeric: tabular-nums; }

.fief__actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.fief__actions .fief__marcher { margin-top: 0; flex: 1 1 50%; }
.fief__jurer {
  flex: 1 1 50%;
  padding: 0.45rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--sur-pierre);
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}
.fief__jurer:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.fief__jurer:disabled { opacity: 0.35; cursor: not-allowed; }
.fief__duel {
  flex: 1 1 33%;
  padding: 0.45rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--sur-pierre);
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}
.fief__duel:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.fief__duel:disabled { opacity: 0.35; cursor: not-allowed; }

.fief__marche {
  margin: 0.3rem 0 0;
  font-family: var(--serif-titre);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}
.fief.est-marche { border-style: dashed; }
.fief.est-jure { border-color: var(--cuir-clair); background: #1a1611; }
.fief.est-jure .fief__etat {
  color: var(--or-eteint);
  font-family: var(--serif-titre);
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

/* ── Le carrefour ───────────────────────────────────────────────────────── */

.carrefour {
  list-style: none;
  margin: 0;
  padding: 0.4rem 1.3rem 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.6rem;
}
.voie {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #17130f;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.voie__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.voie__nom { font-family: var(--serif-titre); font-size: 1.05rem; color: var(--parchemin); letter-spacing: 0.05em; }
.voie__pese { font-family: var(--serif-dit); font-style: italic; font-size: 0.85rem; color: var(--or-eteint); }
.voie__dit { margin: 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre); text-wrap: balance; }
.voie__rangs { margin: 0; font-size: 0.8rem; color: var(--sur-pierre-pale); }
.voie__etat {
  margin: 0.3rem 0 0;
  font-family: var(--serif-titre);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}
.voie.est-choisie { border-color: var(--or-eteint); background: #1b1710; }
.voie.est-choisie .voie__etat { color: var(--or); }
.voie.est-fermee { border-style: dashed; opacity: 0.65; }
.voie__prendre {
  margin-top: 0.45rem;
  padding: 0.45rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #f0e5cd;
  background: radial-gradient(120% 140% at 50% 0%, #a02a20, var(--cire) 60%, #5c130e);
  border: 1px solid #4a0f0b;
  border-radius: var(--rayon);
}
.voie__prendre:hover { filter: brightness(1.12); }

/* ── La maisonnée ───────────────────────────────────────────────────────── */

.bandeau__separateur { color: var(--sur-pierre-pale); }
.bandeau__age { color: var(--sur-pierre-pale); }

.maisonnee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding: 0.4rem 1.3rem 1.4rem; align-items: start; }
.maisonnee__gens, .maisonnee__partis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.maisonnee__heritier {
  margin: 0 0 0.8rem;
  font-family: var(--serif-dit);
  font-style: italic;
  color: var(--sur-pierre);
  text-wrap: balance;
}
.maisonnee__heritier.est-faible { color: #d09a86; }
.maisonnee__heritier.est-solide { color: var(--or-eteint); }

.parent, .parti {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #17130f;
  padding: 0.6rem 0.9rem;
}
.parent.est-vide { color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; border-style: dashed; }
.parent.est-mort { opacity: 0.5; border-style: dashed; }
.parent.est-chef { border-color: var(--or-eteint); background: #1b1710; }
.parent__image { display: block; width: 4.5rem; height: 5.5rem; object-fit: cover; margin-bottom: .45rem; border-radius: var(--rayon); }
.parent__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.parent__nom { font-family: var(--serif-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.parent__lien {
  font-family: var(--serif-titre);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}
.parent.est-chef .parent__lien { color: var(--or); }
.parent__dit { margin: 0.3rem 0 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); font-size: 0.9rem; }
.parent__chiffres, .parti__dot { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--sur-pierre); font-variant-numeric: tabular-nums; }
.parti__dot { color: var(--or-eteint); }
.parent__bouton {
  margin-top: 0.55rem;
  width: 100%;
  padding: 0.35rem;
  font-family: var(--serif-titre);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--sur-pierre);
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}
.parent__bouton:hover { border-color: var(--or); color: var(--or); }

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

/* ── Les classements ────────────────────────────────────────────────────── */

.tableaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.9rem;
  padding: 0.4rem 1.3rem 1.4rem;
  align-items: start;
}
.tableau {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #17130f;
  padding: 0.8rem 0.9rem;
}
.tableau__titre {
  margin: 0;
  font-family: var(--serif-titre);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--parchemin);
}
.tableau__dit { margin: 0.2rem 0 0.7rem; font-family: var(--serif-dit); font-style: italic; font-size: 0.85rem; color: var(--sur-pierre-pale); }
.tableau__vide { margin: 0; font-family: var(--serif-dit); font-style: italic; color: var(--fer-sombre); }
.tableau__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.place {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.18rem 0.3rem;
  font-size: 0.9rem;
  color: var(--sur-pierre);
}
.place__rang { font-family: var(--serif-titre); font-size: 0.78rem; color: var(--sur-pierre-pale); text-align: right; }
.place__valeur { font-variant-numeric: tabular-nums; color: var(--or-eteint); }
.place.est-toi { background: #221c13; color: var(--parchemin); border-radius: var(--rayon); }
.place.est-toi .place__rang, .place.est-toi .place__valeur { color: var(--or); }
.place.est-coupure { display: block; text-align: center; color: var(--fer-sombre); padding: 0; letter-spacing: 0.3em; }
.tableau__place { margin: 0.6rem 0 0; font-family: var(--serif-titre); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sur-pierre-pale); }

/* ── La Longue Nuit ─────────────────────────────────────────────────────── */

.bandeau__lien--nuit.est-urgente { color: #9fc6d8; }

.nuit {
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-template-areas: 'vue vue' 'phases etat';
  gap: 1.4rem;
  padding: 0.4rem 1.3rem 1.4rem;
  align-items: start;
}

/* La vue de la phase. C'est elle qui porte l'écran : la Longue Nuit n'était
   qu'une liste de sept mots et trois nombres. */
.nuit__vue {
  grid-area: vue;
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #0a0d10;
  aspect-ratio: 16 / 7;
}
.nuit__vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sans image, la case reste NOIRE et se dit : on ne remplit pas un trou avec
   une autre phase. */
.nuit__vue:not(.a-sa-vue) img { display: none; }
.nuit__legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.4rem 1.3rem 1rem;
  background: linear-gradient(to top, rgba(6,9,12,0.94) 12%, rgba(6,9,12,0) 100%);
}
.nuit__phase {
  margin: 0 0 0.3rem;
  font-family: var(--serif-titre);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dce9f0;
}

/* Une vignette par phase atteinte. Ce qui vient reste une plaque noire. */
.phase__vue {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0.35rem 0 0.1rem;
  border-radius: 2px;
  background: #0c1013;
  object-fit: cover;
  opacity: 0.62;
}
.phase.est-maintenant .phase__vue { opacity: 1; }
.nuit__phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.phase {
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-left: 1px solid var(--fer-sombre);
  position: relative;
  color: var(--fer-sombre);
  font-family: var(--serif-titre);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.phase::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0.85rem;
  width: 7px;
  height: 7px;
  background: var(--fer-sombre);
  border-radius: 50%;
}
.phase.est-passee { color: var(--sur-pierre-pale); }
.phase.est-passee::before { background: var(--sur-pierre-pale); }
.phase.est-maintenant { color: #cfe4ee; border-left-color: #6d93a5; }
.phase.est-maintenant::before { background: #cfe4ee; box-shadow: 0 0 10px #6d93a5; width: 9px; height: 9px; left: -5px; }

.nuit__etat { border: 1px solid var(--cuir); border-radius: var(--rayon); background: #14171a; padding: 1rem 1.1rem; }
.nuit__dit { margin: 0; font-family: var(--serif-dit); font-style: italic; font-size: 1.05rem; color: #cfe4ee; text-wrap: balance; }
.jauges--nuit { margin: 0 0 0.9rem; }
.nuit__ligne { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--sur-pierre); }
.nuit__regle { margin: 0.9rem 0 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); text-wrap: balance; }

@media (max-width: 52rem) {
  .nuit { grid-template-columns: 1fr; grid-template-areas: 'vue' 'phases' 'etat'; }
  .nuit__phases { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
  .phase { border-left: 0; padding: 0.2rem 0.5rem; border: 1px solid var(--fer-sombre); border-radius: var(--rayon); }
  .phase::before { display: none; }
  .phase__vue { display: none; }
}

/* ── Le feu grégeois ────────────────────────────────────────────────────── */

.guerre__titre--feu { margin-top: 1.4rem; }
.feu {
  border: 1px solid #2f4a2c;
  border-radius: var(--rayon);
  background: #141a12;
  padding: 0.7rem 0.9rem;
}
.feu__compte { margin: 0 0 0.4rem; font-family: var(--serif-titre); color: #b9d9a8; letter-spacing: 0.04em; }
.feu__dit { margin: 0.25rem 0 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre); font-size: 0.9rem; }
.feu__prix { margin: 0.35rem 0 0; font-size: 0.85rem; color: #c9a37e; }

.fief__feu { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.6rem; }
.fief__feu-nom {
  font-family: var(--serif-titre);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ec48c;
}
.fief__feu input {
  width: 4.5rem;
  background: var(--pierre);
  border: 1px solid #2f4a2c;
  border-radius: var(--rayon);
  padding: 0.22rem 0.4rem;
  color: #cfe6c0;
  font-family: var(--serif-corps);
  font-variant-numeric: tabular-nums;
}

/* ── La carte ───────────────────────────────────────────────────────────── */

/* La carte a besoin de place : le dialogue generique l'etranglait. */
#carte { width: min(96vw, 1500px); }
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.2rem; padding: 0.4rem 1.3rem 1.4rem; align-items: start; }
.atlas__carte {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  overflow: hidden;
  background: #241c14;
  display: flex;
  justify-content: center;
}
/* La carte se borne en HAUTEUR : bornee en largeur, elle depassait la fenetre
   et Dorne restait sous le pli. */
.carte { display: block; max-height: 70vh; max-width: 100%; width: auto; height: auto; }

.carte__region { cursor: pointer; }
.carte__region path { transition: filter 140ms ease; }
.carte__region:hover path, .carte__region:focus-visible path { filter: brightness(1.25); }
.carte__region:focus-visible { outline: none; }
.carte__region:focus-visible path { stroke: var(--or); stroke-width: 3; }

.carte__nom {
  font-family: var(--serif-titre);
  font-size: 17px;
  letter-spacing: 1.2px;
  fill: #e3d5b3;
  pointer-events: none;
}
.carte__region.est-tienne .carte__nom { fill: var(--or); }
.carte__froid { font-family: var(--serif-titre); font-size: 12px; fill: #9fc6d8; pointer-events: none; }
.carte__mur-nom { font-family: var(--serif-titre); font-size: 21px; letter-spacing: 3px; fill: #b8d4e0; pointer-events: none; }
.carte__mur.est-tombe .carte__mur-nom { fill: #d09a86; }
.carte__siege-nom { font-family: var(--serif-titre); font-size: 14px; letter-spacing: 1px; fill: var(--or); pointer-events: none; }
.carte__mer path { opacity: 0.7; }
.carte__fief { cursor: help; }

.atlas__cote { display: flex; flex-direction: column; gap: 0.9rem; }
.carte__legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--sur-pierre); }
.carte__legende li { display: flex; align-items: center; gap: 0.5rem; }
.carte__legende li.est-cachee { color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic; }
.carte__pastille { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid; display: inline-block; }

.atlas__region { border: 1px solid var(--cuir); border-radius: var(--rayon); background: #17130f; padding: 0.8rem 0.9rem; }
.atlas__titre { margin: 0 0 0.4rem; font-family: var(--serif-titre); font-size: 1rem; color: var(--parchemin); letter-spacing: 0.05em; display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.atlas__tienne { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.atlas__dit { margin: 0 0 0.6rem; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); font-size: 0.88rem; }
.atlas__ligne { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--sur-pierre); }
.atlas__vide { margin: 0; font-family: var(--serif-dit); font-style: italic; color: var(--sur-pierre-pale); }

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

/* ── La carte en 2.5D ───────────────────────────────────────────────────── */

.carte__prise { cursor: pointer; }
.carte__region.est-decor .carte__prise { cursor: help; }
.carte__region:focus-visible { outline: none; }
.carte__pan { transition: filter 140ms ease; }
.carte__pan.est-survolee { filter: brightness(1.3); }
.carte__pan.est-decor { opacity: 0.82; }

.carte__nom {
  font-family: var(--serif-titre);
  font-size: 34px;
  letter-spacing: 1.4px;
  fill: #efe3c4;
  pointer-events: none;
}
.carte__nom-ombre {
  font-family: var(--serif-titre);
  font-size: 34px;
  letter-spacing: 1.4px;
  fill: #0a0906;
  opacity: 0.85;
  pointer-events: none;
}
.carte__region.est-tienne .carte__nom { fill: #f0cd6a; }
.carte__region.est-decor .carte__nom { font-size: 26px; fill: #b3a98d; }
.carte__region.est-decor .carte__nom-ombre { font-size: 26px; }

.carte__ville-nom {
  font-family: var(--serif-corps);
  font-size: 20px;
  letter-spacing: 0.4px;
  fill: #d8cbaa;
  paint-order: stroke;
  stroke: #0a0906;
  stroke-width: 3px;
  pointer-events: none;
}
.carte__ville { cursor: help; }

.carte__siege-nom {
  font-family: var(--serif-titre);
  font-size: 27px;
  letter-spacing: 1.2px;
  fill: #f0cd6a;
  pointer-events: none;
}

/* La carte est sur parchemin : les noms passent a l'encre. */
.carte__nom { fill: #3a2c1c; }
.carte__nom-ombre { fill: #d9c9a3; opacity: 0.9; }
.carte__region.est-tienne .carte__nom { fill: #8c2f16; }
.carte__region.est-decor .carte__nom { fill: #6a563c; }
.carte__ville-nom { fill: #3a2c1c; stroke: #e6d8b4; }
.carte__mur-nom { fill: #2c4652; }
.carte__mur.est-tombe .carte__mur-nom { fill: #8c2f16; }
.carte__siege-nom { fill: #8c2f16; }

/* Sur parchemin, un nom se lit a l'encre franche avec un contour clair : sans
   cela il se noie dans l'ocre de la terre. */
.carte__nom {
  fill: #2b1f12;
  paint-order: stroke;
  stroke: #e9dcba;
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 23px;
}
.carte__nom-ombre { display: none; }
.carte__region.est-tienne .carte__nom { fill: #7c2510; stroke: #f2e6c6; }
.carte__region.est-decor .carte__nom { fill: #5b4a32; font-size: 17px; stroke-width: 4px; }
.carte__siege-nom {
  fill: #7c2510;
  paint-order: stroke;
  stroke: #f2e6c6;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.carte__froid { fill: #2c5468; paint-order: stroke; stroke: #e9dcba; stroke-width: 3px; }
.carte__mur-nom { paint-order: stroke; stroke: #e9dcba; stroke-width: 3px; }

/* La carte en relief se pose PAR-DESSUS la feuille. La feuille reste dans la
   page — c'est elle qui sert de texture au sol — mais on ne la montre plus. */
.atlas__carte { position: relative; }
.carte.est-remplacee { position: absolute; opacity: 0; pointer-events: none; }
.carte--relief { display: block; margin: 0 auto; }

/* ── Ton siège ────────────────────────────────────────────────────────────
   La vue peinte porte l'étape et la terre ; la bannière, DEVANT elle, porte
   ce qui se combine trop pour être peint : le blason, le rang, la voie. Elle
   ne se fait pas passer pour peinte — elle pend devant. */
.siege__vue {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  background: #0b0d10;
  aspect-ratio: 16 / 10;
}
.siege__vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
.siege__sans-vue {
  display: grid; place-items: center; height: 100%;
  color: var(--sur-pierre-pale); font-family: var(--serif-dit); font-style: italic;
}

.siege__banniere {
  position: absolute;
  top: 0;
  left: 6%;
  width: clamp(3.4rem, 14%, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
/* La hampe traverse le bord haut : la bannière vient de plus haut que le cadre. */
.siege__hampe {
  width: 4px; height: 12%;
  background: linear-gradient(#3b2f1f, #5b4530);
}
.siege__etoffe {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--champ, #1b1815);
  border: 1px solid rgba(0, 0, 0, 0.45);
  /* L'ourlet en pointe : sans lui, c'est une affiche, pas une étoffe. */
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  display: grid;
  place-items: start center;
  padding-top: 8%;
}
.siege__ecu { width: 62%; height: auto; }
.siege__pennons { display: flex; gap: 3px; margin-top: 3px; }
.siege__pennon {
  width: 5px; height: 16px;
  background: var(--champ, #1b1815);
  border: 1px solid rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.siege__couronne {
  width: 60%; height: 10px; margin-top: 5px;
  background: #c8a02e;
  clip-path: polygon(0 100%, 0 40%, 12% 0, 25% 40%, 37% 0, 50% 40%, 63% 0, 75% 40%, 88% 0, 100% 40%, 100% 100%);
}
.siege__rang {
  margin: 6px 0 0;
  font-family: var(--serif-titre);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6dcc4;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

@media (max-width: 52rem) {
  .siege__banniere { left: 4%; width: 4.4rem; }
}

/* ── Un emplacement d'image encore vide ───────────────────────────────────
   Il NOMME ce qu'on attend : le fichier, sa taille, son cadrage. Un trou muet
   se confond avec un bogue ; un trou qui se présente est une liste de courses.
   Il garde le rapport de l'image finale, pour que la mise en page ne bouge pas
   le jour où l'asset arrive. */
.cadre-vide {
  display: grid;
  place-items: center;
  width: 100%;
  background:
    repeating-linear-gradient(135deg,
      #1a1712 0 8px, #16130f 8px 16px);
  border: 1px dashed var(--cuir);
  border-radius: var(--rayon);
  color: var(--sur-pierre-pale);
  text-align: center;
  padding: 0.6rem;
  overflow: hidden;
}
.cadre-vide__dedans { display: grid; gap: 0.25rem; justify-items: center; max-width: 100%; }
.cadre-vide__chemin {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0;
  color: #c9b98f;
  word-break: break-all;
}
.cadre-vide__taille { font-size: 0.68rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.cadre-vide__note { font-size: 0.66rem; opacity: 0.55; font-style: italic; }


/* ── 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: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.7rem;
}

.fiche {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 70%), var(--pierre-claire);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fiche__nom {
  font-family: var(--serif-titre);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--sur-pierre);
}

.fiche__camp {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}

.fiche__dit {
  margin: 0.2rem 0 0;
  font-family: var(--serif-dit);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--sur-pierre-pale);
}

.fiche__traits {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.fiche__traits li {
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--cire);
  border: 1px solid rgba(126, 29, 22, 0.55);
  border-radius: var(--rayon);
}

.fiche__cout {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--or-eteint);
  font-variant-numeric: tabular-nums;
}

.fiche.est-muette {
  border-style: dashed;
  border-color: rgba(123, 129, 137, 0.3);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 6px, transparent 6px 12px),
    var(--pierre);
  min-height: 5.5rem;
  justify-content: center;
}

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

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

/* Ce qui te suit : le prix d'abord, l'apport ensuite. */
.suivante {
  margin-top: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--or-eteint);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(195, 155, 62, 0.08), transparent 70%), var(--pierre-claire);
}

.suivante__dit {
  margin: 0.35rem 0 0;
  font-family: var(--serif-dit);
  color: var(--sur-pierre);
}

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

.suivante__apport {
  margin: 0.2rem 0 0;
  color: var(--or);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

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

.nuit__annonce-titre {
  margin: 0 0 0.5rem;
  font-family: var(--serif-titre);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--sur-pierre-pale);
  text-transform: uppercase;
}

.horde {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.horde__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  border-bottom: 1px dotted rgba(123, 129, 137, 0.25);
  font-size: 0.88rem;
  color: var(--sur-pierre);
}

.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 1.4rem;
  padding: 0.2rem 0 1.1rem;
  /* 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 rgba(126, 29, 22, 0.35);
}

.reve__titre {
  margin: 0 0 0.3rem;
  font-family: var(--serif-titre);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}

.reve__texte {
  margin: 0;
  max-width: 46ch;
  font-family: var(--serif-dit);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--sur-pierre);
  font-style: italic;
}

.sang {
  margin: 0.6rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
}

.sang__dit {
  margin: 0.3rem 0 0;
  font-family: var(--serif-dit);
  color: var(--sur-pierre);
}

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

.reliques__rien {
  color: var(--sur-pierre-pale);
  font-style: italic;
  font-size: 0.9rem;
}

.relique {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--or-eteint);
  border-radius: var(--rayon);
  background: rgba(195, 155, 62, 0.06);
}

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

.relique__dit {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--sur-pierre-pale);
}

.relique__image, .fiche__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  margin-bottom: 0.4rem;
  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 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.porte__ligne {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--or-eteint);
  border-radius: var(--rayon);
  background: rgba(195, 155, 62, 0.06);
}

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

.porte__ou {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sur-pierre-pale);
}

.porte__quoi {
  display: block;
  font-family: var(--serif-titre);
  font-size: 1.02rem;
  color: var(--parchemin);
  margin-top: 0.15rem;
}

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

.porte__dit {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.rayon { margin-bottom: 1.4rem; }

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

.piece {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  background: var(--pierre-claire);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.piece__nom {
  font-family: var(--serif-titre);
  color: var(--sur-pierre);
  letter-spacing: 0.02em;
}

.piece__provenance {
  color: var(--or-eteint);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.piece__rarete {
  color: var(--cire);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.piece__dit {
  margin: 0;
  font-family: var(--serif-dit);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--sur-pierre-pale);
}

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

.piece__cout {
  margin: 0;
  font-size: 0.78rem;
  color: var(--sur-pierre-pale);
  font-variant-numeric: tabular-nums;
}

.piece__forger {
  margin-top: 0.35rem;
  align-self: flex-start;
}

.piece__etat {
  margin-top: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--fer-sombre);
}

.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; }

/* ── 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 1.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--or-eteint);
  border-radius: var(--rayon);
  background: rgba(195, 155, 62, 0.06);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

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

.pretendant {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  background: var(--pierre-claire);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pretendant__nom {
  font-family: var(--serif-titre);
  font-size: 1.02rem;
  color: var(--sur-pierre);
}

.pretendant__dit {
  margin: 0;
  font-family: var(--serif-dit);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--sur-pierre-pale);
}

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

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

.pretendant__marcher { margin-top: 0.4rem; align-self: flex-start; }

.pretendant.est-abattu { opacity: 0.5; }
.pretendant__etat {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fer-sombre);
}

.cour { border-top: 1px solid var(--fer-sombre); padding-top: 1.2rem; }
.cour__note { margin: 0.2rem 0 0.9rem; 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: 0.7rem;
}

.charge {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--or-eteint);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

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

.charge__nom {
  font-family: var(--serif-titre);
  color: var(--sur-pierre);
  letter-spacing: 0.02em;
}

.charge__dit {
  margin: 0;
  font-family: var(--serif-dit);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--sur-pierre-pale);
}

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

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

.charge__choix { margin-top: 0.3rem; }
.charge__bouton { margin-top: 0.3rem; align-self: flex-start; }

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