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


/* ── Le panneau de la file ───────────────────────────────────────────────
   La planche montre un seul grand cadre : un titre sur ruban de parchemin,
   six etats en file avec leur fanion, un rail dore qui les relie, et sous
   chacun une fiche. Le panneau se pose en tete de la page du domaine. */

.domaine-chemin {
  margin: 0 0 var(--e-5);
  padding: var(--e-6) var(--e-4) var(--e-4);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--bois) 28%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
}

/* La vue du domaine d'aujourd'hui, posee au fond du panneau : floutee, sombre,
   et voilee par le bas pour que les fiches restent lisibles par-dessus. */
.domaine-chemin__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center 30%;
  background-size: cover;
  filter: blur(4px) saturate(0.7);
  opacity: 0.22;
  transform: scale(1.06);
  pointer-events: none;
  /* Le flou deborde de sa boite, et le ruban de titre passe par-dessus le bord
     haut du panneau : une coupe posee sur le panneau lui trancherait la tete.
     La coupe reste donc sur le fond seul. */
  clip-path: inset(0);
}

/* Le contenu passe au-dessus du fond. Sans ce rappel, le ruban et la file
   restaient derriere l'image. */
.domaine-ruban,
.domaine-chemin__dit,
.domaine-chemin__file {
  position: relative;
  z-index: 1;
}


/* ── Le ruban de parchemin ───────────────────────────────────────────────
   Le titre des planches est ecrit sur une bande de parchemin posee a cheval
   sur le bord haut du cadre. Les deux bouts se replient vers le bas : deux
   pseudo-elements sombres suffisent, sans une seule image. */

.domaine-ruban {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  z-index: 1;
  margin: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--pierre-0) 65%, transparent));
}

.domaine-ruban__mot {
  display: block;
  padding: var(--e-1) 2.6rem;
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--pierre-4);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 50%, transparent);
  background:
    radial-gradient(120% 140% at 30% 0%, color-mix(in srgb, var(--parchemin-clair) 75%, transparent), transparent 62%),
    linear-gradient(180deg, var(--parchemin-clair), var(--parchemin-bas));
  border: 1px solid color-mix(in srgb, var(--bois) 70%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--or-fonce) 35%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.75rem) 50%, 100% 100%, 0 100%, 0.75rem 50%);
}


.domaine-chemin__dit {
  margin: 0 0 var(--e-4);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: 1.5;
  text-align: center;
  color: var(--texte);
}


/* ── La file des six etats ───────────────────────────────────────────────
   Six colonnes de largeur egale. Sous 62rem la file glisse a l'horizontale
   plutot que d'ecraser les vignettes a la taille d'un timbre. */

.domaine-chemin__file {
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: var(--e-3);
  margin: 0;
  padding: 0 0 var(--e-2);
  list-style: none;
}

/* La colonne elle-meme ne porte plus ni fond ni bord : sur la planche, seule
   la fiche du bas est encadree.

   Cinq rangees, dans l'ordre de la planche : le nom, le fanion, la vue, le
   rail, la fiche. En pile flexible, la fiche prenait la hauteur de son texte
   et les six cadres finissaient a six hauteurs differentes. En grille, la
   derniere rangee prend tout le reste et les six bas s'alignent. */
.domaine-etat {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  justify-items: center;
  padding: 0;
  background: none;
  border: 0;
  gap: var(--e-2);
}

.domaine-etat--verrouillee,
.chemin__etape--verrouillee.domaine-etat { opacity: 1; }


/* Le fanion pendu sous le nom. Sa couleur change d'un etat a l'autre, comme
   sur la planche, et le nom est toujours ecrit a cote. */
.domaine-etat__fanion {
  order: 2;
  width: 2.3rem;
  height: 2.8rem;
  box-shadow: var(--ombre-2);
}

.domaine-etat__marque {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: var(--parchemin);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.domaine-etat[data-etat="masure"] .domaine-etat__fanion { background: linear-gradient(180deg, var(--bois), var(--bois-sombre)); }
.domaine-etat[data-etat="ferme"] .domaine-etat__fanion { background: linear-gradient(180deg, var(--gain-fond), var(--bois-sombre)); }
.domaine-etat[data-etat="hameau"] .domaine-etat__fanion { background: linear-gradient(180deg, var(--cuir-clair), var(--verredragon)); }
.domaine-etat[data-etat="manoir"] .domaine-etat__fanion { background: linear-gradient(180deg, var(--ombre-magie), var(--verredragon)); }
.domaine-etat[data-etat="chateau"] .domaine-etat__fanion { background: linear-gradient(180deg, var(--cire), var(--cire-fonce)); }
.domaine-etat[data-etat="forteresse"] .domaine-etat__fanion { background: linear-gradient(180deg, var(--cire-fonce), color-mix(in srgb, var(--cire-fonce) 60%, var(--pierre-1))); }

.domaine-etat__nom {
  order: 1;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: 0.03em;
  color: var(--parchemin-clair);
  text-shadow: var(--ombre-texte);
  text-transform: capitalize;
}


/* La vue peinte de l'etat. Les six fichiers sont dans jeu/images/siege/, en
   version generale et dans le dossier de chaque terre. */
.domaine-etat__vue {
  order: 3;
  width: 100%;
  aspect-ratio: 16 / 10;
}

/* Un etat pas encore atteint reste lisible : la planche montre tout le chemin,
   et une vignette assombrie au point de disparaitre ne vend plus rien. */
.domaine-etat--verrouillee .domaine-etat__vue img,
.chemin__etape--verrouillee .domaine-etat__vue img {
  filter: grayscale(0.35) brightness(0.72);
}

.domaine-etat--atteinte .domaine-etat__vue img,
.chemin__etape--atteinte .domaine-etat__vue img { filter: brightness(0.92); }

/* L'etat du jour est le seul qui garde sa couleur pleine, et il porte un halo
   d'or par-dessus le cadre du socle. */
.domaine-etat--courante .domaine-etat__vue,
.chemin__etape--courante .domaine-etat__vue {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--parchemin) 70%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--pierre-0) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--or) 45%, transparent);
}


/* ── Le rail dore ────────────────────────────────────────────────────────
   La planche relie les six etats par un trait d'or ponctue d'un disque
   allume, avec une pointe de fleche entre deux disques. Le trait deborde
   d'une demi-gouttiere de chaque cote pour se souder a celui du voisin ; le
   premier et le dernier s'arretent au disque. */

.domaine-etat__rail {
  order: 4;
  position: relative;
  display: block;
  width: 100%;
  height: 1.5rem;
}

.domaine-etat__rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.6rem;
  right: -0.6rem;
  height: 3px;
  margin-top: -1.5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or) 55%, transparent), color-mix(in srgb, var(--or-vif) 90%, transparent), color-mix(in srgb, var(--or) 55%, transparent));
  box-shadow: 0 0 6px color-mix(in srgb, var(--or) 35%, transparent);
}

/* La pointe de fleche, posee au milieu de la gouttiere qui separe deux
   colonnes : le point de la colonne est a 50 %, celui du voisin a 150 % plus
   la gouttiere, le milieu tombe donc au bord droit plus une demi-gouttiere. */
.domaine-etat__rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.35rem);
  width: 0.45rem;
  height: 0.55rem;
  margin: calc(-1 * var(--e-1)) 0 0 calc(-1 * var(--e-1));
  background: var(--or-vif);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.domaine-etat:first-child .domaine-etat__rail::before { left: 50%; }
.domaine-etat:last-child .domaine-etat__rail::before { right: 50%; }
.domaine-etat:last-child .domaine-etat__rail::after { content: none; }

.domaine-etat__point {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin: calc(-1 * var(--e-2)) 0 0 calc(-1 * var(--e-2));
  border: 2px solid var(--or);
  border-radius: var(--rayon-rond);
  background: var(--pierre-2);
}

.domaine-etat--atteinte .domaine-etat__point,
.chemin__etape--atteinte .domaine-etat__point {
  background: var(--or);
  box-shadow: 0 0 8px color-mix(in srgb, var(--or) 60%, transparent);
}

.domaine-etat--courante .domaine-etat__point,
.chemin__etape--courante .domaine-etat__point {
  border-color: var(--parchemin);
  background: radial-gradient(circle at 50% 40%, var(--parchemin-clair), var(--or) 70%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--or-vif) 85%, transparent);
}


/* ── La fiche sous chaque etat ───────────────────────────────────────────
   Un cadre sombre a lisere d'or : le nombre de niveaux batis qui ouvre
   l'etat, puis ou tu en es, puis ce que l'etat change quand le serveur en
   envoie les nombres. */

.domaine-etat__fiche {
  order: 5;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  width: 100%;
  height: 100%;
  padding: var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 92%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 32%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 85%, transparent);
}

/* Le cadre entier s'allume sur l'etat du jour. Une barre de couleur posee sur
   une seule tranche n'appartient a aucune planche du jeu. */
.domaine-etat--courante .domaine-etat__fiche,
.chemin__etape--courante .domaine-etat__fiche {
  border-color: color-mix(in srgb, var(--or-vif) 75%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 85%, transparent), 0 0 12px color-mix(in srgb, var(--or) 30%, transparent);
}

.domaine-etat__compte {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  margin: 0;
}

.domaine-etat__gravure {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  align-self: center;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.domaine-etat__chiffre {
  font-family: var(--police-titre);
  font-size: var(--t-6);
  font-weight: 400;
  line-height: 1;
  color: var(--parchemin-clair);
}

.domaine-etat__unite {
  font-size: var(--t-1);
  letter-spacing: 0.04em;
  color: var(--texte-pale);
}

.domaine-etat__dit {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.35;
  text-align: left;
  color: var(--texte);
}

/* Le compte de bouches : la planche ecrit ce nombre sous chaque etat. Le
   serveur ne le connait que pour aujourd'hui, il n'est donc ecrit que la. */
.domaine-etat__gens {
  margin: 0;
  font-size: var(--t-1);
  line-height: 1.35;
  color: var(--texte-pale);
}

/* Les trois verrous de la croissance, sous le compte des bouches. Un verrou
   tenu se lit en or pale, un verrou qui bloque en rouge : le joueur doit voir
   d'un coup d'oeil LEQUEL des trois retient sa maisonnee, pas seulement
   qu'elle ne bouge pas. */
.domaine-croissance {
  margin: var(--e-1) 0 0;
  padding-top: var(--e-1);
  border-top: 1px solid color-mix(in srgb, var(--or) 16%, transparent);
  font-size: var(--t-1);
  line-height: 1.4;
}
.domaine-croissance__verdict {
  display: block;
  color: var(--perte);
  letter-spacing: 0.02em;
}
.domaine-croissance.est-ouverte .domaine-croissance__verdict { color: var(--or-vif); }
.domaine-croissance__verrous { margin: var(--e-0) 0 0; padding: 0; list-style: none; }
.domaine-croissance__verrou {
  display: flex;
  gap: var(--e-2);
  justify-content: space-between;
  color: var(--perte);
}
.domaine-croissance__verrou.est-tenu { color: var(--texte-pale); }
.domaine-croissance__mot { min-width: 0; }
.domaine-croissance__chiffre { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Le rappel des bras oisifs sur la fiche du jour. Meme rouge que le bandeau de
   l onglet des ouvrages : c est le meme fait, dit a l endroit ou le joueur
   arrive. */
.domaine-etat__oisifs {
  margin: var(--e-1) 0 0;
  font-size: var(--t-1);
  line-height: 1.4;
  color: var(--perte);
}

/* Ce que l'etat apporte, colle au bas de la fiche : les six lignes se lisent
   alors sur une meme ligne d'oeil d'un bout a l'autre de la file. */
.domaine-etat__apporte {
  margin: auto 0 0;
  padding-top: var(--e-1);
  font-size: var(--t-1);
  line-height: 1.35;
  color: var(--or-vif);
  border-top: 1px solid color-mix(in srgb, var(--or) 18%, transparent);
}


@media (max-width: 62rem) {
  .domaine-chemin { padding: var(--e-6) var(--e-3) var(--e-4); }
  .domaine-chemin__file { grid-auto-columns: minmax(8.5rem, 1fr); gap: var(--e-2); }
}

@media (max-width: 46rem) {
  .domaine-chemin__file { grid-auto-columns: 12rem; }
  .domaine-etat__nom { font-size: var(--t-4); }
}


/* ── Le chantier en cours ────────────────────────────────────────────────
   Une ligne de titre avec sa gravure, puis la jauge segmentee du socle et le
   temps qui reste au bout. */

#siege.page .chantier {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  padding: var(--e-3) var(--e-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 90%, transparent), color-mix(in srgb, var(--pierre-0) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

#siege.page .chantier__quoi {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.chantier__marque {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#siege.page .chantier__nom {
  font-family: var(--police-titre);
  letter-spacing: 0.04em;
  color: var(--parchemin-clair);
}

#siege.page .chantier__reste {
  min-width: 4.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--or-vif);
}


/* ── Les batiments ───────────────────────────────────────────────────────
   Chaque batiment porte la gravure de sa sorte, dans une case gravee comme
   les petites icones de la planche. */

#siege.page .batiment {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  align-items: stretch;
  border-color: color-mix(in srgb, var(--or) 22%, transparent);
}

#siege.page .batiment:hover { border-color: color-mix(in srgb, var(--or) 60%, transparent); }

#siege.page .batiment__entete {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.batiment__marque {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  padding: var(--e-1);
  background: radial-gradient(circle at 35% 30%, var(--pierre-4), var(--pierre-1) 78%);
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pierre-0) 70%, transparent);
  fill: none;
  stroke: var(--or);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#siege.page .batiment__nom { flex: 1; min-width: 0; }
#siege.page .batiment__niveau { flex: none; }
#siege.page .batiment.est-fermee .batiment__marque { stroke: var(--texte-pale); border-color: color-mix(in srgb, var(--texte-pale) 40%, transparent); }

/* ── La main-d oeuvre ────────────────────────────────────────────────────
   Le bandeau en tete de la liste des ouvrages, et les deux crans sur chaque
   ouvrage bati. Des bras oisifs se lisent en rouge : c est la seule decision
   du domaine qui ne coute rien, donc la seule ou l oubli est pur gaspillage. */
#siege.page .main-doeuvre,
.gestion-batiments .main-doeuvre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--or) 45%, transparent);
  background: color-mix(in srgb, var(--pierre-2) 42%, transparent);
}
.main-doeuvre.a-des-oisifs { border-left-color: var(--perte); }
.main-doeuvre__titre {
  color: var(--or);
  font-size: var(--t-2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.main-doeuvre__compte { color: var(--texte-pale); font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.main-doeuvre__dit { color: var(--texte-pale); font-size: var(--t-2); opacity: 0.8; }
/* La dernière frappe porte des chiffres expliqués : sans l'opacité de
   `.main-doeuvre__dit`, qui rendait leur note translucide. */
.defense-du-domaine__derniere { color: var(--texte-pale); font-size: var(--t-2); }
.main-doeuvre__oisifs { color: var(--perte); font-size: var(--t-2); }

#siege.page .batiment__bras,
.gestion-batiments .batiment__bras {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-1);
  padding-top: var(--e-1);
  border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  font-size: var(--t-2);
}
.batiment__bras-mot { color: var(--texte-pale); opacity: 0.85; }
.batiment__bras-compte { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--or-vif); }
.batiment__bras.est-deserte .batiment__bras-compte { color: var(--perte); }
.batiment__bras-cran {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: color-mix(in srgb, var(--pierre-4) 70%, transparent);
  color: var(--or-vif);
  font: inherit;
  font-size: var(--t-4);
  line-height: 1;
  cursor: pointer;
}
.batiment__bras-cran:hover:not(:disabled) { background: color-mix(in srgb, var(--cuir) 90%, transparent); border-color: var(--or); }
.batiment__bras-cran:disabled { opacity: 0.35; cursor: default; }

/* Ce qu'un ouvrage ferme apportera. Il se lit sous le rang qui l ouvre, plus
   bas de ton que le prix d un chantier qu on peut lancer aujourd hui : c est
   une raison de viser le rang, pas une depense a faire ce soir. */
#siege.page .batiment__promesse,
.gestion-batiments .batiment__promesse {
  display: block;
  font-size: var(--t-1);
  line-height: 1.35;
  color: var(--bois);
  font-style: italic;
}


/* ── Le bandeau des reserves ─────────────────────────────────────────────
   Le bas de la planche est une barre de cases : la matiere peinte dans son
   disque, son nom, son stock, et le gain du jour en vert. La pastille est
   celle du bandeau du haut (parure.css, .tresor__marque) : la meme matiere
   ne se dessine pas de deux facons dans le meme jeu. */

.salle-tresor .ressources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: color-mix(in srgb, var(--or) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

.salle-tresor .ressource {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-2) var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  border: 0;
}

.salle-tresor .ressource__marque {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: var(--rayon-rond);
  object-fit: cover;
  box-shadow: var(--ombre-1);
}

.salle-tresor .ressource__chiffres {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 var(--e-2);
  min-width: 0;
  flex: 1;
}

.salle-tresor .ressource__nom {
  grid-column: 1 / -1;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.salle-tresor .ressource__stock {
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-variant-numeric: tabular-nums;
  color: var(--parchemin);
  text-shadow: var(--ombre-texte);
}

.salle-tresor .ressource__debit {
  justify-self: end;
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  color: var(--gain);
}

.salle-tresor .ressource__debit.est-negatif { color: var(--perte); }

.salle-tresor .ressource[data-ressource="or"] .ressource__stock { color: var(--or-vif); }
.salle-tresor .ressource.est-en-alerte .ressource__marque { box-shadow: 0 0 0 1px var(--perte), var(--ombre-1); }


/* ── Les ouvrages : la liste qui se compare ────────────────────────────────
   🔴 Refaite en React le 24/09/2026 (interface/composants/batiments.jsx). Les
   trois fiches « Choisir le chantier » et les vingt-trois cartes du dessous
   ne se comparaient qu'en défilant. Une ligne par ouvrage aligne le gain du
   prochain niveau, le prix et la durée ; la fiche se déplie sous la ligne
   ouverte. Chaque ligne reprend la grille de l'en-tête, des colonnes fixes
   sauf la première, comme la liste des troupes. Deux identifiants par règle :
   la teinte des boutons du domaine (`#siege.page button:not(…)`) en porte un
   et six classes. */

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) { margin-top: var(--e-2); }
/* Dans son tiroir, la barre des ouvrages tient toute la hauteur et s'aligne en bas : la marge la poussait 8 pixels sous
   le tiroir, jusqu'au bord de la page (16 octobre 2026). */
#siege .base-panneau--construire #construction-racine { margin-top: 0; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__tris {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0 0 var(--e-2);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__tri {
  min-height: 44px;
  padding: var(--e-1) var(--e-3);
  font: inherit;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  color: var(--texte-pale);
  background: color-mix(in srgb, var(--pierre-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__tri[aria-pressed="true"] {
  color: var(--bois-sombre);
  background: linear-gradient(180deg, var(--or-vif), var(--or-sourd));
  border-color: var(--or-vif);
}

/* Au téléphone, deux étages par ouvrage : le nom sur toute la largeur, puis le
   gain, le prix et la durée sous les trois colonnes de l'en-tête. Quatre
   colonnes sur une seule ligne laissaient au nom soixante pixels, une lettre
   par ligne (capture du 24/09/2026). */
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__entetes,
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  column-gap: var(--e-2);
  row-gap: var(--e-1);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__entetes > :first-child { display: none; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee .batiments__ouvrage { grid-column: 1 / -1; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee :is(.batiments__gains-ligne, .batiments__prix, .batiments__duree) { align-self: start; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__large { display: none; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__entetes {
  padding: 0 0.5rem 0.4rem calc(0.5rem + 3px);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__liste { list-style: none; margin: 0; padding: 0; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item {
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  scroll-margin: 0.5rem 0 5.5rem;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee {
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: var(--e-2) var(--e-2);
  font: inherit;
  font-family: var(--police-corps);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--parchemin);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
  scroll-margin: 0.5rem 0 5.5rem;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee:hover { background: color-mix(in srgb, var(--or) 7%, transparent); transform: none; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item.est-bati button.batiments__rangee { border-left-color: color-mix(in srgb, var(--or) 50%, transparent); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item.est-en-chantier button.batiments__rangee { border-left-color: var(--gain); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item.est-ouverte button.batiments__rangee {
  background: color-mix(in srgb, var(--or) 12%, transparent);
  border-left-color: var(--or-vif);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__ouvrage { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__marque { flex: none; width: 1.9rem; height: 1.9rem; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item.est-fermee .batiments__marque { opacity: 0.5; filter: grayscale(0.7); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__noms { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--parchemin-clair);
  overflow-wrap: anywhere;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__sous {
  font-size: var(--t-1);
  line-height: 1.3;
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__sous--verrou { color: var(--parchemin-bas); }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) :is(.batiments__gains-ligne, .batiments__prix) {
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  min-width: 0;
  font-size: var(--t-2);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__gains-ligne { color: var(--parchemin); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__prix { color: var(--parchemin); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__suite { display: none; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__sans { color: var(--texte-pale); }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) :is(.batiments__gain, .batiments__piece) { display: inline-flex; align-items: center; gap: var(--e-1); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__medaillon { flex: none; width: 1.05rem; height: 1.05rem; border-radius: var(--rayon-rond); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__piece.est-court { color: var(--perte); }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__duree {
  font-size: var(--t-2);
  line-height: 1.3;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item.est-fermee :is(.batiments__nom, .batiments__prix, .batiments__duree) { color: var(--texte); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__item.est-fermee .batiments__gains-ligne { color: var(--texte); }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) :is(.batiments__attente, .batiments__vide) {
  margin: var(--e-2) 0;
  font-size: var(--t-3);
  color: var(--texte-pale);
}


/* La fiche : ce que le niveau rend et ce que devient le domaine, puis le
   chantier et son geste, puis les bras. Une colonne au téléphone, trois
   ailleurs. */
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__fiche {
  display: grid;
  gap: var(--e-3);
  padding: 0.55rem 0.55rem 0.9rem calc(0.55rem + 3px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 55%, transparent), color-mix(in srgb, var(--pierre-0) 20%, transparent));
  border-left: 3px solid var(--or-vif);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__colonne { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__colonne > * { margin: 0; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__intertitre {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) :is(.batiments__gains, .batiments__bilans) {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: 0;
  font-size: var(--t-3);
  line-height: 1.4;
  color: var(--parchemin);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__gains .batiments__gain { color: var(--parchemin-clair); }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) :is(.batiments__ligne, .batiments__debord, .batiments__dit) {
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texte);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__debord { color: var(--or-vif); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__dit { font-style: italic; color: var(--texte-pale); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__en-cours { color: var(--parchemin); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__verrou { font-size: var(--t-2); line-height: 1.45; text-align: left; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__actes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__batir { flex: 1 1 11rem; min-height: 44px; }

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__retour { font-size: var(--t-3); line-height: 1.45; }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__retour.est-bon {
  padding: var(--e-2) var(--e-2);
  color: var(--parchemin);
  background: color-mix(in srgb, var(--or) 10%, transparent);
  border-left: 3px solid var(--or);
}

#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__bras .batiment__bras { margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--t-2); }
#siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__bras .batiment__bras-cran { width: 44px; height: 44px; }


@media (min-width: 46.0625rem) {
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__entetes,
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee {
    grid-template-columns: minmax(11rem, 1.5fr) 4.6rem minmax(10rem, 1.3fr) minmax(7rem, 1fr) 4.8rem 4.2rem;
    column-gap: var(--e-3);
  }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__entetes > :first-child { display: block; }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee .batiments__ouvrage { grid-column: auto; }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) button.batiments__rangee :is(.batiments__gains-ligne, .batiments__prix, .batiments__duree) { align-self: center; }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__large { display: block; }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__suite { display: inline-flex; }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__niveau,
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__bras-ligne { font-size: var(--t-2); color: var(--texte); font-variant-numeric: tabular-nums; }
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__fiche {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--e-3) var(--e-4);
  }
}

@media (min-width: 72rem) {
  #siege :is(#batiments-racine, #base-fiche-racine, #construction-racine) .batiments__fiche { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(13rem, 0.7fr); }
}


/* ── Lot F, 24/09/2026 : l'onglet « Le domaine » et l'onglet « Économie » ──
   Maquette du plan des onglets, §5 (docs/PLAN-ONGLETS-ET-DESIGN.md). Au
   bureau : les réserves en bande, la vue 3D à gauche, le prochain palier à
   droite, le bourg en liste dessous, la file des six états repliée au pied.
   Au téléphone : réserves, palier et son geste, vue, bourg. Le composant est
   interface/composants/domaine.jsx ; le cadre et les trois boutons viennent de
   cadre.css, cette feuille ne les redessine pas. Les règles portent
   `#siege.page` : `#siege.page p` (commandement.css) passe sinon devant. */

#siege.page .domaine-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
  grid-template-areas:
    "reserves reserves"
    "vue palier"
    "bourg bourg"
    "chemin chemin";
  align-items: start;
  gap: var(--e-3) var(--e-4);
  /* Centré sous l'en-tête : `margin: 0 0` l'arrêtait à gauche de la colonne de 90rem de coque.css. */
  margin: 0 auto var(--e-4);
}
#siege.page .domaine-accueil__reserves { grid-area: reserves; min-width: 0; }
#siege.page .domaine-accueil__vue { grid-area: vue; min-width: 0; align-self: stretch; }
#siege.page .domaine-accueil__palier { grid-area: palier; min-width: 0; }
#siege.page .domaine-accueil__bourg { grid-area: bourg; min-width: 0; }
#siege.page .domaine-accueil > #domaine-chemin { grid-area: chemin; min-width: 0; }

/* La vue 3D garde sa scène (jeu/ecrans/siege.js) ; seul son cadre change de
   hauteur, pour tenir à côté du palier. */
#siege.page .domaine-accueil__vue {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(28rem, 65vh, 46rem);
  overflow: hidden;
  border: var(--filet);
  border-radius: var(--rayon);
  background: var(--pierre-0);
  box-shadow: var(--ombre-2);
}
html[data-vue="jeu"] #siege.page .domaine-accueil #siege-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: auto;
  flex: 1;
  height: 100%;
  min-height: 0;
  /* Sans aspect-ratio, la visite prenait sa propre formule (0,62 de la largeur) et le cadre rognait le bas de
     l'image, là où se tient la maison. Cette déclaration lui fait prendre la hauteur du cadre (jeu/visite3d.js). */
  --visite-hauteur: cadre;
}
html[data-vue="jeu"] #siege.page .domaine-accueil #siege-3d .visite__toile { min-height: 0; height: 100%; }
#siege.page .domaine-vue__outils { display: flex; gap: .4rem; }
#siege.page .domaine-vue__outils .carte__outil { width: auto; padding: .4rem .7rem; }

/* Les réserves : une case par matière, le nom, le stock et son plafond, le
   bilan du jour. */
#siege.page .domaine-reserves { margin: 0; padding: 0; }
#siege.page .domaine-reserves__barre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pierre-2);
  border: var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}
#siege.page .domaine-reserve {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "marque nom nom" "marque stock debit" "plein plein plein";
  align-items: baseline;
  gap: 0 var(--e-2);
  min-width: 0;
  margin: 0;
  padding: var(--e-1) var(--e-3);
  background: var(--pierre-2);
  /* Le filet entre cases : une case vide au bout de la rangée reste pierre. */
  box-shadow: 1px 0 0 var(--filet-pale), 0 1px 0 var(--filet-pale);
}
#siege.page .domaine-reserve__marque {
  grid-area: marque;
  align-self: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--rayon-rond);
  object-fit: cover;
  box-shadow: var(--ombre-1);
}
#siege.page .domaine-reserve__nom {
  grid-area: nom;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--or);
}
#siege.page .domaine-reserve__stock {
  grid-area: stock;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--texte-fort);
}
#siege.page .domaine-reserve[data-ressource="or"] .domaine-reserve__stock { color: var(--or-vif); }
#siege.page .domaine-reserve__debit {
  grid-area: debit;
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gain);
}
#siege.page .domaine-reserve__debit.est-negatif { color: var(--perte); }
#siege.page .domaine-reserve__plein { grid-area: plein; font-size: var(--t-1); color: var(--alerte); }
/* Une réserve qui baisse porte un filet de cire à gauche, avec son chiffre en
   rouge et son signe moins : la teinte ne parle jamais seule. */
#siege.page .domaine-reserve.est-en-alerte { box-shadow: inset 3px 0 0 var(--cire-vif); }

/* Le prochain palier. */
#siege.page .domaine-palier { display: grid; gap: var(--e-2); margin: 0; }
#siege.page .domaine-palier > p { margin: 0; font-size: var(--t-3); line-height: var(--interligne); color: var(--texte); }
#siege.page :is(.domaine-palier__titre, .domaine-bourg__titre, .economie__titre) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  font-weight: 400;
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--or);
}
#siege.page :is(.domaine-palier__titre, .domaine-bourg__titre) small {
  font-family: var(--police-corps);
  font-size: var(--t-2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-pale);
}
#siege.page .domaine-palier__etapes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e-0);
  margin: 0;
  padding: 0;
  list-style: none;
}
#siege.page .domaine-palier__etape {
  margin: 0;
  padding: var(--e-1) 0;
  overflow: hidden;
  font-size: var(--t-1);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texte-pale);
  border: var(--filet-cuir);
  border-radius: var(--rayon);
}
#siege.page .domaine-palier__etape.est-fait { background: var(--voile-or); color: var(--or); }
#siege.page .domaine-palier__etape.est-ici { background: var(--voile-or-fort); color: var(--or-vif); border-color: var(--or); }
#siege.page .domaine-palier > .domaine-palier__condition { color: var(--texte-fort); }
#siege.page .domaine-palier > .domaine-palier__gain { color: var(--gain); }
#siege.page .domaine-palier > :is(.domaine-palier__aujourdhui, .domaine-palier__gens) { font-size: var(--t-2); color: var(--texte-pale); }
#siege.page .domaine-palier > .domaine-palier__gestes + p { margin-top: var(--e-1); padding-top: var(--e-2); border-top: 1px solid var(--filet-pale); }
#siege.page .domaine-palier__chantier { margin: 0; font-size: var(--t-2); color: var(--texte-pale); }
#siege.page .domaine-palier__chantier.est-en-cours p { margin: 0 0 var(--e-1); font-size: var(--t-3); color: var(--texte-fort); }
#siege.page .domaine-palier__oisifs { font-weight: 400; color: var(--alerte); }
#siege.page .domaine-palier__gens .est-bloquee { color: var(--alerte); }
#siege.page .domaine-palier__gestes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }

/* Les gens du bourg : une liste comparable, la fiche ouverte sous la ligne. */
#siege.page .domaine-bourg { display: grid; gap: var(--e-1); margin: 0; }
#siege.page .domaine-bourg .bourg__entetes,
#siege.page #domaine-bourg-racine button.bourg__rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem;
  align-items: center;
  column-gap: var(--e-3);
}
#siege.page .domaine-bourg .bourg__entetes {
  padding: 0 var(--e-2) var(--e-1) calc(var(--e-2) + 3px);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--or);
  border-bottom: var(--filet);
}
#siege.page .domaine-bourg .bourg__entetes > :nth-child(2),
#siege.page .domaine-bourg .bourg__opinion { text-align: right; }
/* La colonne de la demande se cache par la découpe au téléphone : cachée par
   `display: none`, elle sortait aussi du lecteur d'écran. */
#siege.page .domaine-bourg .bourg__large {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* La liste ne défile plus dans une boîte de 18rem (ecrans-ui-senior.css) : six
   lignes tiennent, les autres se déplient d'un geste. */
html[data-vue="jeu"] #siege.page .domaine-bourg .bourg__liste {
  display: block;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
}
#siege.page .domaine-bourg .bourg__gen {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--filet-pale);
  background: none;
  box-shadow: none;
}
#siege.page #domaine-bourg-racine button.bourg__rangee {
  width: 100%;
  min-height: var(--cible);
  margin: 0;
  padding: var(--e-1) var(--e-2);
  font: inherit;
  text-align: left;
  color: var(--texte);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
#siege.page #domaine-bourg-racine button.bourg__rangee:is(:hover, :focus-visible) { background: var(--voile-or); }
#siege.page #domaine-bourg-racine .bourg__gen.est-ouverte button.bourg__rangee { background: var(--voile-or); border-left-color: var(--or-vif); }
#siege.page .domaine-bourg .bourg__qui { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); min-width: 0; }
#siege.page .domaine-bourg .bourg__nom { font-family: var(--police-titre); font-size: var(--t-3); color: var(--texte-fort); }
#siege.page .domaine-bourg .bourg__role { font-size: var(--t-1); color: var(--texte-pale); }
#siege.page .domaine-bourg .bourg__opinion { font-variant-numeric: tabular-nums; color: var(--texte); }
#siege.page .domaine-bourg .bourg__opinion.est-amie { color: var(--gain); }
#siege.page .domaine-bourg .bourg__opinion.est-hostile { color: var(--perte); }
#siege.page .domaine-bourg .bourg__bref { font-size: var(--t-2); color: var(--texte); }
#siege.page .domaine-bourg .bourg__fiche {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  padding: var(--e-2) var(--e-3) var(--e-3);
  border-left: 3px solid var(--or-vif);
  background: var(--pierre-1);
}
#siege.page .domaine-bourg .bourg__fiche p { margin: 0; font-size: var(--t-2); line-height: var(--interligne); color: var(--texte); }
#siege.page .domaine-bourg .bourg__demande { display: grid; gap: var(--e-1); }
#siege.page .domaine-bourg .bourg__fiche .bourg__demande-titre { font-family: var(--police-titre); font-size: var(--t-3); color: var(--texte-fort); }
#siege.page .domaine-bourg .bourg__angles { display: flex; flex-wrap: wrap; gap: var(--e-2); }
#siege.page .domaine-bourg .bourg__angle { width: auto; }
#siege.page .domaine-bourg .bourg__fiche .bourg__retour:empty { display: none; }
#siege.page .domaine-bourg .domaine-bourg__tous { justify-self: start; }

/* L'onglet « Économie ». */
#siege.page #economie-racine { display: grid; gap: var(--e-3); }
#siege.page .economie__marche,
#siege.page .economie__gouverner { display: grid; gap: var(--e-2); margin: 0; }
#siege.page .economie__gouverner p,
#siege.page .economie__note { margin: 0; font-size: var(--t-2); color: var(--texte-pale); }
#siege.page .economie__gouverner > button { justify-self: start; }
#siege.page .economie__entetes,
#siege.page #economie-racine button.economie__rangee {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.9fr);
  align-items: center;
  column-gap: var(--e-3);
}
#siege.page .economie__entetes {
  padding: 0 var(--e-2) var(--e-1) calc(var(--e-2) + 3px);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--or);
  border-bottom: var(--filet);
}
#siege.page .economie__large {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
#siege.page .economie__liste { margin: 0; padding: 0; list-style: none; }
#siege.page .economie__item { margin: 0; border-bottom: 1px solid var(--filet-pale); }
#siege.page #economie-racine button.economie__rangee {
  width: 100%;
  min-height: var(--cible);
  margin: 0;
  padding: var(--e-1) var(--e-2);
  font: inherit;
  text-align: left;
  color: var(--texte);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
#siege.page #economie-racine button.economie__rangee:is(:hover, :focus-visible) { background: var(--voile-or); }
#siege.page #economie-racine .economie__item.est-ouverte button.economie__rangee { background: var(--voile-or); border-left-color: var(--or-vif); }
#siege.page .economie__ressource { display: flex; align-items: center; gap: var(--e-2); min-width: 0; overflow-wrap: anywhere; font-family: var(--police-titre); color: var(--texte-fort); }
#siege.page .economie__marque { width: 1.6rem; height: 1.6rem; border-radius: var(--rayon-rond); box-shadow: var(--ombre-1); }
#siege.page :is(.economie__stock, .economie__prix, .economie__ailleurs) { font-size: var(--t-2); font-variant-numeric: tabular-nums; }
#siege.page .economie__vente {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-2);
  padding: var(--e-2) var(--e-3) var(--e-3);
  border-left: 3px solid var(--or-vif);
  background: var(--pierre-1);
}
#siege.page .economie__champ { display: grid; gap: var(--e-1); font-size: var(--t-2); color: var(--texte-pale); }
#siege.page .economie__champ input {
  width: 7rem;
  min-height: var(--cible);
  padding: 0 var(--e-2);
  font: inherit;
  font-size: var(--t-3);
  color: var(--texte-fort);
  background: var(--pierre-0);
  border: var(--filet);
  border-radius: var(--rayon);
}
#siege.page .economie__vente > p { flex: 1 1 100%; margin: 0; font-size: var(--t-2); color: var(--texte-pale); }
#siege.page .economie__vente > .economie__retour:empty { display: none; }
#siege.page .economie__vente > .economie__retour:not(.refus) { color: var(--gain); }
/* Le gain lu avant la vente, à côté du bouton ; sa décomposition s'ouvre au survol et au clavier. */
#siege.page .economie__gain { align-self: center; font-size: var(--t-2); font-variant-numeric: tabular-nums; color: var(--gain); }
#siege.page .economie__gain.est-refus { color: var(--perte); }
/* L'achat sous la vente : filet pâle, prix dans la couleur du texte (ce n'est ni un gain ni un refus). */
#siege.page .economie__vente--achat { border-left-color: var(--texte-pale); }
#siege.page .economie__vente--achat .economie__gain:not(.est-refus) { color: var(--texte-fort); }

/* La file des six états, au second niveau. */
#siege.page .domaine-accueil > .domaine-chemin { position: relative; margin: 0; padding: 0; overflow: hidden; }
#siege.page .domaine-chemin__titre {
  min-height: var(--cible);
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--or);
  cursor: pointer;
  display: flex;
  align-items: center;
}
#siege.page .domaine-chemin__corps { position: relative; padding: 0 var(--e-4) var(--e-4); }

@media (min-width: 46.0625rem) {
  #siege.page .domaine-bourg .bourg__entetes,
  #siege.page #domaine-bourg-racine button.bourg__rangee { grid-template-columns: minmax(0, 1.3fr) 4rem minmax(0, 1.4fr); }
  #siege.page .domaine-bourg .bourg__large {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* Le marché passe à quatre colonnes selon la largeur de son tiroir (16 octobre 2026) : réglées sur l'écran, elles
   tenaient dans 440 pixels au téléphone couché et « Ressource » chevauchait « En réserve ». Plus étroit, le tiroir
   garde trois colonnes ; le mieux payé reste lu par le lecteur d'écran. */
#siege .base-panneau--marche { container: tiroir-marche / inline-size; }
@container tiroir-marche (min-width: 30rem) {
  #siege.page .economie__entetes,
  #siege.page #economie-racine button.economie__rangee { grid-template-columns: minmax(0, 1fr) 6rem 6rem minmax(0, 1.2fr); }
  #siege.page .economie__large { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

@media (max-width: 46rem) {
  #siege.page .domaine-accueil {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "reserves" "palier" "vue" "bourg" "chemin";
    gap: var(--e-3);
  }
  #siege.page .domaine-reserves__barre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #siege.page .domaine-reserve { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom nom" "stock stock" "debit debit" "plein plein"; padding: var(--e-1) var(--e-2); }
  #siege.page .domaine-reserve__marque { display: none; }
  #siege.page .domaine-reserve__stock { font-size: var(--t-3); }
  #siege.page .domaine-palier__etape { padding: var(--e-1) var(--e-0); }
  #siege.page .domaine-accueil__vue { min-height: clamp(20rem, 50svh, 30rem); }
}

/* Lot 10 (29/09/2026) : l'heure du plafond et la perte des 24 prochaines
   heures sur chaque réserve, le bilan avant de partir. Les files d'ordres
   s'habillent dans cadre.css. */
#siege.page .domaine-reserve { grid-template-areas: "marque nom nom" "marque stock debit" "plein plein plein" "perte perte perte"; }
#siege.page .domaine-reserve__plein { color: var(--texte-pale); }
#siege.page .domaine-reserve__plein.est-plein { color: var(--alerte); }
#siege.page .domaine-reserve__perte { grid-area: perte; font-size: var(--t-1); color: var(--perte); }
#siege.page .domaine-reserves__depart { margin: var(--e-1) 0 0; font-size: var(--t-2); line-height: var(--interligne); color: var(--texte); }
@media (max-width: 40rem) {
  #siege.page .domaine-reserve { grid-template-areas: "nom nom" "stock stock" "debit debit" "plein plein" "perte perte"; }
}

/* Fiche d'un ouvrage visé dans la vue du domaine (jeu/ecrans/siege.js, interface/composants/batiments.jsx) :
   au bord droit de la scène sur ordinateur, en bas sur téléphone ; la scène reste visible et manipulable. */
#siege #base-fiche-racine { position: absolute; inset: auto var(--e-2) var(--e-2) auto; z-index: 3; width: min(19rem, calc(100% - 2 * var(--e-2))); max-height: calc(100% - 4.5rem); display: flex; pointer-events: none; }
#siege #base-fiche-racine:empty { display: none; }
#siege .base-fiche {
  pointer-events: auto; display: flex; flex-direction: column; min-height: 0; width: 100%; overflow: auto;
  padding: var(--e-2) var(--e-3) var(--e-3); color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-1) 94%, transparent), color-mix(in srgb, var(--pierre-0) 96%, transparent));
  border: var(--filet); border-color: color-mix(in srgb, var(--or) 55%, transparent); border-radius: var(--rayon); box-shadow: var(--ombre-2);
}
/* L'en-tête reste en haut quand la fiche défile vers ses travailleurs : le nom de l'ouvrage et la fermeture restent lisibles. */
#siege .base-fiche__tete {
  position: sticky; top: calc(-1 * var(--e-2)); z-index: 1; display: flex; align-items: baseline; gap: var(--e-2);
  margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-3)) var(--e-1); padding: var(--e-2) var(--e-3) var(--e-1); background: rgb(18 16 13);
}
#siege .base-fiche__nom { margin: 0; font-family: var(--police-titre, inherit); font-size: 1.15rem; color: var(--or); }
#siege .base-fiche__niveau { color: var(--texte-pale); font-size: 0.9rem; }
#siege .base-fiche__fermer { margin-left: auto; min-width: 2.2rem; min-height: 2.2rem; }
/* Un lien qui mène à la fiche (destinations.js) la fait défiler en tête : sans marge, l'en-tête collant cachait son prix. */
#siege #base-fiche-racine .batiments__fiche { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; background: none; box-shadow: none; scroll-margin-top: 4rem; }
@media (max-width: 40rem) {
  #siege #base-fiche-racine { inset: auto var(--e-1) var(--e-1) var(--e-1); width: auto; max-height: 58%; }
}

/* ── La base plein écran (5 octobre 2026) ──
   L’onglet « Le domaine » devient la base : la vue 3D occupe toute la page ; le titre, les onglets, les réserves, les
   tiroirs du palier et du bourg, la barre de la base et la fiche d’un bâtiment se posent au-dessus. Les règles portent
   le préfixe de cadre.css et une classe de plus (`.page.page`) : la règle de cadre.css qui range les blocs sous
   le bandeau a sinon la même force et vient après. */
/* `clip` et non `hidden` : un focus ou un scrollIntoView ne fait plus glisser la page sous la scène. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] { overflow: clip; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] :is(.ecran-bandeau, .cartouche, .siege__mode) { display: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil {
  position: absolute; inset: 0; z-index: 0; display: block; margin: 0; padding: 0; max-width: none;
  /* #siege est une grille : sans placement, le bloc se mesure sur toute la page et non sur sa case. */
  grid-area: auto; width: auto; height: auto; align-self: stretch; justify-self: stretch;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__vue {
  position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none;
}
/* Titre et retour à la carte : le titre à gauche, le bouton à droite, sans bandeau plein. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__entete {
  position: absolute; z-index: 4; top: var(--e-2); left: var(--e-3); right: calc(var(--e-3) + 1rem); width: auto; grid-area: auto;
  display: flex; align-items: flex-start; gap: var(--e-3); margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; pointer-events: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__entete > * { pointer-events: auto; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__entete::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__entete::after { display: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__titre {
  margin: 0; font-size: 1.15rem; text-shadow: 0 1px 2px #000, 0 0 8px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__note { display: none; }
/* Le retour se pose contre le titre : poussé à droite, il passait sous la plaque des réserves (retour du 9/10/2026). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__fermer { margin-left: 0; align-self: center; }
/* Onglets en rangée sous le titre. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] > .onglets-page.onglets-page[role="tablist"] {
  position: absolute; z-index: 4; top: 3.6rem; left: var(--e-3); right: auto; bottom: auto; grid-area: auto; height: auto;
  display: flex; flex-direction: row; gap: var(--e-1); width: auto; min-height: 0; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] > .onglets-page.onglets-page[role="tablist"] .onglets-page__entree {
  min-height: 2.3rem; margin: 0; padding: .3rem .75rem; font-size: .9rem; white-space: nowrap; text-align: center;
  border: 1px solid #0b0a09; border-radius: 4px;
}
/* Réserves : une plaque compacte en haut, au centre. La largeur laisse le titre et son « ← » libres : au téléphone
   couché (844 pixels), la plaque couvrait le retour (9/10/2026). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__reserves {
  position: absolute; z-index: 3; top: var(--e-2); right: 8.5rem; left: auto; transform: none; max-width: calc(100% - 30rem); overflow: visible;
}
/* La section défile, la racine porte le fondu et la flèche du bord qui cache (coque.js, `suivreLeDefilement`). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserves { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__reserves:is([data-bout="debut"], [data-bout="milieu"])::after,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__reserves:is([data-bout="fin"], [data-bout="milieu"])::before {
  content: "›"; position: absolute; z-index: 2; top: 1px; bottom: 1px; right: 1px; width: 18px;
  display: grid; place-items: center; border-radius: 0 3px 3px 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(20 16 12) 60%);
  color: var(--or-vif); font: 700 var(--t-5) / 1 var(--police-titre); text-shadow: 0 0 4px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__reserves:is([data-bout="fin"], [data-bout="milieu"])::before {
  content: "‹"; right: auto; left: 1px; border-radius: 3px 0 0 3px;
  background: linear-gradient(270deg, transparent, rgb(20 16 12) 60%);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserves__barre {
  display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px;
  background: linear-gradient(180deg, rgb(40 32 24 / .92), rgb(20 16 12 / .92));
  border: 1px solid rgb(184 150 79 / .7); border-radius: 3px; box-shadow: 0 3px 10px rgb(0 0 0 / .55);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve {
  display: grid; grid-template-columns: 1.6rem auto auto; grid-template-areas: "marque stock debit";
  column-gap: .35rem; row-gap: 0; align-items: center; flex: none; min-width: 0; padding: .2rem .5rem; margin: 0;
  background: none; border: 0; border-right: 1px solid rgb(184 150 79 / .25); box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve:last-child { border-right: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve__marque { grid-area: marque; display: block; width: 1.6rem; height: 1.6rem; max-width: none; object-fit: contain; }
/* Nom, heure du plafond et perte restent lus par le lecteur d’écran ; la plaque montre le stock et le débit. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] :is(.domaine-reserve__nom, .domaine-reserve__plein, .domaine-reserve__perte) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve__stock { grid-area: stock; font-size: .95rem; line-height: 1.1; white-space: nowrap; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve__debit { grid-area: debit; font-size: .75rem; line-height: 1.1; white-space: nowrap; }
/* Le bilan avant de partir aussi : la relève l'annonce, le lecteur d'écran le lit (il disparaissait tout entier). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserves__depart {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Tiroirs du palier et du bourg, à gauche sous les onglets ; un seul ouvert. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau {
  position: absolute; z-index: 3; top: 4rem; bottom: 4.6rem; left: var(--e-3); width: min(23rem, 40%);
  display: none; overflow: hidden auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgb(34 28 22 / .95), rgb(18 15 12 / .95));
  border: 1px solid rgb(184 150 79 / .7); border-radius: 3px; box-shadow: 0 6px 18px rgb(0 0 0 / .6);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="palier"] .base-panneau--palier,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="bourg"] .base-panneau--bourg,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="recherches"] .base-panneau--recherches,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="batiments"] .base-panneau--batiments,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="marche"] .base-panneau--marche,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="caserne"] .base-panneau--caserne,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil[data-panneau="construire"] .base-panneau--construire { display: block; }
/* Les recherches : une liste de fiches, plus large que le palier. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau--recherches { width: min(30rem, 46%); padding: var(--e-2); }
/* Le marché : quatre colonnes (ressource, réserve, prix, mieux payé) ; à 30rem, « Vivres » se coupait en deux. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau--marche { width: min(38rem, 54%); padding: var(--e-2); }
/* La liste comparable des ouvrages : la plus large, la vue reste visible à droite. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau--batiments { width: min(40rem, 58%); padding: var(--e-2); }
/* La base montre ses réserves avec plafond, débit et heure du plein (domaine.jsx) : le coffre du bandeau, qui répétait
   les mêmes nombres juste au-dessus, s'efface tant qu'elle est ouverte (audit du 7/10/2026, 9.3). Seule la visibilité
   change : le coffre garde sa place et le bandeau ne bouge pas. */
html[data-page-ouverte="siege"]:has(#siege.page[data-onglet-ouvert="domaine"]) .hud .bandeau .bandeau__coffre { visibility: hidden; }

/* La caserne façon Manor Lords : la barre des unités en bas de la vue, sa fiche au-dessus (jeu/styles/caserne.css) ;
   le tiroir couvre la scène sans la masquer, et laisse la place de la fiche d’un ouvrage à droite. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] :is(.base-panneau--caserne, .base-panneau--construire) {
  top: 4rem; bottom: 4.6rem; left: var(--e-3); right: var(--e-3); width: auto; padding: 0;
  overflow: visible; background: none; border: 0; box-shadow: none; pointer-events: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:has(#base-fiche-racine .base-fiche) :is(.base-panneau--caserne, .base-panneau--construire) { right: calc(var(--e-3) + min(19rem, 30%) + var(--e-2)); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau > * { margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau .cadre { border: 0; box-shadow: none; background: none; }
/* Barre de la base en bas à gauche, sous le tiroir ; les cadrages de la visite tiennent le coin droit. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-hud-racine {
  position: absolute; z-index: 4; bottom: var(--e-2); left: var(--e-3);
}
#siege .base-hud { display: flex; gap: var(--e-1); padding: 4px; background: rgb(20 16 12 / .88); border: 1px solid rgb(184 150 79 / .7); border-radius: 3px; box-shadow: 0 4px 12px rgb(0 0 0 / .6); }
#siege .base-hud__bouton { min-height: 2.6rem; white-space: nowrap; }
#siege .base-hud__bouton.est-actif { outline: 2px solid var(--or-vif, #e8c35a); outline-offset: -2px; }
/* Les trois cadrages de la visite (domaine, exploitations, cité) : en bas à droite, au-dessus de la scène. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-vue__outils {
  position: absolute; z-index: 4; right: var(--e-3); bottom: var(--e-2); margin: 0;
  padding: 4px; background: rgb(20 16 12 / .88); border: 1px solid rgb(184 150 79 / .7); border-radius: 3px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #siege-3d .visite__toile { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Fiche d’un bâtiment : à droite, sous la ligne du titre. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine { top: 4rem; bottom: 4.6rem; right: var(--e-3); max-height: none; align-items: flex-start; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine .base-fiche { max-height: 100%; }
/* Sur la base, le chantier (prix, durée, bouton) passe en tête de la fiche : l’ordre se lit sans défiler. */
#siege #base-fiche-racine .batiments__fiche > .batiments__colonne:has(.batiments__actes) { order: -1; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] :is(.domaine-accueil, .domaine-accueil__vue) { overflow: clip; }

@media (max-width: 46rem) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__titre { font-size: 1rem; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] > .onglets-page.onglets-page[role="tablist"] {
    top: 4.7rem; left: var(--e-1); right: var(--e-1); overflow-x: auto; scrollbar-width: none;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__reserves {
    top: 4.6rem; left: var(--e-1); right: var(--e-1); transform: none; max-width: none;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserves__barre { width: max-content; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve__marque { width: 1.5rem; height: 1.5rem; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau {
    top: auto; bottom: 7.2rem; left: var(--e-1); right: var(--e-1); width: auto; max-height: 52%;
  }
  /* La caserne prend la hauteur sous les cadrages : la barre en bas, la fiche au-dessus. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] :is(.base-panneau--caserne, .base-panneau--construire) { top: 10.4rem; max-height: none; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:has(#base-fiche-racine .base-fiche) :is(.base-panneau--caserne, .base-panneau--construire) { right: var(--e-1); }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-hud-racine { left: var(--e-1); right: var(--e-1); transform: none; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-vue__outils {
    top: 7.6rem; bottom: auto; left: var(--e-1); right: var(--e-1); justify-content: center;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-vue__outils .carte__outil {
    flex: 1 1 0; min-width: 0; min-height: 2.4rem; padding: .25rem .4rem; font-size: .85rem; white-space: nowrap;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] > .onglets-page.onglets-page[role="tablist"] .onglets-page__entree {
    min-height: 2.2rem; padding: .25rem .6rem; font-size: .85rem;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .dialogue__fermer { position: relative; z-index: 5; font-size: .85rem; }
  #siege .base-hud { justify-content: center; }
  /* Six commandes sur 390 pixels (7 octobre 2026, la caserne en plus) : deux rangées de trois, chaque mot sur une ligne.
     La règle des boutons du cadre l'emportait sur un sélecteur plus court. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-hud .base-hud__bouton { min-width: 0; min-height: 2.4rem; padding-inline: .2rem; font-size: .85rem; white-space: nowrap; }
  /* Entre les cadrages et la rangée des médaillons, haut et bas fixés : avec un haut libre et un plafond en %, la
     racine n'avait pas de hauteur définie, et la fiche débordait sous les médaillons (8 octobre 2026). Le suivi du
     palier s'efface tant qu'une fiche est ouverte. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine { top: 11rem; bottom: 9rem; left: var(--e-1); right: var(--e-1); width: auto; max-height: none; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:has(#base-fiche-racine .base-fiche) .base-suivi-racine { display: none; }
}

/* ── La base façon jeu de stratégie (7 octobre 2026) ──
   D'après la capture d'une publicité GTArcade (« pourrait on s'inspirer de cette interface pour notre jeu ? ») : la vue
   3D sans cadre ni marge, du bandeau jusqu'au bas de l'écran au bureau ; les commandes en médaillons ronds, en colonne à
   droite (en rangée au téléphone), habillés comme les poignées du bandeau (cadre.css, section du HUD) ; le suivi du
   palier et des ordres en haut à gauche ; une jauge au-dessus de chaque chantier (jeu/ecrans/siege.js). Les tiroirs et
   la barre de la caserne s'arrêtent au-dessus de la barre d'actions. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] {
  border: 0; border-image: none; box-shadow: none; background: #0b0907;
}
@media (min-width: 60.0625rem) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] {
    top: var(--bord-haut, 64px); bottom: 0; left: 0; right: 0;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau {
    bottom: calc(var(--bord-bas, 90px) + var(--e-2));
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] :is(.base-panneau--caserne, .base-panneau--construire) {
    bottom: calc(var(--bord-bas, 90px) + var(--e-2)); right: calc(var(--e-3) + 5.5rem);
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:has(#base-fiche-racine .base-fiche) :is(.base-panneau--caserne, .base-panneau--construire) {
    right: calc(var(--e-3) + 5.5rem + min(19rem, 30%) + var(--e-2));
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-vue__outils {
    bottom: calc(var(--bord-bas, 90px) + var(--e-2)); right: calc(var(--e-3) + 5.5rem);
  }
  /* La barre des troupes prend le bas de la vue : les cadrages reviennent quand la caserne se ferme. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:is([data-panneau="caserne"], [data-panneau="construire"]) .domaine-vue__outils { display: none; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine {
    /* Au-dessus des trois cadrages (domaine, exploitations, cité) : sans cette marge, le bas de la fiche, ses
       travailleurs et leurs crans, passait sous eux. */
    right: calc(var(--e-3) + 5.5rem); bottom: calc(var(--bord-bas, 90px) + 2 * var(--e-2) + 3.5rem);
  }
  /* La colonne des médaillons, au bord droit, sous le retour vers la cité. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-hud-racine {
    left: auto; right: var(--e-3); top: 4.2rem; bottom: auto;
  }
  #siege .base-hud.base-hud { flex-direction: column; align-items: center; gap: .55rem; padding: 0; background: none; border: 0; box-shadow: none; }
}

/* Le médaillon : un rond de cuir cerclé de fer et d'or, l'icône gravée au milieu, le mot dessous. Le préfixe à six
   identifiants passe devant la règle des boutons du cadre commun. */
html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 4.6rem; min-width: 0; min-height: 0; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; outline: none;
  color: var(--hud-or-clair, #f0d9a0); text-transform: none; letter-spacing: 0; cursor: pointer;
}
html:not(#c#c#c#c#c#c) #siege .base-hud__rond {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; padding: .55rem; box-sizing: border-box;
  border: 2px solid #0c0906; border-radius: 50%;
  background: var(--hud-grain), radial-gradient(circle at 50% 38%, #4a3522, #22170d 72%);
  box-shadow: inset 0 2px 3px rgb(255 225 170 / .18), inset 0 -3px 5px rgb(0 0 0 / .7), 0 0 0 3px #3b3f44,
    0 0 0 4px var(--hud-or-filet, #b8964f), 0 0 0 5px #0c0906, var(--hud-ombre, 0 6px 16px rgb(0 0 0 / .55));
  transition: filter 140ms ease, transform 140ms ease;
}
html:not(#c#c#c#c#c#c) #siege .base-hud__rond img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .85)); }
html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon:is(:hover, :focus-visible) .base-hud__rond { filter: brightness(1.18); }
html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon:focus-visible .base-hud__rond { outline: 2px solid var(--hud-or-clair, #f0d9a0); outline-offset: 6px; }
html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon:active .base-hud__rond { transform: translateY(1px); }
html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon.est-actif { outline: none; }
html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon.est-actif .base-hud__rond {
  background: var(--hud-grain), radial-gradient(circle at 50% 38%, #6b4b25, #2e1f0f 72%);
  box-shadow: inset 0 2px 3px rgb(255 225 170 / .25), inset 0 -3px 5px rgb(0 0 0 / .7), 0 0 0 3px #b8964f,
    0 0 0 4px #f0d9a0, 0 0 0 5px #0c0906, 0 0 14px rgb(240 217 160 / .55);
}
html:not(#c#c#c#c#c#c) #siege .base-hud__mot {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 .74rem / 1.1 var(--police-titre, serif); text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
/* La pastille : la goutte de cire du bandeau. */
html:not(#c#c#c#c#c#c) #siege .base-hud__pastille {
  position: absolute; top: -5px; right: .35rem; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 10px;
  background: radial-gradient(circle at 40% 30%, #d6453a, #7e1d16 70%);
  box-shadow: inset 0 1px 1px rgb(255 200 180 / .5), 0 0 0 2px #0c0906, 0 2px 3px rgb(0 0 0 / .6);
  color: #fff3e6; font: 700 .72rem / 1 var(--police-titre, serif);
}
/* Les écrans de faible hauteur resserrent la colonne : elle doit finir au-dessus des cadrages de la vue. */
@media (min-width: 60.0625rem) and (max-height: 50rem) {
  html:not(#c#c#c#c#c#c) #siege .base-hud__rond { width: 2.9rem; height: 2.9rem; padding: .45rem; }
  #siege .base-hud.base-hud { gap: .35rem; }
}

/* ── Le suivi de la base : le palier visé et les ordres en cours, en haut à gauche ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-suivi-racine {
  position: absolute; z-index: 3; top: 3.6rem; left: var(--e-3); width: min(18rem, 34%);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page:not([data-onglet-ouvert="domaine"]) .base-suivi-racine,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:not([data-panneau=""]) .base-suivi-racine { display: none; }
#siege .base-suivi { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#siege .base-suivi__ordres { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
#siege .base-suivi__ordres > li { margin: 0; padding: 0; }
html:not(#c#c#c#c#c#c) #siege button:is(.base-suivi__objectif, .base-suivi__ordre, .base-suivi__libre) {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .45rem; row-gap: 3px;
  width: 100%; min-height: 0; margin: 0; padding: .35rem .55rem; box-sizing: border-box;
  text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer;
  color: var(--parchemin, #e9dcc0); font: 500 .82rem / 1.2 var(--police-texte, serif);
  background: linear-gradient(90deg, rgb(20 15 10 / .86), rgb(20 15 10 / .55) 75%, rgb(20 15 10 / 0));
  border: 0; border-left: 3px solid var(--hud-or-filet, #b8964f); border-radius: 0; box-shadow: none;
  text-shadow: 0 1px 2px #000;
}
html:not(#c#c#c#c#c#c) #siege button:is(.base-suivi__objectif, .base-suivi__ordre, .base-suivi__libre):is(:hover, :focus-visible) {
  background: linear-gradient(90deg, rgb(52 38 22 / .92), rgb(36 27 17 / .6) 75%, rgb(20 15 10 / 0));
}
html:not(#c#c#c#c#c#c) #siege button.base-suivi__objectif { grid-template-columns: 1fr auto; }
/* Une place de chantier libre : l'ordre à donner, en tête du suivi, filet vert (9/10/2026). */
html:not(#c#c#c#c#c#c) #siege button.base-suivi__libre { border-left-color: #9fd36a; }
#siege .base-suivi__verbe { white-space: nowrap; font-family: var(--police-titre, serif); font-weight: 600; color: #b9de8c; }
#siege .base-suivi__but { font-family: var(--police-titre, serif); font-weight: 600; color: var(--hud-or-clair, #f0d9a0); }
#siege .base-suivi__compte, #siege .base-suivi__reste { white-space: nowrap; font-variant-numeric: tabular-nums; color: #d9c79f; }
#siege .base-suivi__icone { width: 1.35rem; height: 1.35rem; object-fit: contain; filter: drop-shadow(0 1px 1px #000); }
#siege .base-suivi__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#siege .base-suivi__jauge { grid-column: 1 / -1; display: block; }
#siege .base-suivi__jauge .jauge-parure__rail {
  display: block; height: 5px; border: 1px solid #070605; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, #0b0a08, #1d1a16); box-shadow: inset 0 1px 2px rgb(0 0 0 / .8);
}
#siege .base-suivi__jauge .jauge-parure__part {
  display: block; height: 100%; background: linear-gradient(180deg, #f0d9a0, #b8964f 55%, #7d5f28);
}

@media (max-width: 60rem) {
  /* Au téléphone : la rangée de médaillons au bas de la vue, le suivi resserré sous les réserves. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-hud { display: flex; justify-content: space-around; gap: 2px; padding: 4px 2px 2px; }
  html:not(#c#c#c#c#c#c) #siege button.base-hud__medaillon { width: 3.5rem; gap: 2px; }
  html:not(#c#c#c#c#c#c) #siege .base-hud__rond { width: 2.7rem; height: 2.7rem; padding: .42rem; }
  html:not(#c#c#c#c#c#c) #siege .base-hud__mot { font-size: .62rem; }
  html:not(#c#c#c#c#c#c) #siege .base-hud__pastille { right: .1rem; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-suivi-racine { top: 10.4rem; left: var(--e-1); width: min(15rem, 62%); }
}

/* ── Les jauges des chantiers, au-dessus de la scène (jeu/ecrans/siege.js, `suivreLesChantiers`) ──
   Une plaque de cuir sombre filetée d'or, accrochée par une pointe au-dessus de l'échafaudage : l'ordre, le temps qui
   reste, la part faite. Elles ne prennent pas le clic : la scène reste désignable au travers. */
#siege #siege-3d .domaine-bulles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#siege #siege-3d .domaine-bulle {
  position: absolute; left: 0; top: 0; margin-top: -10px;
  display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .6rem; row-gap: 4px;
  min-width: 9rem; padding: .3rem .55rem .4rem; box-sizing: border-box;
  color: var(--parchemin, #e9dcc0); font: 500 .74rem / 1.15 var(--police-texte, serif); white-space: nowrap;
  background: var(--hud-grain), linear-gradient(180deg, rgb(44 33 22 / .94), rgb(20 15 10 / .94));
  border: 1px solid #0c0906; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .75), 0 4px 10px rgb(0 0 0 / .6);
  text-shadow: 0 1px 1px #000;
}
#siege #siege-3d .domaine-bulle[hidden] { display: none; }
/* La pointe, vers le chantier. */
#siege #siege-3d .domaine-bulle::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: rgb(20 15 10 / .94); border-right: 1px solid rgb(184 150 79 / .75); border-bottom: 1px solid rgb(184 150 79 / .75);
}
#siege #siege-3d .domaine-bulle__nom { font-family: var(--police-titre, serif); font-weight: 600; color: var(--hud-or-clair, #f0d9a0); }
#siege #siege-3d .domaine-bulle__reste { justify-self: end; font-variant-numeric: tabular-nums; color: #d9c79f; }
#siege #siege-3d .domaine-bulle__rail {
  grid-column: 1 / -1; display: block; height: 6px; overflow: hidden;
  background: linear-gradient(180deg, #0b0a08, #1d1a16); border: 1px solid #070605; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .8);
}
#siege #siege-3d .domaine-bulle__part { display: block; height: 100%; background: linear-gradient(180deg, #f0d9a0, #b8964f 55%, #7d5f28); }
@media (max-width: 60rem) {
  #siege #siege-3d .domaine-bulle { min-width: 7.5rem; padding: .25rem .45rem .35rem; font-size: .66rem; }
}

/* La liste comparable dans son tiroir (audit du 7 octobre 2026) : le tiroir mesure 638 pixels au bureau, en 1280 comme
   en 1920, et les six colonnes en demandaient 771 ; Durée et Bras sortaient du cadre. Les colonnes se règlent sur la
   largeur du tiroir. Au téléphone, la liste garde ses deux étages. */
#siege .base-panneau--batiments { container: tiroir-batiments / inline-size; }
@media (min-width: 46.0625rem) {
  @container tiroir-batiments (min-width: 30rem) {
    #siege #batiments-racine .batiments__entetes,
    #siege #batiments-racine button.batiments__rangee {
      grid-template-columns: minmax(8.5rem, 1.5fr) 3.6rem minmax(7.5rem, 1.3fr) minmax(5rem, 1fr) 3.8rem 3.2rem;
      column-gap: var(--e-2);
    }
    #siege #batiments-racine .batiments__entetes { letter-spacing: 0.06em; }
  }
}

/* Le retour d'une action sur la base (9 octobre 2026) : la vue tient tout l'écran et la barre de construction le bas,
   où la bande pleine de coque.css couvrait les prix des cartes. Il se pose en haut, sous la plaque des réserves qu'il
   commente, et ne prend jamais le doigt (pointer-events: none, coque.css). */
html[data-vue="jeu"][data-page-ouverte="siege"]:has(#siege[data-onglet-ouvert="domaine"]) #retour-action#retour-action {
  top: calc(var(--marge-haut) + var(--barre-haut) + 3.6rem); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: max-content;
  max-width: min(34rem, calc(100vw - 2rem)); border-width: 1px; box-shadow: var(--ombre-2);
}
@media (max-width: 45.99rem) {
  html[data-vue="jeu"][data-page-ouverte="siege"]:has(#siege[data-onglet-ouvert="domaine"]) #retour-action#retour-action {
    top: calc(var(--marge-haut) + var(--barre-haut) + 3.4rem);
  }
}
/* Posé en haut, le retour ne fait pas remonter la page comme la bande pleine des autres écrans (coque.css) : les cinq
   médaillons sautaient de 50 pixels et laissaient voir la vue entre eux et la barre du bas (téléphone, 16/10/2026). */
html[data-vue="jeu"][data-page-ouverte="siege"]:has(#siege[data-onglet-ouvert="domaine"]):has(#retour-action:not([hidden])) .page {
  bottom: calc(var(--marge-bas) + var(--barre-bas));
}

/* Téléphone couché (16 octobre 2026) : la page tient 278 pixels entre le bandeau et la barre du bas. La barre de 210
   pixels des ouvrages débordait sur le titre et le retour vers la carte. Les tiroirs, les barres des ouvrages et des
   troupes comme la fiche d'un bâtiment prennent le bas à droite des cinq médaillons (17,5rem et leurs marges), sous la
   ligne du titre, à la place des cadrages ; tiroir et fiche s'y relaient (TELEPHONE, interface/composants/domaine.jsx). */
@media (orientation: landscape) and (max-height: 520px) {
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .base-panneau,
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:has(#base-fiche-racine .base-fiche) :is(.base-panneau--caserne, .base-panneau--construire),
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine {
    top: 4.9rem; bottom: var(--e-2); left: calc(var(--e-3) + 17.5rem + 14px + var(--e-2)); right: var(--e-3);
    width: auto; max-height: none;
  }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine { align-items: stretch; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] #base-fiche-racine .base-fiche { width: 100%; }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil:is(:not([data-panneau=""]), :has(#base-fiche-racine .base-fiche)) .domaine-vue__outils { display: none; }
  /* La plaque des réserves prend la largeur libre à droite du retour : la pierre et le fer passaient hors de l'écran. */
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-accueil__reserves { right: var(--e-3); max-width: calc(100% - 18.5rem); }
  html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page.page[data-onglet-ouvert="domaine"] .domaine-reserve { column-gap: .25rem; padding-inline: .3rem; }
  /* Champ, bouton et minimum de la vente sur une rangée : le bouton et la raison de son refus restent dans le tiroir.
     Le mot « Quantité à vendre » reste lu par le lecteur d'écran. */
  #siege.page .economie__champ > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #siege.page .economie__champ input { width: 4.5rem; }
  #siege.page .economie__vente { align-items: center; }
  #siege.page .economie__vente > .economie__minimum { flex: 1 1 8rem; }
}