/* ── Pages et onglets (refonte : plus de fenêtres) ─────────────────────── */

.onglets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--e-1);
  padding: 0.35rem var(--gouttiere);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 18%, transparent);
  background: var(--pierre-1);
}
.onglet {
  background: none;
  border: 0;
  /* 44 px de haut : ce sont les 17 boutons les plus touchés du jeu. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--e-2) var(--e-3) var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texte-pale);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.onglet:hover { color: var(--or); }
.onglet.est-actif { color: var(--or); border-bottom-color: var(--or); }
.onglet--nuit { color: var(--glace); }
.onglet--nuit.est-actif { color: var(--glace); border-bottom-color: var(--glace); }

.page {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 3.5rem;
  color: var(--texte);
}
.page .dialogue__entete {
  position: static;
  grid-template-columns: 1fr auto;
  padding: var(--e-5) 0 var(--e-4);
  margin-bottom: var(--e-4);
  background: none;
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 25%, transparent);
}
.page .dialogue__titre { font-size: clamp(1.5rem, 3.2vw, 2rem); }
.page .dialogue__fermer {
  align-self: center;
  grid-row: auto;
  width: auto;
  height: auto;
  min-height: 44px;
  white-space: nowrap;
  background: none;
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-pale);
  cursor: pointer;
}
.page .dialogue__fermer:hover { color: var(--or); border-color: var(--or-sourd); }

.page .atlas { grid-template-columns: minmax(0, 1fr) 20rem; padding: 0; }
/* Sur telephone, la carte prend toute la largeur et le detail passe dessous.
   Sans cette regle, la colonne de 20rem l'emportait et la carte tombait a 4 px. */
@media (max-width: 60rem) {
  .page .atlas { grid-template-columns: minmax(0, 1fr); }
  .page .atlas .carte { max-height: none; width: 100%; height: auto; }
}
.page .atlas__carte svg, .page .atlas__carte canvas, .page .atlas__carte img { width: 100%; height: auto; }

/* Ton domaine : la vue 3D est le seuil immersif, la gestion reste juste sous
   le regard. La carte stratégique demeure plus bas, comme contexte territorial. */
.siege-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .8fr);
  gap: var(--e-4);
  align-items: stretch;
  margin-bottom: var(--e-5);
}
.siege-hero__vue { min-width: 0; }
.siege-3d {
  min-height: 0;
  aspect-ratio: 16 / 9;
  box-shadow: var(--ombre-3);
}
.siege-3d .visite__toile { height: auto; }
.siege-illustration { margin: 0; }
.siege-hero__etat {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
  padding: var(--e-4) var(--e-4);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 28%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--echelon-5) 8%, transparent), transparent 55%), var(--pierre-2);
}
.siege__mode {
  align-self: center;
  color: var(--or-sourd);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.siege-gestion { margin-top: 0; }

@media (max-width: 60rem) {
  .siege-hero { grid-template-columns: 1fr; }
  .siege-hero__etat { padding: var(--e-3); }
}

/* Gestion : une colonne de décision principale et une colonne d'actions.
   Les textes explicatifs restent secondaires ; les choix sont regroupés par
   intention pour éviter l'effet de liste administrative. */
.siege-gestion {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .85fr);
  gap: var(--e-4);
  align-items: start;
}
.gestion-batiments,
.gestion-aside > section,
.gestion-provinces {
  min-width: 0;
  padding: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--fer) 25%, transparent);
  background: color-mix(in srgb, var(--pierre-1) 68%, transparent);
}
.gestion-section__entete {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--e-4);
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 25%, transparent);
}
.gestion-section__entete .colonne__titre { margin: 0; }
.gestion-section__note {
  margin: var(--e-1) 0 0;
  color: var(--texte-pale);
  font-size: var(--t-3);
  line-height: 1.35;
}
.gestion-section__repere {
  flex: none;
  color: var(--or-sourd);
  font: var(--t-1) var(--police-titre);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gestion-aside { display: grid; gap: var(--e-4); min-width: 0; }
.gestion-aside > section > .colonne__titre,
.gestion-provinces > .colonne__titre { margin-top: 0; }
.gestion-sous-titre {
  margin: var(--e-4) 0 var(--e-2);
  padding-bottom: var(--e-1);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 18%, transparent);
  color: var(--or-sourd);
  font: var(--t-1) var(--police-titre);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.gestion-sous-titre:first-of-type { margin-top: var(--e-3); }
.gestion-provinces { grid-column: 1 / -1; }
.gestion-provinces > p { max-width: 62ch; }
.gestion-provinces #provinces-liste { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.gestion-batiments .batiments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}
.gestion-batiments .batiment { min-width: 0; padding: var(--e-3) var(--e-3); }
.gestion-batiments .batiment__dit,
.gestion-batiments .batiment__cout { font-size: var(--t-2); }
.gestion-batiments .batir { min-height: 44px; }
.economie-locale #economie-locale-etat {
  margin: var(--e-2) 0 var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--or-sourd);
  background: color-mix(in srgb, var(--echelon-5) 7%, transparent);
  color: var(--parchemin);
  font-size: var(--t-3);
  line-height: 1.4;
}
.economie-locale__actions { gap: var(--e-2); }
.economie-locale__actions button { flex: 1 1 10rem; }
.gestion-aside .colporteur { margin: 0; }

@media (max-width: 60rem) {
  .siege-gestion { grid-template-columns: 1fr; }
  .gestion-provinces { grid-column: auto; }
}
@media (max-width: 42rem) {
  .gestion-batiments .batiments { grid-template-columns: 1fr; }
  .gestion-section__entete { display: block; }
  .gestion-section__repere { display: block; margin-top: var(--e-2); }
}

/* Aide contextuelle : une porte discrète vers la compréhension, sans ajouter
   un pavé permanent au tableau de bord. */
.provinces__entete {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.provinces__entete .colonne__titre { margin: 0; }
.aide-contextuelle { position: relative; }
.aide-contextuelle summary {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon-rond);
  color: var(--or);
  font: var(--t-2) var(--police-titre);
  cursor: pointer;
  list-style: none;
}
.aide-contextuelle summary::-webkit-details-marker { display: none; }
.aide-contextuelle summary:hover,
.aide-contextuelle[open] summary { color: var(--pierre-1); background: var(--or); }
.aide-contextuelle__corps {
  position: absolute;
  z-index: 10;
  top: calc(100% + .6rem);
  left: 0;
  width: min(22rem, calc(100vw - 3rem));
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--or-sourd);
  border-radius: var(--rayon-case);
  background: var(--pierre-3);
  box-shadow: var(--ombre-3);
  color: var(--texte);
}
.aide-contextuelle__corps::before {
  content: '';
  position: absolute;
  top: -.35rem;
  left: .45rem;
  width: .6rem;
  height: .6rem;
  border-top: 1px solid var(--or-sourd);
  border-left: 1px solid var(--or-sourd);
  background: var(--pierre-3);
  transform: rotate(45deg);
}
.aide-contextuelle__corps strong {
  display: block;
  margin-top: var(--e-3);
  color: var(--or);
  font: var(--t-1) var(--police-titre);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aide-contextuelle__corps strong:first-child { margin-top: 0; }
.aide-contextuelle__corps p { margin: var(--e-1) 0 0; font-size: var(--t-2); line-height: 1.4; }
.gestion-provinces #provinces-liste { margin-top: var(--e-3); }
.gestion-provinces .province {
  gap: var(--e-3);
  padding: var(--e-4);
  background: color-mix(in srgb, var(--pierre-3) 72%, transparent);
}
.gestion-provinces .province__nom { font: var(--t-4) var(--police-titre); }
.gestion-provinces .province__etat { line-height: 1.4; }
.gestion-provinces .province .economie-locale__actions { padding-top: var(--e-1); border-top: 1px solid color-mix(in srgb, var(--echelon-5) 15%, transparent); }

.siege__sous-titre {
  margin: var(--e-4) 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-sourd);
}
.siege__etape { margin: 0; font-family: var(--police-corps); font-size: var(--t-5); color: var(--parchemin); }
.siege__palier { margin: var(--e-1) 0 0; font-size: var(--t-3); color: var(--texte-pale); }
.siege__batiments { margin: var(--e-1) 0 0; padding-left: var(--e-4); font-size: var(--t-3); }
.siege__batiments li { margin: var(--e-0) 0; }
.siege__vide { margin: var(--e-1) 0 0; font-style: italic; color: var(--texte-pale); }

.objectif__gain {
  display: inline-block;
  margin-left: var(--e-2);
  padding: var(--e-0) var(--e-2);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 35%, transparent);
  border-radius: var(--rayon);
  font-size: var(--t-2);
  color: var(--or);
  white-space: nowrap;
}

.article__image {
  display: block;
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 auto var(--e-2);
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
}

/* Les boutons nus (route du domaine, services publics…) épousent le thème :
   le blanc du navigateur n'a pas sa place dans une salle éclairée à la bougie. */
button {
  font: inherit;
}
.economie-locale button, .provinces button, .routes button,
button:not([class]) {
  background: var(--pierre-4);
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  color: var(--texte);
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
}
.economie-locale button:hover, .provinces button:hover, .routes button:hover,
button:not([class]):hover { border-color: var(--or-sourd); color: var(--or); }
.economie-locale button:disabled, .provinces button:disabled,
button:not([class]):disabled { opacity: 0.45; cursor: not-allowed; color: var(--texte-pale); }

.refus--flottant {
  border-radius: var(--rayon);
  animation: refus-entre 0.25s ease;
}
@keyframes refus-entre {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Niveau et XP dans le bandeau, à côté du nom. */
.bandeau__niveau {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-left: var(--e-3);
  vertical-align: middle;
}
#bandeau-niveau-txt {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  white-space: nowrap;
}
.bandeau__xp {
  display: inline-block;
  width: 7rem;
  height: 0.4rem;
  background: color-mix(in srgb, var(--fer) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
  border-radius: var(--rayon);
  overflow: hidden;
}
.bandeau__xp-barre {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--or-sourd), var(--or));
  transition: width 0.6s ease;
}
@media (max-width: 700px) { .bandeau__xp { width: 4.5rem; } }


/* ============ La grand-salle (refonte accueil) ============ */

/* Le fond du jeu derriere toute la salle, sous un voile leger */
.fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url(../images/accueil-background.webp) center top/cover no-repeat;
}
.fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--pierre-2) 10%, transparent), color-mix(in srgb, var(--pierre-1) 38%, transparent) 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-1) 5%, transparent), color-mix(in srgb, var(--pierre-1) 62%, transparent) 88%);
}
@media (max-width: 60rem) {
  .fond { background-image: url(../images/accueil-background-mobile.webp); }
}
.jeu { position: relative; }
.page, .etat-reseau { position: relative; z-index: 2; }

/* Socle HUD : bandeau + onglets sur verre fume, colle en haut */
.hud {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Sous l'encoche du téléphone, le bandeau descend d'autant. */
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 72%, transparent), color-mix(in srgb, var(--pierre-1) 55%, transparent));
  backdrop-filter: blur(10px) saturate(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 35%, transparent);
  box-shadow: var(--ombre-3);
}
.hud .bandeau { border-bottom: 0; background: none; }
.hud .onglets { border-bottom: 0; justify-content: center; max-width: none; }

/* L'onglet du froid : une plaque de glace au milieu des onglets */
.onglet--nuit {
  color: var(--glace-clair);
  border-bottom: 0;
  margin: 0 var(--e-1);
  padding: var(--e-2) var(--e-3);
  align-self: center;
  background: linear-gradient(180deg, var(--glace-fond) 0%, var(--glace-ardoise) 55%, var(--glace-nuit) 100%);
  border: 1px solid var(--glace);
  border-radius: var(--rayon-case);
  text-shadow: 0 0 10px color-mix(in srgb, var(--glace) 90%, transparent), 0 0 22px color-mix(in srgb, var(--glace) 50%, transparent);
  animation: froid-halo 3.2s ease-in-out infinite;
}
.onglet--nuit.est-actif { color: var(--glace-clair); border-bottom: 0; border-color: var(--glace); }
.onglet--nuit:hover { color: var(--glace-clair); border-color: var(--glace); filter: brightness(1.15); }
@keyframes froid-halo {
  0%, 100% { box-shadow: 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 35%, transparent) inset, 0 -6px 12px -8px color-mix(in srgb, var(--parchemin-bas) 50%, transparent) inset, 0 0 10px color-mix(in srgb, var(--parchemin-bas) 40%, transparent), var(--ombre-2); }
  50% { box-shadow: 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 35%, transparent) inset, 0 -6px 12px -8px color-mix(in srgb, var(--parchemin-bas) 50%, transparent) inset, 0 0 22px color-mix(in srgb, var(--texte) 75%, transparent), var(--ombre-2); }
}
@media (prefers-reduced-motion: reduce) { .onglet--nuit { animation: none; } }

/* Le heros : portrait a gauche, identite a droite. Le portrait garde sa propre
   hauteur : la colonne de droite est bien plus longue que lui, et l'etirer
   creusait un grand vide sous le visage. */
.salle-hero {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) 1fr;
  gap: var(--e-5);
  align-items: start;
}
.salle-hero .portrait { margin: 0; display: flex; flex-direction: column; }
.salle-hero .portrait__image { min-height: 0; }
.salle-hero .portrait img, .salle-hero .portrait__image img { width: 100%; height: auto; object-fit: cover; object-position: 50% 14%; }
.salle-hero__texte { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }

/* Après le portrait, le joueur doit voir quoi faire avant les panneaux de
   contexte. La montée et le trésor restent accessibles juste dessous. */
.grand-salle > .salle-journee { order: 2; }
.grand-salle > .montee { order: 3; }
.grand-salle > .salle-tresor { order: 4; }

/* Sections de la salle posees sur le fond */
.salle-tresor, .salle-journee { position: relative; }
.salle-journee {
  background: linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 2%, transparent), transparent 55%), color-mix(in srgb, var(--pierre-3) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 25%, transparent);
  border-radius: var(--rayon-case);
  padding: var(--e-4) var(--e-4) var(--e-4);
}
.colonne__titre { text-shadow: var(--ombre-texte); }

/* Pages Tes quetes et La chronique */
.quetes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--e-5);
  align-items: start;
}
.journal-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  gap: var(--e-5);
  align-items: start;
}
.journal-cote { display: flex; flex-direction: column; gap: var(--e-5); min-width: 0; }
@media (max-width: 60rem) {
  .journal-grille { grid-template-columns: 1fr; }
}

/* Ton domaine : la gestion sous l'atlas */
.siege-gestion {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .85fr);
  gap: var(--e-4);
  align-items: start;
  margin-top: 0;
}

/* Priorité mobile : ces règles doivent rester après les bases de la grand-salle */
@media (max-width: 60rem) {
  .salle-hero { display: block; }
  .salle-hero .portrait { width: min(12rem, 62vw); height: auto; min-height: 0; margin: 0 auto var(--e-4); display: block; }
  .salle-hero__texte { display: flex; }
}


/* ============ Polish grand-salle (maquette v14) ============ */

/* Pastille de niveau sur le portrait */
.pastille-niv {
  position: absolute;
  top: .55rem;
  left: .55rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rayon-rond);
  display: grid;
  place-items: center;
  font: 700 var(--t-3) var(--police-titre);
  color: var(--bois-sombre);
  background: radial-gradient(circle at 35% 30%, var(--or-vif), var(--or-sourd) 70%);
  border: 2px solid var(--or-fonce);
  box-shadow: 0 0 12px color-mix(in srgb, var(--or) 40%, transparent), var(--ombre-2);
}
.salle-hero .portrait { position: relative; }

/* Le point rouge des recompenses sur l'onglet Tes quetes */
.onglet__point {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  border-radius: var(--rayon-rond);
  background: var(--cire-vif);
  margin-left: var(--e-1);
  vertical-align: .12rem;
  box-shadow: 0 0 6px color-mix(in srgb, var(--cire-vif) 80%, transparent);
}

/* L'identite : le pave se replie, la carte respire */
.identite {
  background: color-mix(in srgb, var(--pierre-1) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 22%, transparent);
  border-radius: var(--rayon-case);
  padding: var(--e-4) var(--e-4);
}
.identite__resume { color: var(--parchemin-bas); font-style: italic; }

/* Les traits : des sceaux rouges, comme la maquette */
#traits-tenus li {
  font-size: var(--t-2);
  color: var(--parchemin-bas);
  border: 1px solid color-mix(in srgb, var(--cire) 55%, transparent);
  background: color-mix(in srgb, var(--cire) 16%, transparent);
  padding: var(--e-1) var(--e-2);
  border-radius: 1rem;
}

/* Les jauges : des cartes posees sur la pierre */
.salle-hero .jauges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.salle-hero .jauge {
  text-align: left;
  background: color-mix(in srgb, var(--pierre-3) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 20%, transparent);
  border-radius: var(--rayon-case);
  padding: var(--e-2) var(--e-3);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 5%, transparent) inset, var(--ombre-1);
}
.salle-hero .jauge dd { font-size: var(--t-4); color: var(--parchemin); }
.salle-hero .jauge--experience { grid-column: 1 / -1; }

/* La montee : bordure de cire, fond chauffe, comme la maquette */
.salle-hero .montee, .grand-salle > .montee {
  border: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
  border-left: 3px solid var(--cire, var(--cire));
  border-radius: var(--rayon-case);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cire) 14%, transparent), transparent 70%), color-mix(in srgb, var(--pierre-3) 85%, transparent);
  padding: var(--e-3) var(--e-4);
}

/* Le pave « Ce qui depend de toi » se fait discret */
.identite__consequences { font-size: var(--t-2); }
.identite__consequences ul { gap: var(--e-1); }

/* Le trésor en cartes horizontales, comme la maquette */
.salle-tresor .ressources { flex-direction: row; flex-wrap: wrap; gap: var(--e-2); }
.salle-tresor .ressource {
  grid-template-columns: auto auto auto;
  gap: var(--e-2);
  min-width: 9rem;
  background: color-mix(in srgb, var(--pierre-3) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 20%, transparent);
  border-radius: var(--rayon-case);
  padding: var(--e-2) var(--e-3);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 5%, transparent) inset, var(--ombre-1);
}


/* ============ Fidelite maquette : tresor + pave replie ============ */
.identite__consequences summary {
  cursor: pointer;
  color: var(--or);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: var(--e-1) 0;
}
.identite__consequences[open] summary { margin-bottom: var(--e-1); }

.salle-tresor .ressource {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  border-bottom: 0;
  min-width: 10rem;
}
.salle-tresor .ressource__icone { font-size: var(--t-3); filter: grayscale(.15) sepia(.25); }
.salle-tresor .ressource__nom { font-size: var(--t-1); letter-spacing: .1em; }
.salle-tresor .ressource__stock { margin-left: auto; font-weight: 700; font-size: var(--t-4); }
.salle-tresor .ressource__debit { min-width: 0; font-size: var(--t-2); color: var(--gain); }
.salle-tresor .ressource__debit.est-negatif { color: var(--perte); }
.salle-tresor .ressource.est-en-alerte {
  border: 1px solid color-mix(in srgb, var(--cire-vif) 60%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cire-vif) 25%, transparent), var(--ombre-1);
}


/* ============ Toutes les pages posees sur la pierre ============ */
/* Le fond du jeu reste visible sur les bords ; le contenu repose sur un
   grand panneau sombre, le meme langage que la salle-journee. */
.page {
  background: linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 2%, transparent), transparent 55%), color-mix(in srgb, var(--pierre-2) 93%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 25%, transparent);
  border-radius: var(--rayon-case);
  box-shadow: var(--ombre-3);
  margin: var(--e-5) auto 2.6rem;
  padding: 0 var(--e-5) var(--e-6);
}
.page .dialogue__entete { padding-top: var(--e-5); }

/* La Longue Nuit garde son identite : le meme panneau, mais glace */
#nuit.page {
  background: linear-gradient(180deg, color-mix(in srgb, var(--glace) 4%, transparent), transparent 45%), color-mix(in srgb, var(--glace-nuit) 94%, transparent);
  border-color: color-mix(in srgb, var(--glace) 30%, transparent);
}
#nuit.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--glace) 30%, transparent); }

/* Les cases interieures reprennent du corps (elles etaient trop diaphanes) */
.objectif { background: color-mix(in srgb, var(--pierre-2) 62%, transparent); border-color: color-mix(in srgb, var(--fer) 32%, transparent); }
.campagne__arc { background: color-mix(in srgb, var(--pierre-2) 55%, transparent); border-color: color-mix(in srgb, var(--fer) 32%, transparent); }
.evenement-mondial { background: color-mix(in srgb, var(--pierre-2) 60%, transparent); }
.priorites { background: color-mix(in srgb, var(--pierre-2) 66%, transparent); }

@media (max-width: 60rem) {
  .page { margin: var(--e-3) var(--e-2) var(--e-6); padding: 0 var(--e-3) var(--e-5); }
}

/* Accueil joueur : un rail de navigation et une page de décision compacte.
   Les onglets ne doivent jamais doubler la hauteur du jeu. */
.hud .bandeau {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  max-width: 84rem;
  min-height: 3.7rem;
  margin: 0 auto;
  padding: .35rem var(--gouttiere);
  gap: var(--e-1) var(--e-3);
}
.bandeau__logo { width: clamp(2.8rem, 4vw, 4.25rem); }
.bandeau__jour, .bandeau__rang { font-size: var(--t-1); letter-spacing: .1em; }
.bandeau__nom { font-size: clamp(1.05rem, 2vw, 1.35rem); overflow: hidden; text-overflow: ellipsis; }
.hud nav.onglets {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: none;
  padding: .15rem var(--gouttiere) .25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hud .onglets::-webkit-scrollbar { display: none; }
.hud .onglet { flex: 0 0 auto; min-height: 2.2rem; padding: var(--e-1) var(--e-2); font-size: var(--t-1); letter-spacing: .08em; white-space: nowrap; }
.hud .onglet--nuit { margin: 0 var(--e-0); padding: var(--e-1) var(--e-2); }

.colonnes.grand-salle { max-width: 82rem; gap: var(--e-4); padding-top: var(--e-4); }
.salle-hero {
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: var(--e-4);
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--e-3);
  background: color-mix(in srgb, var(--pierre-1) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 22%, transparent);
}
.salle-hero__texte { gap: var(--e-3); justify-content: space-between; }
.salle-hero .portrait figcaption { margin-top: var(--e-1); }
.identite { padding: var(--e-3) var(--e-3); }
.identite__resume { margin: var(--e-1) 0 var(--e-2); }
.salle-hero .jauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.salle-hero .jauge--experience { grid-column: 1 / -1; }

.demeure-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: var(--e-4);
  align-items: start;
}
.demeure-appuis { display: grid; gap: var(--e-4); }
.demeure-appuis .montee, .demeure-appuis .salle-tresor, .demeure-fiche {
  padding: var(--e-3);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 22%, transparent);
  background: color-mix(in srgb, var(--pierre-1) 74%, transparent);
}
.demeure-appuis .montee { border-left: 3px solid var(--cire); }
.salle-journee { min-height: 0; padding: var(--e-4) var(--e-4); }
.journee__intro { max-width: 58ch; margin: calc(-1 * var(--e-0)) 0 var(--e-3); color: var(--texte-pale); }
.priorites { margin-bottom: var(--e-3); }
.demeure-fiche { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(14rem, .7fr); gap: var(--e-4); }
.demeure-fiche .competences { display: block; }

@media (max-width: 60rem) {
  .hud .bandeau { grid-template-columns: auto 1fr auto; min-height: 3.3rem; }
  /* Sur petit ecran, le bandeau manque de place. On sacrifie le numero du jour,
     qui se retrouve ailleurs, mais pas l'age : le personnage vieillit et meurt,
     et c'est la seule ligne qui le dit. */
  .bandeau__jour { display: inline; }
  .bandeau__jour #jour, .bandeau__separateur { display: none; }
  .bandeau__nom { grid-column: auto; grid-row: auto; white-space: nowrap; }
  .bandeau__rang { grid-column: auto; grid-row: auto; }
  .bandeau__compte-etat { display: none; }
  .salle-hero { max-width: none; }
  .demeure-grille, .demeure-fiche { grid-template-columns: 1fr; }
  .salle-hero .jauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Les cinq curseurs du caractère ────────────────────────────────────── */
.axes__dit { margin: var(--e-2) 0 var(--e-1); font-size: var(--t-2); color: var(--texte-pale); }
.axes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.axe { border-top: 1px solid var(--fer-sombre); padding-top: var(--e-2); }
.axe__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.axe__nom { font-family: var(--police-titre); }
.axe__trait { font-size: var(--t-2); color: var(--or-sourd); }
.axe__barre { position: relative; height: 0.4rem; margin: var(--e-2) 0 var(--e-1); border-radius: var(--rayon);
  background: linear-gradient(90deg, var(--cire) 0%, var(--fer-sombre) 50%, var(--or) 100%); }
.axe__curseur { position: absolute; top: -0.18rem; width: 0.36rem; height: 0.76rem; border-radius: var(--rayon);
  background: var(--parchemin); transform: translateX(-50%); }
.axe__bouts { display: flex; justify-content: space-between; font-size: var(--t-1); color: var(--texte-pale); }
.axe__manque { margin: var(--e-1) 0 0; font-size: var(--t-2); color: var(--texte-pale); }

/* ── L'entete d'un ecran, compacte ─────────────────────────────────────────
   Elle prenait quatre cent trente pixels avant le premier onglet : un titre
   de trois centimetres, sa note, son mode, et le bouton de retour. Sur un
   telephone couche de 390 pixels de haut, elle prenait tout l'ecran. Titre,
   note et retour tiennent maintenant sur une ligne. */
.page .dialogue__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-4);
  padding: var(--e-3) 0 var(--e-2);
  margin-bottom: var(--e-3);
}
.page .dialogue__titre {
  flex: 0 1 auto;
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}
.page .dialogue__note { flex: 1 1 12rem; margin: 0; font-size: var(--t-3); }
.page .dialogue__fermer { flex: 0 0 auto; margin-left: auto; align-self: center; }

/* L'ecran du domaine avait sa propre grille d'entete, plus haute encore. */
#siege.page .dialogue__entete {
  display: flex;
  grid-template-columns: none;
  align-items: baseline;
  padding: var(--e-3) 0 var(--e-2);
  margin-bottom: var(--e-3);
}
#siege.page .dialogue__titre { font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.2; }
#siege.page .dialogue__note { grid-column: auto; margin: 0; }
#siege.page .siege__mode { grid-column: auto; grid-row: auto; margin: 0; font-size: var(--t-2); }
#siege.page .dialogue__fermer { grid-column: auto; grid-row: auto; margin-left: auto; }

/* Sur un ecran court, la note et le mode s'effacent : le titre et le retour suffisent. */
@media (max-height: 30rem) {
  .page .dialogue__note, #siege.page .siege__mode { display: none; }
  .page .dialogue__entete { padding: var(--e-2) 0 var(--e-2); margin-bottom: var(--e-2); }
}


/* ── Le bandeau d illustration ───────────────────────────────────────────────
   🔴 Mot du proprietaire le 16/09/2026 : « faut illustrer les pages aussi je
   veux pas un ramassis de ligne en mode Wikipedia », puis « Je veux que des
   illus tire de Game of Thrones pas d inventions et pas d images avec du
   brut ». Les images viennent donc de la serie, prises par
   `outils/references-des-cites.mjs`, et aucune ne montre le visage d un acteur
   au premier plan : des rangs casques, un heaume qu on ferme, un parchemin, un
   heaume de la Garde Royale, une charge vue de dos.

   🔴 Un BANDEAU et pas un fond de page. En fond, `background-size` n en
   montrait que le ciel : une page qui defile etire l image sur toute sa
   hauteur, et le sujet tombait hors du champ visible. Une illustration se
   regarde, donc elle a sa place et sa hauteur.

   🔴 Et le webp se fabrique avec `-c:v libwebp`, jamais avec le `-quality` seul
   de ffmpeg. Le second rend un fichier que `ffprobe` lit en 1 920 sur 1 080 et
   que le navigateur charge sans erreur, `naturalWidth` a 1 920 et `complete` a
   vrai, mais qu il peint tout noir. */
/* 🔴 Le trait dore est sur l IMAGE et pas sur la figure. Avec le cadre sur la
   figure, `width: fit-content` prend la largeur NATIVE de l image (1 920) et
   pas celle qu elle fait une fois bornee en hauteur : l illustration de la
   famille mesurait 691 pixels de large dans un encadrement de 1 400, donc 709
   pixels de fond noir dans un cadre dore. Mesure du 16/09/2026. */
.illus {
  position: relative;
  margin: 0 auto var(--e-5);
}

/* 🔴 L image se voit ENTIERE. Troisieme mot du proprietaire le 16/09/2026 :
   « Attention au cadrage qu on voit bien et que les images soient pas
   coupes ». Le premier jet posait une hauteur fixe et `object-fit: cover`, donc
   chaque image perdait le haut ou le bas de son sujet : les epees du trone, le
   heaume, le bas du parchemin. La hauteur suit maintenant l image.

   `max-width` la borne a sa largeur NATIVE : etiree au-dela, une image de 896
   pixels dans une page de 1 224 devient floue. */
.illus img {
  display: block;
  margin-inline: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  /* La hauteur est bornee pour que l illustration ne repousse pas le contenu :
     a 100 % de large, l image de la forge faisait 814 pixels de haut. L image
     garde son rapport, donc elle reste entiere et se centre.
     🔴 22/09/2026 : la borne suit aussi la hauteur de l ecran. A 460 pixels sur
     un ecran de 900, l illustration prenait 60 % de la vue et le premier geste
     de « Tes hommes » tombait a 974 pixels, sous la ligne de flottaison. Un
     tiers de la vue garde l image entiere et grande, et l etat de l ecran
     remonte ; sur un grand ecran, la borne reste 460. */
  max-height: min(460px, 34vh);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 30%, transparent);
  border-radius: var(--rayon-case);
  background: var(--pierre-0);
}

/* 🔴 Les bornes sont en PIXELS et pas en rem. La racine du jeu ne vaut pas 16
   pixels : une illustration bornée à 56rem a rendu 1 201 pixels pour
   une image large de 896, donc etiree d un tiers et floue. Chaque borne est la
   largeur NATIVE de son image.

   🔴 Et jamais sans `100 %` : la borne ci-dessous remplace celle de `.illus img`
   (meme poids, ecrite apres). Avec la largeur native seule, le telephone tirait
   la largeur de la hauteur bornee (460 × 1,5 = 690 pixels pour le heaume) :
   l image depassait l ecran de 300 a 700 pixels et la page la coupait a droite.
   Releve du 22/09/2026, onze ecrans sur 390 pixels. */
.illus--trone img { max-height: min(520px, 40vh); max-width: min(100%, 1920px); }
.illus--guerre img { max-width: min(100%, 1920px); }
.illus--forge img { max-width: min(100%, 1536px); }
.illus--hommes img { max-width: min(100%, 1280px); }
.illus--quetes img { max-width: min(100%, 1200px); }
.illus--famille img { max-width: min(100%, 1920px); max-height: min(560px, 38vh); }
.illus--classements img { max-width: min(100%, 1800px); }
.illus--alliances img { max-width: min(100%, 1400px); }
.illus--actes img { max-width: min(100%, 1200px); }
.illus--tournois img { max-width: min(100%, 1320px); max-height: min(560px, 38vh); }