/* Le monde en relief : la toile WebGL et les noms projetés dessus.

   La toile prend tout le cadre du monde. Les étiquettes sont du HTML posé
   par-dessus, replacées à chaque image par jeu/monde3d.js : elles restent
   nettes à tout zoom, cliquables au doigt, et lisibles par un lecteur
   d'écran. La carte vectorielle reste dans le cadre, invisible : elle sert
   de peau au sol et dit quelle terre on touche. */

.monde__vue > .relief__toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.monde__vue > .relief__toile:active { cursor: grabbing; }
.monde__vue > .relief__toile:focus-visible { box-shadow: inset 0 0 0 2px var(--or); }

/* La carte plate devenue peau : présente, jamais peinte, jamais touchée. */
.monde__vue > svg.est-peau {
  visibility: hidden;
  pointer-events: none;
}

.relief__etiquettes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.relief__etiquette {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: var(--e-0) var(--e-2);
  border: 0;
  border-radius: var(--rayon-case);
  background: none;
  /* Le propriétaire, le 8 septembre : « les noms des lieux, villes et
     personnages sont beaucoup trop petits, pas en gras, et souvent cachés par
     des éléments ; augmenter significativement la police et le contraste ».
     De 13 px maigres à 18 px gras, sur une plaque sombre qui les décolle du
     terrain. La plaque est ce qui les rend lisibles par-dessus une forêt ou un
     toit clair : une ombre portée seule disparaît sur un fond moyen. */
  color: var(--parchemin-clair);
  font: 700 var(--t-5) var(--police-corps);
  letter-spacing: 0.4px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pierre-0) 50%, transparent);
  box-shadow: var(--ombre-1);
  text-shadow: var(--ombre-texte);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
.relief__etiquette:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.relief__etiquette:hover { color: var(--parchemin-clair); }

.relief__etiquette--terre {
  font: 700 var(--t-6) var(--police-titre);
  letter-spacing: 3px;
  color: var(--parchemin-clair);
  opacity: 1;
}
.relief__etiquette--terre.est-tienne { color: var(--or-vif); }
.relief__etiquette--terre.est-decor { font-size: var(--t-5); letter-spacing: 2.2px; color: var(--parchemin); }
.relief__etiquette--terre[data-froid]::after {
  content: attr(data-froid);
  display: block;
  font: 700 var(--t-3) var(--police-titre);
  letter-spacing: 0;
  color: var(--parchemin);
  text-align: center;
}
.monde__vue[data-niveau="continent"] .relief__etiquette--terre[data-froid]::after { display: none; }
/* En mode politique, la terre dit qui la tient, à la couleur de la maison. */
.monde__vue[data-mode="politique"] .relief__etiquette--terre[data-froid]::after { display: none; }
.monde__vue[data-mode="politique"] .relief__etiquette--terre[data-maison]::after {
  content: attr(data-maison);
  display: block;
  font: 700 var(--t-3) var(--police-corps);
  letter-spacing: 0;
  text-transform: none;
  color: var(--faction, var(--parchemin-clair));
  text-align: center;
}
.relief__etiquette--siege .blason { width: 24px; height: 28px; vertical-align: -7px; margin-right: var(--e-1); }
.monde__vue[data-niveau="ville"] .relief__etiquette--terre,
.monde__vue[data-niveau="immersion"] .relief__etiquette--terre { opacity: 0.45; }

/* Tout dézoomée, la carte est la carte des régions : chaque terre en couleur
   pleine et son nom en grand, à l'encre sombre. Rien d'autre ne se lit à ce
   cran, ni cité ni fief ni armée : on entre dans le monde en zoomant. */
.monde__vue[data-niveau="continent"] .relief__etiquette--terre {
  /* La place autour du point, en unités de carte, décide de la taille : de la
     mer Dothrak (829) aux îles de Fer (33). Sans ça, un long nom sur une
     petite terre mordait sur sa voisine. */
  font: 700 clamp(20px, calc(var(--place, 300) * 0.075px), 48px) var(--police-titre);
  letter-spacing: clamp(1px, calc(var(--place, 300) * 0.009px), 6px);
  color: var(--verredragon);
  opacity: 1;
  background: none;
  box-shadow: none;
  text-shadow: 0 0 12px color-mix(in srgb, var(--parchemin-clair) 85%, transparent), 0 0 3px color-mix(in srgb, var(--parchemin-clair) 95%, transparent), 0 0 22px color-mix(in srgb, var(--parchemin-clair) 60%, transparent);
}
.monde__vue[data-niveau="continent"] .relief__etiquette--terre.est-tienne { color: var(--bois); }
.monde__vue[data-niveau="continent"] .relief__etiquette--terre.est-decor { color: var(--verredragon); }
.monde__vue[data-niveau="continent"] .relief__etiquette:not(.relief__etiquette--terre) { display: none; }

.relief__etiquette--ville { font-size: var(--t-5); color: var(--parchemin-clair); }
.relief__etiquette--ville.est-grande { font-size: var(--t-6); color: var(--parchemin-clair); }

.relief__etiquette--fief { font-size: var(--t-4); color: var(--parchemin-clair); }
.relief__etiquette--fief.est-tienne { color: var(--or-vif); }
.relief__etiquette--fief.est-gelee { color: var(--parchemin-clair); }

/* Les noms des lieux du mod : villages, chateaux, bourgs et repaires. Ils sont
   mille trente et ne paraissent qu'au cran de la ville, douze a la fois, pres
   du regard. Plus petits et plus pales qu'un nom de fief : une cite doit se
   lire d'abord. Un repaire se dit en italique, c'est un camp de brigands. */
.relief__etiquette--lieu-du-mod { font-size: var(--t-2); color: var(--parchemin); opacity: 0.88; letter-spacing: 0.02em; }
.relief__etiquette--lieu-du-mod[data-sorte="ville"] { font-size: var(--t-3); color: var(--parchemin-clair); }
.relief__etiquette--lieu-du-mod[data-sorte="chateau"] { color: var(--parchemin-clair); }
.relief__etiquette--lieu-du-mod[data-sorte="repaire"] { font-style: italic; color: var(--texte); }

.relief__etiquette--armee {
  font-size: var(--t-4);
  color: var(--parchemin-clair);
  padding-left: var(--e-4);
}
.relief__etiquette--armee::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: calc(-1 * var(--e-1));
  background: var(--or-vif);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.relief__etiquette--siege {
  font: var(--t-3) var(--police-titre);
  letter-spacing: 1px;
  color: var(--or-vif);
}

/* Le monde vivant : les événements situés portent la couleur de leur genre. */
.relief__etiquette--evenement {
  font: 700 var(--t-4) var(--police-titre);
  letter-spacing: 0.6px;
  color: var(--or-vif);
}
.relief__etiquette--evenement.est-bataille,
.relief__etiquette--evenement.est-siege,
.relief__etiquette--evenement.est-village_pille { color: var(--perte); }
.relief__etiquette--evenement.est-marcheurs { color: var(--glace-clair); }
.relief__etiquette--evenement.est-tempete { color: var(--parchemin); }
.relief__etiquette--vivant { font-size: var(--t-3); color: var(--parchemin-clair); opacity: 1; }
/* Un seigneur en chemin : son nom, en petites capitales pâles, pour ne pas
   se confondre avec le nom d'une ville. */
.relief__etiquette--seigneur { font-size: var(--t-2); color: var(--parchemin); opacity: 0.92; font-variant: small-caps; letter-spacing: 0.04em; }
.relief__etiquette--seigneur::before { content: "\2694\FE0E"; margin-inline-end: 0.35em; opacity: 0.7; }
.carte-armee__banniere::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.4em;
  background: var(--faction, var(--fer));
  border: 1px solid var(--pierre-0);
  vertical-align: -1px;
}

/* Quand un écran s'ouvre par-dessus, les noms reculent avec le monde. */
html[data-page-ouverte] .relief__etiquettes { opacity: 0.4; }

/* Sur un petit écran, un nom se touche : la zone fait au moins 44 px de haut. */
@media (max-width: 60rem) {
  .relief__etiquette { min-height: 44px; display: inline-flex; align-items: center; }
  /* Le nom d'une terre garde sa seconde ligne (le froid, qui la tient) sous
     lui, pas à côté. */
  .relief__etiquette--terre { display: block; }
}

/* Les lignes expliquées d'une feuille (prospérité d'une ville, rendement d'une exploitation). */
.carte-region__lignes {
  margin: var(--e-1) 0 var(--e-2);
  padding-left: var(--e-4);
  font-size: 0.92em;
  opacity: 0.85;
}
.carte-region__lignes li { margin: var(--e-0) 0; }

/* Les modes de carte (lot 18) : le volet des modes au-dessus des outils, et
   les étiquettes qu'un mode pose sur le relief. */
.carte__outils { position: relative; }
.carte__modes[hidden] { display: none; }
/* La mesure (`?mesure=1`) : une ligne en haut à gauche, qui ne prend pas le doigt. */
.relief__mesure { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 6; font: var(--t-1) var(--police-corps); color: var(--parchemin-clair); background: color-mix(in srgb, var(--pierre-1) 80%, transparent); padding: var(--e-1) var(--e-2); border-radius: var(--rayon-case); pointer-events: none; }
/* Le volet s'ouvre à gauche des outils, pas au-dessus : au-dessus, il tomberait sous les panneaux du bord. */
.carte__modes { position: absolute; right: calc(100% + 0.4rem); bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-2); background: color-mix(in srgb, var(--pierre-1) 94%, transparent); border: 1px solid var(--or-sourd); border-radius: var(--rayon); }
/* Trois classes : la règle des outils (44 px de côté) ne doit pas prendre les boutons du volet. */
.monde__outils .carte__outils .carte__mode { width: auto; height: auto; display: block; min-height: 44px; padding: 0 var(--e-4); font: var(--t-3) var(--police-titre); color: var(--parchemin); background: transparent; border: 1px solid transparent; border-radius: var(--rayon); text-align: left; white-space: nowrap; cursor: pointer; }
.carte__mode:hover, .carte__mode:focus-visible { color: var(--or); }
.carte__mode[aria-pressed="true"] { color: var(--or); border-color: var(--or-sourd); }
.relief__etiquette--mode { font: 700 var(--t-3) var(--police-corps); color: var(--parchemin-clair); background: color-mix(in srgb, var(--pierre-1) 72%, transparent); padding: 1px var(--e-1); border-radius: var(--rayon-case); pointer-events: none; }
.relief__etiquette--mode.est-hostile, .relief__etiquette--mode.est-bande, .relief__etiquette--mode.est-siege { color: var(--perte); }
.relief__etiquette--mode.est-tienne, .relief__etiquette--mode.est-prosperite, .relief__etiquette--mode.est-ressource { color: var(--or-vif); }
.relief__etiquette--mode.est-juree { color: var(--parchemin); }
.relief__etiquette--mode.est-morts, .relief__etiquette--mode.est-gelee { color: var(--glace-clair); }

/* La parure de la carte (9 septembre 2026) : le cadre de parchemin, la rose
   des vents et la règle en lieues. Rien ne prend le doigt : tout est posé
   au-dessus de la toile et laisse passer les gestes. */
.relief__parure { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* Le cadre : un bord de papier brûlé qui tient la carte. Sans lui, les coins
   de l'écran montraient le vide noir au-delà du monde. */
.relief__cadre {
  position: absolute; inset: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--parchemin) 18%, transparent),
    inset 0 0 0 9px color-mix(in srgb, var(--pierre-3) 55%, transparent),
    inset 0 0 0 10px color-mix(in srgb, var(--or-fonce) 50%, transparent),
    inset 0 0 54px 14px color-mix(in srgb, var(--pierre-2) 74%, transparent),
    inset 0 0 190px 60px color-mix(in srgb, var(--pierre-2) 42%, transparent);
  border-radius: var(--rayon);
}
/* Les quatre coins usés : un carré d'encre passée, comme un papier plié. */
.relief__cadre::before, .relief__cadre::after {
  content: ''; position: absolute; width: 54px; height: 54px;
  border: 2px solid color-mix(in srgb, var(--or) 80%, transparent);
}
.relief__cadre::before { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
.relief__cadre::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }

.relief__boussole { position: absolute; right: 6.2rem; bottom: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); }
.relief__rose { width: 104px; height: 104px; opacity: 0.9; filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--pierre-0) 70%, transparent)); }
.relief__rose-cercle { fill: none; stroke: var(--or-vif); stroke-width: 1.1; opacity: 0.6; }
.relief__rose-branche { fill: var(--parchemin); stroke: var(--pierre-4); stroke-width: 0.9; }
.relief__rose-branche.est-courte { fill: var(--or-fonce); }
.relief__rose-branche.est-nord { fill: var(--or); }
.relief__rose-nord { fill: var(--parchemin-clair); font: 700 var(--t-2) var(--police-titre); letter-spacing: 0.06em; }

.relief__echelle { display: flex; flex-direction: column; align-items: center; gap: var(--e-0); }
/* La règle : cinq divisions pleines et vides, comme sur une carte gravée. */
.relief__echelle-barre {
  height: 8px; min-width: 40px;
  border: 1px solid color-mix(in srgb, var(--pierre-2) 85%, transparent);
  background:
    repeating-linear-gradient(90deg, var(--parchemin) 0 20%, var(--cuir) 20% 40%);
  box-shadow: var(--ombre-1);
}
.relief__echelle-texte { font: var(--t-1) var(--police-corps); color: var(--parchemin-clair); text-shadow: var(--ombre-texte); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .relief__boussole { right: 4.4rem; bottom: 0.8rem; }
  .relief__rose { width: 62px; height: 62px; }
  .relief__cadre { box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--pierre-3) 50%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--or-fonce) 45%, transparent), inset 0 0 34px 8px color-mix(in srgb, var(--pierre-2) 55%, transparent); }
  .relief__cadre::before, .relief__cadre::after { width: 30px; height: 30px; }
}

/* Les noms sur le parchemin (9 septembre 2026, points 52, 53, 59 et 60).
   Au loin la carte est un papier : une plaque sombre sous chaque nom s'y lit
   comme une étiquette de site web. Le nom passe à l'encre, avec un halo de
   papier qui le décolle. De près le terrain est sombre et varié : la plaque
   reste, c'est elle qui rend les noms lisibles par-dessus une forêt. */
.monde__vue[data-niveau="continent"] .relief__etiquette,
.monde__vue[data-niveau="royaumes"] .relief__etiquette {
  color: var(--bois-sombre);
  background: none;
  box-shadow: none;
  text-shadow:
    0 0 3px color-mix(in srgb, var(--parchemin-clair) 95%, transparent), 0 0 7px color-mix(in srgb, var(--parchemin-clair) 85%, transparent),
    0 0 14px color-mix(in srgb, var(--parchemin) 70%, transparent), 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 60%, transparent);
}
.monde__vue[data-niveau="continent"] .relief__etiquette--terre,
.monde__vue[data-niveau="royaumes"] .relief__etiquette--terre {
  color: var(--bois-sombre);
  letter-spacing: 5px;
}
.monde__vue[data-niveau="continent"] .relief__etiquette--terre.est-tienne,
.monde__vue[data-niveau="royaumes"] .relief__etiquette--terre.est-tienne { color: var(--or-fonce); }

/* La taille du nom dit le rang du lieu : une capitale ne s'écrit pas comme un
   village. Tous les noms avaient la même taille. */
.relief__etiquette--ville { font-size: var(--t-4); }
.relief__etiquette--ville.est-grande { font-size: var(--t-5); letter-spacing: 0.8px; }
.relief__etiquette--ville.est-capitale { font-size: var(--t-6); letter-spacing: 1.4px; }
.relief__etiquette--fief { font-size: var(--t-3); opacity: 0.94; }

/* La marque devant le nom : elle dit d'un coup d'œil ce que le lieu est. */
.relief__etiquette--ville::before,
.relief__etiquette--siege::before {
  content: '\2302';
  margin-right: 0.34em;
  opacity: 0.72;
  font-weight: 400;
}
.relief__etiquette--ville.est-port::before { content: '\2693'; }
.relief__etiquette--ville.est-ile::before { content: '\2693'; }
.relief__etiquette--siege::before { content: '\265B'; opacity: 0.9; }

/* Un nom qui paraît se fond, il ne saute pas. */
@keyframes relief-nom-parait { from { opacity: 0; } to { opacity: 1; } }
.relief__etiquette--terre, .relief__etiquette--ville, .relief__etiquette--siege {
  animation: relief-nom-parait 0.4s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .relief__etiquette--terre, .relief__etiquette--ville, .relief__etiquette--siege { animation: none; }
}

/* Le petit plan du monde et la recherche d'un lieu (points 65 et 69). */
.relief__plan {
  position: absolute; left: 0.9rem; bottom: 1rem;
  padding: var(--e-1); border: 1px solid color-mix(in srgb, var(--or) 60%, transparent);
  background: color-mix(in srgb, var(--pierre-2) 75%, transparent); border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
}
.relief__plan-fond { display: block; opacity: 0.85; }
.relief__plan-cadre {
  position: absolute; left: 4px; top: 4px;
  border: 1px solid var(--or-vif); box-shadow: 0 0 6px color-mix(in srgb, var(--or-vif) 50%, transparent);
  pointer-events: none;
}
/* Le champ de recherche passait sous le bandeau du haut, qui tient quatre rems
   et demie : on ne pouvait ni le lire ni le prendre. Il descend sous le volet
   « à traiter », a gauche, ou rien ne le couvre. */
.relief__chercher { position: absolute; left: 0.9rem; top: 9.5rem; width: 13rem; pointer-events: auto; z-index: 5; }
.relief__chercher-champ {
  width: 100%; min-height: 40px; padding: 0 var(--e-2);
  font: var(--t-3) var(--police-corps); color: var(--parchemin-clair);
  background: color-mix(in srgb, var(--pierre-2) 82%, transparent); border: 1px solid color-mix(in srgb, var(--or) 50%, transparent);
  border-radius: var(--rayon-case); outline: none;
}
.relief__chercher-champ::placeholder { color: color-mix(in srgb, var(--parchemin) 55%, transparent); }
.relief__chercher-champ:focus { border-color: var(--or); box-shadow: 0 0 0 2px color-mix(in srgb, var(--or-vif) 20%, transparent); }
.relief__chercher-liste {
  margin: var(--e-1) 0 0; padding: var(--e-1); list-style: none;
  background: color-mix(in srgb, var(--pierre-1) 96%, transparent); border: 1px solid color-mix(in srgb, var(--or) 45%, transparent); border-radius: var(--rayon-case);
}
.relief__chercher-choix {
  display: block; width: 100%; min-height: 38px; padding: 0 var(--e-2);
  font: var(--t-3) var(--police-corps); color: var(--parchemin-clair); text-align: left;
  background: none; border: 0; border-radius: var(--rayon); cursor: pointer;
}
.relief__chercher-choix:hover, .relief__chercher-choix:focus-visible { color: var(--parchemin-clair); background: color-mix(in srgb, var(--or-vif) 16%, transparent); }
@media (max-width: 720px) {
  .relief__plan { left: 0.5rem; bottom: 0.6rem; transform: scale(0.78); transform-origin: left bottom; }
  .relief__chercher { width: 9.5rem; left: 0.5rem; top: 8.5rem; }
}

/* Les noms de mer (point 57) : plus clairs, plus espacés, en italique de
   carte marine, pour qu'ils ne se confondent pas avec les noms de terre. */
.relief__etiquette--terre.est-mer { color: var(--parchemin-clair); font-style: italic; letter-spacing: 6px; opacity: 0.9; }
.monde__vue[data-niveau="continent"] .relief__etiquette--terre.est-mer,
.monde__vue[data-niveau="royaumes"] .relief__etiquette--terre.est-mer {
  color: var(--cuir-clair);
  text-shadow: 0 0 4px color-mix(in srgb, var(--parchemin) 90%, transparent), 0 0 10px color-mix(in srgb, var(--parchemin) 70%, transparent);
}

/* Le nom de chaque commande (9 septembre 2026, point 62 des cent points).
   Sept ronds identiques ne disaient rien, et leur nom tenait dans une
   infobulle, qui n'existe pas au doigt. Le nom se pose sur une plaque de fer
   à gauche du bouton, au survol, au doigt et au clavier. */
.carte__outil { position: relative; display: grid; place-items: center; }
.carte__outil-signe { display: block; line-height: 1; }
.carte__outil-nom {
  position: absolute; right: calc(100% + 0.45rem); top: 50%; transform: translateY(-50%) translateX(6px);
  z-index: 7; padding: var(--e-1) var(--e-2); white-space: nowrap;
  font: var(--t-2)/1.1 var(--police-titre); letter-spacing: 0.02em; color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--cuir), var(--pierre-3));
  border: 1px solid var(--bois); border-radius: var(--rayon-case);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin) 16%, transparent), var(--ombre-2);
  opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease;
}
.carte__outil:hover .carte__outil-nom,
.carte__outil:focus-visible .carte__outil-nom,
.carte__outil:active .carte__outil-nom { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Au doigt, il n'y a pas de survol : le nom reste posé sous le signe. */
@media (hover: none) {
  .carte__outil-nom {
    position: static; transform: none; opacity: 1; padding: 0 var(--e-1);
    font-size: var(--t-1); letter-spacing: 0; max-width: 46px; overflow: hidden;
    text-overflow: ellipsis; background: none; border: 0; box-shadow: none; color: var(--parchemin-bas);
  }
}
@media (prefers-reduced-motion: reduce) { .carte__outil-nom { transition: none; } }

/* Le bandeau du haut se réduit dans le pays (9 septembre 2026, point 70 des
   cent points). Il tenait 4,5 rem sur tous les écrans, et au cran ville il
   mangeait le sixième de la carte. Au cran ville et au ras du sol il tombe à
   2,6 rem : le nom, le jour et les réserves y tiennent encore. */
html[data-carte-proche="1"][data-vue="jeu"] #jeu .bandeau {
  height: 2.6rem; min-height: 2.6rem; max-height: 2.6rem;
  padding-block: var(--e-0); opacity: 0.9;
  transition: height 180ms ease, min-height 180ms ease, max-height 180ms ease, opacity 180ms ease;
}
html[data-carte-proche="1"][data-vue="jeu"] #jeu .bandeau:hover,
html[data-carte-proche="1"][data-vue="jeu"] #jeu .bandeau:focus-within { opacity: 1; }
html[data-carte-proche="1"][data-vue="jeu"] #jeu .bandeau__logo { width: 2rem; height: 1.6rem; }
html[data-carte-proche="1"][data-vue="jeu"] #jeu .tresor { min-height: 2.1rem; padding-block: var(--e-0); }
html[data-carte-proche="1"][data-vue="jeu"] #jeu .tresor__marque { width: 1.7rem; height: 1.7rem; }
html[data-carte-proche="1"][data-vue="jeu"] #jeu .tresor__stock { font-size: var(--t-4); }
html[data-carte-proche="1"][data-vue="jeu"] #jeu .tresor__debit { font-size: var(--t-1); }
@media (prefers-reduced-motion: reduce) {
  html[data-carte-proche="1"][data-vue="jeu"] #jeu .bandeau { transition: none; }
}

/* Le réglage du son, sur la carte (9 septembre 2026, point 90 des cent
   points). Il fallait quitter la carte pour couper le son. Le volet s'ouvre à
   gauche du bouton, comme celui des modes. */
.carte__son {
  position: absolute; right: calc(100% + 0.4rem); bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--pierre-1) 94%, transparent); border: 1px solid var(--or-sourd); border-radius: var(--rayon);
}
.carte__son[hidden] { display: none; }
.monde__outils .carte__outils .carte__son-coupure {
  width: auto; height: auto; min-height: 40px; padding: 0 var(--e-4); white-space: nowrap;
  font: var(--t-3) var(--police-titre); color: var(--parchemin);
  background: transparent; border: 1px solid transparent; border-radius: var(--rayon); cursor: pointer;
}
.carte__son-coupure:hover, .carte__son-coupure:focus-visible { color: var(--or); border-color: var(--or-sourd); }
.carte__son-coupure[aria-pressed="true"] { color: var(--perte); }
.carte__son-niveau { width: 11rem; accent-color: var(--or); cursor: pointer; }

/* Les filtres de la carte (9 septembre 2026, point 66 des cent points). Le
   volet s'ouvre a gauche de son bouton, comme celui des modes et du son. */
.carte__filtres {
  position: absolute; right: calc(100% + 0.4rem); bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: var(--e-0); padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--pierre-1) 94%, transparent); border: 1px solid var(--or-sourd); border-radius: var(--rayon);
}
.carte__filtres[hidden] { display: none; }
.carte__filtre {
  display: flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 0 var(--e-1);
  font: var(--t-3) var(--police-titre); color: var(--parchemin); white-space: nowrap; cursor: pointer;
}
.carte__filtre:hover { color: var(--or); }
.carte__filtre input { width: 17px; height: 17px; accent-color: var(--or); cursor: pointer; }

/* Les noms de terre suivent la forme du pays (9 septembre 2026, point 54 des
   cent points). Ils etaient horizontaux et droits, poses comme des etiquettes
   de classeur sur une carte a la plume. Chaque nom se couche dans le sens ou
   sa terre s'etale, et ses lettres montent sur un arc leger. */
.relief__arc { display: inline-block; transform: rotate(var(--tour, 0deg)); transform-origin: 50% 50%; }
.relief__arc-lettre { display: inline-block; transform-origin: 50% 90%; }

/* Le sous-titre d'un nom (9 septembre 2026, point 58 des cent points). Le nom
   d'une maison ne disait pas ce qu'elle tient, et une cite ne disait pas de
   quel royaume elle est. Le sous-titre passe dessous, en plus petit. */
.relief__etiquette-sous {
  display: block; width: 100%;
  font: italic 0.72em var(--police-corps); letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--parchemin) 72%, transparent); text-transform: none;
}
.relief__etiquette--siege .relief__etiquette-sous { color: color-mix(in srgb, var(--or-vif) 68%, transparent); }

/* La vie qui passe se réduit à sa pastille (9 septembre 2026). Au-dessus de
   Winterfell, cinq noms s'empilaient sur la même ville sans qu'aucun n'en
   recouvre un autre : on ne lisait plus rien. Une patrouille, une caravane,
   une flotte montrent leur signe et leur nombre ; le nom entier revient au
   survol, au clavier et sous le doigt. Le lecteur d'écran le lit
   toujours, lui : rien n'est retiré de la page. */
.relief__etiquette.est-courte {
  padding: var(--e-0) var(--e-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.relief__etiquette-bref { display: inline-block; min-width: 1.4em; text-align: center; }
.relief__etiquette-bref + .relief__etiquette-long {
  /* Le nom reste dans la page pour qui l'écoute, mais ne prend pas de place. */
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.relief__etiquette.est-courte:hover .relief__etiquette-long,
.relief__etiquette.est-courte:focus-visible .relief__etiquette-long,
.relief__etiquette.est-courte:active .relief__etiquette-long {
  position: static;
  width: auto; height: auto;
  margin-inline-start: 0.4em;
  overflow: visible;
  clip-path: none;
}

/* Le nom d'un relief (9 septembre 2026). Les trente rivières portaient déjà
   leur nom dans les données sans qu'aucune ne l'écrive, et les seize chaînes
   et onze forêts n'en avaient pas du tout. Un relief se nomme plus bas qu'une
   terre : il est un détail du pays, pas le pays. En italique et à l'encre,
   comme sur une carte à la plume, pour ne pas se confondre avec une ville. */
.relief__etiquette--relief {
  font: 400 italic var(--t-3) var(--police-titre);
  letter-spacing: 1.2px;
  color: var(--parchemin-bas);
  text-shadow: var(--ombre-texte);
  opacity: 0.94;
  pointer-events: none;
}
.relief__etiquette--relief.est-montagne { color: var(--parchemin); letter-spacing: 1.6px; }
.relief__etiquette--relief.est-foret { color: var(--parchemin-bas); }
/* L'eau prend le bleu de l'eau, sinon un nom de rivière se lit comme un bois. */
.relief__etiquette--relief.est-riviere,
.relief__etiquette--relief.est-lac { color: var(--texte); font-size: var(--t-3); }
/* Au cran des royaumes, une chaîne et une forêt se lisent de loin. */
.monde__vue[data-niveau="royaumes"] .relief__etiquette--relief.est-montagne,
.monde__vue[data-niveau="royaumes"] .relief__etiquette--relief.est-foret { font-size: var(--t-5); }
/* Le nom du Mur : la glace, pas le parchemin. */
.relief__etiquette--terre.est-mur {
  color: var(--parchemin-clair);
  letter-spacing: 4px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--texte) 55%, transparent), var(--ombre-texte);
}
/* Un seigneur réduit garde son écriture en petites capitales : la pastille
   courte des patrouilles est un signe, celle d'un seigneur est un nom. */
.relief__etiquette--seigneur.est-courte { padding-inline: 0.35em; }
.relief__etiquette--seigneur .relief__etiquette-bref { min-width: 0; }