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

   La planche de direction artistique pose un ecu qui pend en haut a gauche,
   le titre en grand serif, une colonne de pierre a gauche avec la situation
   et l objectif, trois fiches de parchemin cote a cote au milieu, et une
   poutre de bois en bas qui porte le bouton rouge. Les trois fiches portent
   les memes lignes dans le meme ordre : c est ce qui permet de comparer.

   Tous les selecteurs partent de #siege. Cette feuille se charge apres les
   autres, elle n a donc besoin d aucun !important. */


/* ── Le fond de l ecran ──────────────────────────────────────────────────
   Sur la planche, tout est pose sur de la pierre presque noire, avec une
   lueur d incendie au loin. Deux degrades suffisent : une image de fond de
   plus couterait un chargement pour un decor. */

#siege.page {
  position: relative;
  background:
    radial-gradient(120% 55% at 72% 0%, color-mix(in srgb, var(--cire) 16%, transparent), transparent 58%),
    radial-gradient(90% 60% at 8% 8%, color-mix(in srgb, var(--or) 7%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-1) 98%, transparent), color-mix(in srgb, var(--pierre-0) 99%, transparent));
  border-color: var(--or-fonce);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--or) 14%, transparent), var(--ombre-3);
}


/* ── L entete : l ecu qui pend, le titre, le trait d or ──────────────────
   La planche accroche l ecu au bord haut, a gauche du titre. Il est pose en
   absolu pour ne pas entrer dans la grille de l entete, que cette feuille ne
   possede pas. */

#siege.page .dialogue__entete {
  position: relative;
  padding-left: 4.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}

#siege .siege__fanion {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4rem;
  height: 4.4rem;
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce) 78%);
  border: 1px solid var(--or);
  box-shadow: var(--ombre-2);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%);
}

#siege .siege__fanion-marque {
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: var(--e-3);
  fill: none;
  stroke: var(--or-vif);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#siege.page .dialogue__titre {
  font-family: var(--police-titre);
  color: var(--parchemin-clair);
  text-shadow: var(--ombre-texte);
}

#siege.page .siege__mode {
  color: var(--or);
  opacity: 0.85;
}


/* ── Le haut de l ecran : la colonne de pierre, puis la vue ──────────────
   La planche met la colonne a gauche et l image large a droite. La grille du
   jeu les pose dans l autre sens ; l ordre se retourne sans toucher au HTML. */

#siege .siege-hero {
  grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.9fr);
  align-items: start;
  gap: var(--e-4);
}

#siege .siege-hero__etat {
  order: 1;
  position: relative;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-4);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--or) 9%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 97%, transparent), color-mix(in srgb, var(--pierre-0) 99%, transparent));
  border: 1px solid var(--or-fonce);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--or) 16%, transparent), var(--ombre-2);
}

/* Les ferrures d angle de la planche, tracees au bord. */
#siege .siege-hero__etat::before,
#siege .siege-hero__etat::after {
  content: "";
  position: absolute;
  width: 0.95rem;
  height: 0.95rem;
  border: 0 solid var(--or);
  opacity: 0.7;
  pointer-events: none;
}

#siege .siege-hero__etat::before { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
#siege .siege-hero__etat::after { right: 4px; bottom: 4px; border-right-width: 2px; border-bottom-width: 2px; }

#siege .siege-hero__vue {
  order: 2;
  border: 1px solid var(--or-fonce);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--or) 22%, transparent), inset 0 0 40px color-mix(in srgb, var(--pierre-0) 75%, transparent), var(--ombre-3);
}


/* ── La situation et l objectif ──────────────────────────────────────────
   Sur la planche, chaque bloc porte un petit titre souligne d or, et chaque
   ligne tient sur un rang : la marque, le mot, la valeur a droite. */

#siege.page .siege-etat__enseigne {
  margin: var(--e-2) 0 var(--e-0);
  padding-bottom: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}

#siege.page .siege-etat__enseigne:first-child { margin-top: 0; }

/* La planche lit la colonne de haut en bas : la situation, l objectif, le
   marche, puis les gens. Le HTML les pose dans un autre ordre et cette
   feuille ne le possede pas ; la colonne est en pile, l ordre se retourne. */
#siege .siege-hero__etat > #siege-legende { order: 1; }
#siege .siege-hero__etat > #siege-marche { order: 3; }
#siege .siege-hero__etat > .bourg { order: 4; }

#siege .siege-etat__table {
  display: flex;
  flex-direction: column;
}

#siege .siege-etat__ligne {
  display: grid;
  grid-template-columns: 1.35rem minmax(5.5rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-0);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 12%, transparent);
}

#siege .siege-etat__ligne:last-child { border-bottom: 0; }

#siege .siege-etat__ligne--long { grid-template-columns: 1.35rem minmax(0, 1fr); }

#siege .siege-etat__ligne--long .siege-etat__valeur {
  grid-column: 2;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: 1.45;
  text-align: left;
  color: var(--texte-pale);
}

#siege .siege-etat__marque {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

#siege.page .siege-etat__mot {
  min-width: 0;
  font-size: var(--t-3);
  color: var(--texte-pale);
}

#siege .siege-etat__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  text-align: right;
  color: var(--parchemin);
}

/* L avancement : la jauge segmentee du socle, et le compte a cote. */
#siege .siege-etat__avancement {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 9rem;
}

#siege .siege-etat__avancement .jauge-parure__rail { min-width: 3.5rem; }

#siege .siege-etat__compte {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  color: var(--or-vif);
}

#siege.page .siege__palier,
#siege.page .siege__effets {
  margin: var(--e-1) 0 0;
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--texte-pale);
}

#siege.page .siege__palier { color: var(--parchemin); }
#siege.page .siege__effets--suivante { color: var(--or); opacity: 0.9; }

#siege .siege__batiments {
  margin: var(--e-1) 0 0;
  padding: 0;
  list-style: none;
}

#siege.page .siege__batiments li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--or) 18%, transparent);
}

#siege.page .siege__batiments li:last-child { border-bottom: 0; }
#siege .siege__batiment-nom { color: var(--parchemin); font-size: var(--t-3); }

#siege .siege__batiment-niveau {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  color: var(--or);
}

#siege.page .siege__vide {
  margin: var(--e-1) 0 0;
  font-size: var(--t-3);
  color: var(--texte-pale);
}


/* Les gens du bourg tiennent treize lignes et poussaient la vue du domaine a
   deux mille pixels plus bas. La colonne de la planche reste courte : la liste
   defile a l interieur. */

#siege .siege-hero__etat .bourg__liste {
  max-height: 17rem;
  overflow-y: auto;
  padding-right: var(--e-1);
}


#siege #siege-marche {
  margin: 0;
  font-size: var(--t-3);
  color: var(--texte-pale);
}


/* ── Le telephone ────────────────────────────────────────────────────────
   La colonne passe au-dessus de la vue. Les trois fiches « Choisir le
   chantier » sont parties le 24/09/2026 avec leurs règles : la liste
   comparable des ouvrages (parure-domaine.css) les remplace. */

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

@media (max-width: 30rem) {
  #siege.page .dialogue__entete { padding-left: 3.6rem; }
  #siege .siege__fanion { width: 2.7rem; height: 3.5rem; }
  #siege .siege__fanion-marque { width: 1.3rem; height: 1.3rem; margin-bottom: var(--e-2); }
}