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

.bandeau__lien--nuit.est-urgente { color: var(--glace); }

.nuit {
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-template-areas: 'vue vue' 'phases etat';
  gap: var(--e-5);
  padding: var(--e-2) var(--e-5) var(--e-5);
  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: var(--glace-nuit);
  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 var(--e-5) var(--e-4);
  background: linear-gradient(to top, color-mix(in srgb, var(--glace-nuit) 94%, transparent) 12%, transparent 100%);
}
.nuit__phase {
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glace-clair);
}

/* Une vignette par phase atteinte. Ce qui vient reste une plaque noire. */
.phase__vue {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: var(--e-1) 0 var(--e-0);
  border-radius: var(--rayon);
  background: var(--pierre-0);
  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: var(--e-2) 0 var(--e-2) var(--e-5);
  border-left: 1px solid var(--fer-sombre);
  position: relative;
  color: var(--texte-pale);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.04em;
}
.phase::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0.85rem;
  width: 7px;
  height: 7px;
  background: var(--fer-sombre);
  border-radius: var(--rayon-rond);
}
.phase.est-passee { color: var(--texte-pale); }
.phase.est-passee::before { background: var(--texte-pale); }
.phase.est-maintenant { color: var(--parchemin-clair); border-left-color: var(--fer); }
.phase.est-maintenant::before { background: var(--parchemin-clair); box-shadow: 0 0 10px var(--fer); width: 9px; height: 9px; left: -5px; }

.nuit__etat { border: 1px solid var(--cuir); border-radius: var(--rayon); background: var(--glace-nuit); padding: var(--e-4) var(--e-4); }
.nuit__dit { margin: 0; font-family: var(--police-corps); font-style: italic; font-size: var(--t-4); color: var(--glace-clair); text-wrap: balance; }
.jauges--nuit { margin: 0 0 var(--e-4); }
.nuit__ligne { margin: var(--e-1) 0 0; font-size: var(--t-3); color: var(--texte); }
.nuit__regle { margin: var(--e-4) 0 0; font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); text-wrap: balance; }

/* Le Mur et les champs de bataille (lot 13). Deux blocs dans l'état de la
   nuit : une jauge de pierre qui s'effrite, et les deux prix du bûcher, côte
   à côte, pour que le joueur lise les deux chiffres avant de choisir. */
.nuit__sous-titre {
  margin: var(--e-4) 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glace);
}
.nuit__mur, .nuit__champs { border-top: 1px solid color-mix(in srgb, var(--glace) 22%, transparent); padding-top: var(--e-1); }
.nuit__mur-jauge {
  height: 0.55rem;
  margin: var(--e-1) 0 var(--e-2);
  border: 1px solid color-mix(in srgb, var(--glace) 40%, transparent);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--pierre-0) 45%, transparent);
  overflow: hidden;
}
.nuit__mur-pierre {
  display: block;
  height: 100%;
  width: var(--integrite, 100%);
  background: linear-gradient(90deg, var(--glace-clair), var(--glace));
  transition: width 0.6s ease;
}
.nuit__mur.est-tombe .nuit__mur-pierre { background: var(--perte-fond); }
.nuit__champs-liste { list-style: none; margin: var(--e-1) 0 0; padding: 0; font-size: var(--t-2); color: var(--texte-pale); }
.nuit__champs-liste li { padding: var(--e-0) 0; }
.nuit__choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-2); align-items: start; }
.nuit__choix-cote { display: flex; flex-direction: column; gap: var(--e-1); }
.nuit__ligne--perte { color: var(--perte); }
.nuit__ligne--horde { color: var(--glace-clair); font-weight: 600; }
@media (max-width: 40rem) { .nuit__choix { grid-template-columns: 1fr; } }
.nuit__aide { margin: var(--e-1) 0 0; color: var(--texte); font-size: var(--t-2); line-height: 1.35; }

@media (max-width: 52rem) {
  .nuit { grid-template-columns: 1fr; grid-template-areas: 'vue' 'phases' 'etat'; }
  .nuit__phases { flex-direction: row; flex-wrap: wrap; gap: var(--e-1); }
  .phase { border-left: 0; padding: var(--e-1) var(--e-2); 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: var(--e-5); }
.feu {
  border: 1px solid var(--encre-pale);
  border-radius: var(--rayon);
  background: var(--pierre-3);
  padding: var(--e-3) var(--e-4);
}
.feu__compte { margin: 0 0 var(--e-2); font-family: var(--police-titre); color: var(--parchemin); letter-spacing: 0.04em; }
.feu__dit { margin: var(--e-1) 0 0; font-family: var(--police-corps); font-style: italic; color: var(--texte); font-size: var(--t-3); }
.feu__prix { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--parchemin-bas); }

.fief__feu { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-2); }
.fief__feu-nom {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gain);
}
.fief__feu input {
  width: 4.5rem;
  background: var(--pierre-1);
  border: 1px solid var(--encre-pale);
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
  color: var(--parchemin-clair);
  font-family: var(--police-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: var(--e-4); padding: var(--e-2) var(--e-5) var(--e-5); align-items: start; }
.atlas__carte {
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--pierre-4);
  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(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 1.2px;
  fill: var(--parchemin);
  pointer-events: none;
}
.carte__region.est-tienne .carte__nom { fill: var(--or); }
.carte__froid { font-family: var(--police-titre); font-size: var(--t-1); fill: var(--texte); pointer-events: none; }
.carte__mur-nom { font-family: var(--police-titre); font-size: var(--t-6); letter-spacing: 3px; fill: var(--glace-clair); pointer-events: none; }
.carte__mur.est-tombe .carte__mur-nom { fill: var(--parchemin-bas); }
.carte__siege-nom { font-family: var(--police-titre); font-size: var(--t-3); letter-spacing: 1px; fill: var(--or); pointer-events: none; }
.carte__mer path { opacity: 0.7; }
.carte__fief { cursor: pointer; outline: none; }
.carte__fief:focus-visible circle:last-of-type, .carte__fief:hover circle:last-of-type { stroke: var(--or); stroke-width: 3; }
/* Le siège qu'on mène : l'anneau des tentes, et la part déjà gagnée. */
.carte__siege-anneau { fill: none; stroke: var(--parchemin); stroke-width: 2; stroke-dasharray: 3 4; opacity: 0.75; }
.carte__siege-avance { fill: none; stroke: var(--alerte); stroke-width: 4; stroke-linecap: butt; }
.carte__blocus { stroke: var(--parchemin-clair); stroke-width: 2.5; stroke-linecap: round; opacity: 0.9; }
.carte__inconnue { fill: var(--pierre-4); stroke: var(--texte); stroke-width: 1.5; stroke-dasharray: 2 2; }
.carte__inconnue-signe { font-family: var(--police-titre); font-size: var(--t-1); fill: var(--parchemin); pointer-events: none; }
.carte__route-ombre { fill: none; stroke: var(--pierre-0); stroke-width: 4; opacity: 0.35; }
.carte__route { fill: none; stroke: var(--or-vif); stroke-width: 2; stroke-dasharray: 7 6; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .carte__siege-anneau { animation: carte-tentes 6s linear infinite; }
  @keyframes carte-tentes { to { stroke-dashoffset: -14; } }
}
.carte__outils { display: flex; gap: var(--e-2); }
.visite { display: grid; gap: var(--e-4); }
/* L'étalonnage : un peu plus de contraste, un peu moins de couleur, les
   bords qui s'assombrissent et un grain fin — le plan d'une série, pas le
   rendu d'un moteur. Le vignettage est un voile posé au-dessus de la toile,
   il ne gêne ni le doigt ni la souris. */
.visite__vue { position: relative; border: 1px solid var(--cuir); border-radius: var(--rayon); overflow: hidden; background: var(--pierre-4); min-height: 240px; }
.visite__vue::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--pierre-0) 42%, transparent) 100%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--parchemin-clair) 1%, transparent) 0 1px, color-mix(in srgb, var(--pierre-0) 1%, transparent) 1px 2px);
  mix-blend-mode: multiply;
}
.visite__toile { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; outline: none; filter: contrast(1.08) saturate(0.9); }
.visite__toile:active { cursor: grabbing; }
.visite__toile:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }
.visite__silhouette { display: block; width: 100%; max-height: 60vh; background: var(--parchemin); }
/* Les noms des quartiers, des rues et des portes, lus depuis la rue.
   Ils sont peints par jeu/ville/noms.js, qui les projette au ras du sol et
   n'en laisse que quatre a l'ecran. Pas de plaque sombre comme sur la carte
   du monde : ici le fond est une rue, et une plaque de plus par nom ferait
   quatre trous noirs dans l'image. Une encre claire et une ombre portee
   suffisent a les decoller de la pierre et de la tuile. */
.visite__noms { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.visite__nom {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--parchemin-clair);
  font: 600 var(--t-4) var(--police-corps);
  letter-spacing: 0.6px;
  text-shadow: var(--ombre-texte);
  will-change: transform;
}
/* Une porte est un fer dans une muraille : le nom se lit en petites capitales,
   plus froid que le reste. */
.visite__nom--porte { font-size: var(--t-3); letter-spacing: 2px; text-transform: uppercase; color: var(--parchemin-clair); }
/* Une rue se dit d'un trait, en penche, comme sur un plan a la plume. */
.visite__nom--rue { font-style: italic; font-size: var(--t-4); color: var(--parchemin-clair); }
/* Un quartier tient plus de place qu'une rue : c'est lui qu'on cherche. */
.visite__nom--quartier { font: 700 var(--t-5) var(--police-titre); letter-spacing: 1.2px; }

.visite__dit { margin: 0; font-family: var(--police-corps); font-style: italic; font-size: var(--t-4); color: var(--texte); max-width: 60ch; }
.carte__ville { cursor: pointer; outline: none; }
.carte__ville:focus-visible { filter: brightness(1.3) drop-shadow(0 0 3px var(--or-vif)); }
/* La consigne de la carte tient dans sa colonne : la note d'en-tête, elle, ne se coupe pas. */
.atlas__cote .dialogue__note { white-space: normal; }
.carte__outil { min-width: 44px; min-height: 44px; padding: 0; font: var(--t-5) var(--police-titre); color: var(--parchemin); background: var(--pierre-2); border: 1px solid var(--cuir); border-radius: var(--rayon); cursor: pointer; }
.carte__outil:hover, .carte__outil:focus-visible { color: var(--or); border-color: var(--or-sourd); }
.carte { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.carte text { pointer-events: none; }
.carte:active { cursor: grabbing; }
.carte:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.carte__legende li.est-assiege::before, .carte__legende li.est-route::before, .carte__legende li.est-froid::before, .carte__legende li.est-nuit::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: var(--rayon-rond); display: inline-block; flex: none; }
.carte__legende li.est-assiege::before { border: 2px dashed var(--parchemin); box-sizing: border-box; }
.carte__legende li.est-route::before { border-radius: 0; height: 2px; border-top: 2px dashed var(--or-vif); }
.carte__legende li.est-froid::before { background: var(--parchemin-clair); }
.carte__legende li.est-nuit::before { background: var(--fer); }
.carte__legende li.est-nuit { color: var(--glace-clair); }
.carte-region__siege { color: var(--or); }
.carte-region__aller { margin-top: var(--e-2); min-height: 44px; padding: var(--e-2) var(--e-3); color: var(--pierre-1); background: var(--or); border: 1px solid var(--or-sourd); border-radius: var(--rayon); cursor: pointer; font: inherit; }
.carte-region__aller:hover, .carte-region__aller:focus-visible { background: var(--or-vif); }
.fief.est-designe { outline: 2px solid var(--or); outline-offset: 2px; }

.atlas__cote { display: flex; flex-direction: column; gap: var(--e-4); }
.carte__legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-2); color: var(--texte); }
.carte__legende li { display: flex; align-items: center; gap: var(--e-2); }
.carte__legende li.est-cachee { color: var(--texte-pale); font-family: var(--police-corps); font-style: italic; }
.carte__pastille { width: 0.7rem; height: 0.7rem; border-radius: var(--rayon-rond); border: 1px solid; display: inline-block; }

.atlas__region { border: 1px solid var(--cuir); border-radius: var(--rayon); background: var(--pierre-2); padding: var(--e-3) var(--e-4); }
.atlas__titre { margin: 0 0 var(--e-2); font-family: var(--police-titre); font-size: var(--t-4); color: var(--parchemin); letter-spacing: 0.05em; display: flex; justify-content: space-between; gap: var(--e-2); align-items: baseline; }
.atlas__tienne { font-size: var(--t-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.atlas__dit { margin: 0 0 var(--e-2); font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); font-size: var(--t-3); }
.atlas__ligne { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--texte); }
.atlas__vide { margin: 0; font-family: var(--police-corps); font-style: italic; color: var(--texte-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(--police-titre);
  font-size: var(--t-8);
  letter-spacing: 1.4px;
  fill: var(--parchemin-clair);
  pointer-events: none;
}
.carte__nom-ombre {
  font-family: var(--police-titre);
  font-size: var(--t-8);
  letter-spacing: 1.4px;
  fill: var(--pierre-0);
  opacity: 0.85;
  pointer-events: none;
}
.carte__region.est-tienne .carte__nom { fill: var(--or-vif); }
.carte__region.est-decor .carte__nom { font-size: var(--t-7); fill: var(--texte); }
.carte__region.est-decor .carte__nom-ombre { font-size: var(--t-7); }

.carte__ville-nom {
  font-family: var(--police-corps);
  font-size: var(--t-5);
  letter-spacing: 0.4px;
  fill: var(--parchemin);
  paint-order: stroke;
  stroke: var(--pierre-0);
  stroke-width: 3px;
  pointer-events: none;
}
.carte__ville { cursor: help; }
.carte__ville-nom--petite { font-size: var(--t-3); }
.carte__rose-nord { font-family: var(--police-titre); font-size: var(--t-5); fill: var(--cuir); }
.carte__cartouche { font-family: var(--police-titre); font-size: var(--t-4); letter-spacing: 1.6px; fill: var(--cuir); }
.carte__cite:hover { filter: brightness(1.12); }

.carte__siege-nom {
  font-family: var(--police-titre);
  font-size: var(--t-7);
  letter-spacing: 1.2px;
  fill: var(--or-vif);
  pointer-events: none;
}

/* La carte est sur parchemin : les noms passent a l'encre. */
.carte__nom { fill: var(--cuir); }
.carte__nom-ombre { fill: var(--parchemin); opacity: 0.9; }
.carte__region.est-tienne .carte__nom { fill: var(--cire); }
.carte__region.est-decor .carte__nom { fill: var(--encre-pale); }
.carte__ville-nom { fill: var(--cuir); stroke: var(--parchemin); }
.carte__mur-nom { fill: var(--glace-fond); }
.carte__mur.est-tombe .carte__mur-nom { fill: var(--cire); }
.carte__siege-nom { fill: var(--cire); }

/* 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: var(--bois-sombre);
  paint-order: stroke;
  stroke: var(--parchemin);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: var(--t-6);
}
.carte__nom-ombre { display: none; }
.carte__region.est-tienne .carte__nom { fill: var(--cire); stroke: var(--parchemin-clair); }
.carte__region.est-decor .carte__nom { fill: var(--cuir-clair); font-size: var(--t-4); stroke-width: 4px; }
.carte__siege-nom {
  fill: var(--cire);
  paint-order: stroke;
  stroke: var(--parchemin-clair);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.carte__froid { fill: var(--fer-sombre); paint-order: stroke; stroke: var(--parchemin); stroke-width: 3px; }
.carte__mur-nom { paint-order: stroke; stroke: var(--parchemin); 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: var(--pierre-0);
  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(--texte-pale); font-family: var(--police-corps); 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 color-mix(in srgb, var(--pierre-0) 55%, transparent));
}
/* 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(var(--cuir), var(--cuir-clair));
}
.siege__etoffe {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--champ, var(--pierre-3));
  border: 1px solid color-mix(in srgb, var(--pierre-0) 45%, transparent);
  /* 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, var(--pierre-3));
  border: 1px solid color-mix(in srgb, var(--pierre-0) 50%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.siege__couronne {
  width: 60%; height: 10px; margin-top: var(--e-1);
  background: var(--alerte);
  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: var(--e-1) 0 0;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchemin-clair);
  text-align: center;
  text-shadow: var(--ombre-texte);
}

@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,
      var(--pierre-3) 0 8px, var(--pierre-2) 8px 16px);
  border: 1px dashed var(--cuir);
  border-radius: var(--rayon);
  color: var(--texte-pale);
  text-align: center;
  padding: var(--e-2);
  overflow: hidden;
}
.cadre-vide__dedans { display: grid; gap: var(--e-1); justify-items: center; max-width: 100%; }
.cadre-vide__chemin {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--t-1);
  letter-spacing: 0;
  color: var(--parchemin-bas);
  word-break: break-all;
}
.cadre-vide__taille { font-size: var(--t-1); opacity: 0.75; font-variant-numeric: tabular-nums; }
.cadre-vide__note { font-size: var(--t-1); opacity: 0.55; font-style: italic; }


/* ── Les lieux du monde ────────────────────────────────────────────────────
   Mille trente-cinq marques sur le parchemin, en plus des trente-huit cites
   dessinees. Elles sont a l'encre, plus petites qu'une cite, et le repaire
   se distingue par sa couleur : c'est le seul qu'on peut nettoyer. */
.carte__marque path { fill: var(--parchemin-clair); stroke: var(--cuir); stroke-width: 1.1px; stroke-linejoin: round; }
.carte__marque--repaire path { fill: var(--cire); stroke: var(--bois-sombre); }
.carte__lieu { cursor: pointer; outline: none; }
.carte__lieu:hover { filter: brightness(1.25); }
.carte__lieu:focus-visible { filter: drop-shadow(0 0 3px var(--or-vif)); }
.carte__lieux--hameaux .carte__lieu { opacity: 0.85; }
.carte__lieu-nom {
  font-family: var(--police-corps);
  font-size: var(--t-2);
  fill: var(--cuir);
  paint-order: stroke;
  stroke: var(--parchemin);
  stroke-width: 2.5px;
  pointer-events: none;
}

/* L'étal d'une ville : six pièces, le prix devant chacune, l'or au-dessus. */
.carte-region__sous-titre { margin: var(--e-4) 0 var(--e-1); font-family: var(--police-titre); font-size: var(--t-4); font-weight: 400; letter-spacing: 0.04em; color: var(--or); }
.etal { display: grid; gap: var(--e-2); }
.etal__bourse { margin: 0; color: var(--or); }
.etal__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.etal__article { display: flex; gap: var(--e-3); align-items: flex-start; justify-content: space-between; padding: var(--e-2) var(--e-2); background: color-mix(in srgb, var(--pierre-0) 50%, transparent); border-left: 2px solid color-mix(in srgb, var(--or) 35%, transparent); border-radius: var(--rayon); }
.etal__article--verrou { border-left-color: color-mix(in srgb, var(--or) 15%, transparent); opacity: 0.75; }
.etal__dit { display: grid; gap: var(--e-0); min-width: 0; }
.etal__dit p { margin: 0; }
.etal__nom { font-family: var(--police-titre); }
.etal__rang, .etal__effets, .etal__verrou { font-size: var(--t-2); color: var(--texte-pale); }
.etal__verrou { font-family: var(--police-corps); font-style: italic; }
/* Ce que l achat ouvre a ta forge : la vraie raison du voyage. */
.etal__ouvre { margin: var(--e-1) 0 0; font-size: var(--t-2); font-family: var(--police-corps); font-style: italic; color: var(--or-sourd, var(--or-sourd)); }
.etal__prix { display: grid; gap: var(--e-1); justify-items: end; flex: none; text-align: right; }
.etal__prix p { margin: 0; }
.etal__or { color: var(--or); white-space: nowrap; }
.etal__manque { font-size: var(--t-2); color: var(--perte); white-space: nowrap; }
.etal__acheter { min-height: 44px; padding: var(--e-1) var(--e-3); color: var(--pierre-1); background: var(--or); border: 1px solid var(--or-sourd); border-radius: var(--rayon); cursor: pointer; font: inherit; }
.etal__acheter:hover:not(:disabled), .etal__acheter:focus-visible:not(:disabled) { background: var(--or-vif); }
.etal__acheter:disabled { opacity: 0.4; cursor: default; }
.etal__refus { margin: 0; color: var(--perte); }
.etal__vide { margin: 0; font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); }
.etal__achete { margin: 0; color: var(--or); font-family: var(--police-corps); font-style: italic; }
/* Le coffre devant le marchand (23/09/2026) : le prix de rachat se lit comme
   un prix d'étal, et une pièce qu'il refuse garde sa raison en clair. */
.etal__coffre { display: grid; gap: var(--e-2); margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid color-mix(in srgb, var(--or) 25%, transparent); }
.etal__coffre-titre { margin: 0; font-family: var(--police-titre); font-size: var(--t-3); letter-spacing: 0.06em; color: var(--or); }
.etal__article--invendable { border-left-color: color-mix(in srgb, var(--perte) 45%, transparent); }
.etal__article--invendable .etal__verrou { color: var(--perte); }
.etal__article .coffre__nombre { display: inline-block; padding: 0 var(--e-1); font-size: var(--t-2); color: var(--pierre-1); background: var(--or); }

/* Lever des hommes : la troupe d'abord, le nombre ensuite, le prix avant le bouton. */
.levee { display: grid; gap: var(--e-2); }
.levee__vivier { margin: 0; color: var(--or); }
.levee__parole { margin: 0; font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.levee__parole.est-perte { color: var(--perte); }
.levee__parole.est-gain { color: var(--or-vif); }
.levee__troupes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.levee__troupe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-2); background: color-mix(in srgb, var(--pierre-0) 50%, transparent); border-left: 2px solid color-mix(in srgb, var(--or) 35%, transparent); border-radius: var(--rayon); }
.levee__choix { min-height: 44px; padding: var(--e-1) var(--e-3); color: var(--parchemin); background: transparent; border: 1px solid var(--or-sourd); border-radius: var(--rayon); cursor: pointer; font: inherit; }
.levee__choix:hover, .levee__choix:focus-visible { border-color: var(--or); }
.levee__choix.est-choisi { color: var(--pierre-1); background: var(--or); }
.levee__prix { font-size: var(--t-2); color: var(--texte-pale); }
.levee__dici { font-size: var(--t-2); color: var(--or); font-family: var(--police-corps); font-style: italic; }
.levee__nombres { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--e-1); }
.levee__lever { min-height: 44px; padding: var(--e-1) var(--e-3); color: var(--pierre-1); background: var(--or); border: 1px solid var(--or-sourd); border-radius: var(--rayon); cursor: pointer; font: inherit; }
.levee__lever:hover:not(:disabled), .levee__lever:focus-visible:not(:disabled) { background: var(--or-vif); }
.levee__lever:disabled { opacity: 0.4; cursor: default; }
.levee__refus { margin: 0; color: var(--perte); }
.levee__leve { margin: 0; color: var(--or); font-family: var(--police-corps); font-style: italic; }

/* Autour de toi : les lieux à portée, du plus proche au plus loin. */
.autour__attente { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--texte-pale); }
.autour__liste { list-style: none; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: var(--e-1); }
.autour__nom { width: 100%; display: grid; gap: var(--e-0); text-align: left; padding: var(--e-2) var(--e-2); color: var(--parchemin); background: color-mix(in srgb, var(--pierre-0) 50%, transparent); border: 1px solid color-mix(in srgb, var(--or) 25%, transparent); border-radius: var(--rayon); cursor: pointer; font: inherit; min-height: 44px; }
.autour__nom:hover, .autour__nom:focus-visible { border-color: var(--or); }
.autour__mot { font-family: var(--police-titre); }
.autour__chemin { font-size: var(--t-2); color: var(--texte-pale); }
.autour__quoi { font-size: var(--t-2); color: var(--or); }
.rumeur { margin: var(--e-1) 0 0; padding: var(--e-2) var(--e-2); background: color-mix(in srgb, var(--pierre-0) 55%, transparent); border-left: 2px solid var(--or); border-radius: var(--rayon); display: grid; gap: var(--e-0); }
.rumeur__dit { margin: 0; font-family: var(--police-corps); font-style: italic; color: var(--parchemin); }
.rumeur__reste { margin: 0; font-size: var(--t-2); color: var(--or); }
.autour__nom.est-dit { border-color: var(--or); }