/* La barre de construction de la base (9 octobre 2026, interface/composants/construction.jsx), même habit que la caserne
   (caserne.css) : les cartes des ouvrages en bas de la vue, la fiche de l'ouvrage choisi au-dessus, les chantiers en
   cours au bord gauche. La place du tiroir vit dans parure-domaine.css ; ici, son contenu. Les boutons portent un
   préfixe à six identifiants : la règle des boutons du cadre commun en a cinq et passerait devant. */

#siege :is(#construction, #construction-racine) { height: 100%; pointer-events: none; }
#siege #construction .construction {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--e-2);
  height: 100%; min-height: 0; pointer-events: none;
}
#siege #construction .construction > * { pointer-events: auto; }
#siege #construction .construction__attente {
  margin: 0; padding: var(--e-2) var(--e-3); color: var(--parchemin);
  background: rgb(20 16 12 / .92); border: 1px solid rgb(184 150 79 / .6); border-radius: 3px;
}

/* ── La barre ── */
#siege #construction .construction__barre {
  flex: none; display: flex; align-items: stretch; gap: 6px; max-width: 100%; padding: 6px;
  background: linear-gradient(180deg, rgb(44 35 26 / .95), rgb(18 15 12 / .96));
  border: 1px solid rgb(184 150 79 / .7); border-radius: 3px;
  box-shadow: 0 6px 18px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 232 180 / .08);
}
#siege #construction .construction__milieu { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Les sortes : une rangée d'onglets courts au-dessus des cartes ; le chiffre dit combien se bâtissent tout de suite. */
#siege #construction .construction__sortes { display: flex; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html:not(#c#c#c#c#c#c) #siege #construction button.construction__sorte {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 0; margin: 0; padding: .2rem .6rem;
  font: 600 .74rem / 1.2 var(--police-titre, serif); letter-spacing: .02em; text-transform: none; white-space: nowrap;
  color: var(--parchemin-bas, #c9b994); background: rgb(0 0 0 / .3); border: 1px solid rgb(184 150 79 / .3); border-radius: 3px; box-shadow: none;
}
html:not(#c#c#c#c#c#c) #siege #construction button.construction__sorte:is(:hover, :focus-visible) { color: var(--parchemin, #e9dcc0); border-color: rgb(232 195 90 / .7); }
html:not(#c#c#c#c#c#c) #siege #construction button.construction__sorte[aria-pressed="true"] {
  color: var(--or-vif, #e8c35a); background: rgb(70 52 30 / .75); border-color: var(--or-vif, #e8c35a);
}
#siege #construction .construction__sorte-prets {
  display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; box-sizing: border-box;
  border-radius: .55rem; font-size: .66rem; color: #10140c; background: #9fd36a; box-shadow: 0 0 0 1px #0c0906;
}

#siege #construction .construction__cartes {
  display: flex; gap: 6px; min-width: 0; margin: 0; padding: 4px 2px 2px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
#siege #construction .construction__carte { flex: none; margin: 0; padding: 0; background: none; box-shadow: none; }

/* La carte : le nom en tête, la marque au centre, le niveau visé en coin, le gain, puis le prix et la durée au pied. */
html:not(#c#c#c#c#c#c) #siege #construction button.construction__carte-bouton {
  position: relative; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center;
  width: 7.4rem; height: 9.4rem; min-height: 0; margin: 0; padding: 0; overflow: hidden; cursor: pointer;
  text-transform: none; letter-spacing: 0; color: var(--parchemin, #e9dcc0);
  background: radial-gradient(ellipse at 50% 40%, #2f281f 0%, #14110e 72%);
  border: 1px solid #0b0a09; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .4), 0 2px 6px rgb(0 0 0 / .6);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
html:not(#c#c#c#c#c#c) #siege #construction button.construction__carte-bouton:is(:hover, :focus-visible) {
  transform: translateY(-2px); filter: brightness(1.12);
  box-shadow: inset 0 0 0 1px rgb(232 195 90 / .8), 0 4px 10px rgb(0 0 0 / .7);
}
html:not(#c#c#c#c#c#c) #siege #construction .construction__carte.est-choisie > button.construction__carte-bouton {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px var(--or-vif, #e8c35a), 0 0 14px rgb(232 195 90 / .45), 0 4px 10px rgb(0 0 0 / .7);
}
/* Prête : un filet vert, l'ordre à donner. En chantier : la jauge d'or du suivi. */
html:not(#c#c#c#c#c#c) #siege #construction .construction__carte.est-pret > button.construction__carte-bouton {
  box-shadow: inset 0 0 0 1px rgb(159 211 106 / .75), 0 2px 6px rgb(0 0 0 / .6);
}
html:not(#c#c#c#c#c#c) #siege #construction .construction__carte.est-chantier > button.construction__carte-bouton {
  box-shadow: inset 0 0 0 1px rgb(232 195 90 / .65), 0 2px 6px rgb(0 0 0 / .6);
}
#siege #construction .construction__carte-nom {
  align-self: start; width: 100%; padding: .3rem .25rem .1rem; box-sizing: border-box;
  font-size: .74rem; line-height: 1.1; font-variant-caps: small-caps; letter-spacing: .02em; text-align: center;
  color: var(--parchemin, #e9dcc0); text-shadow: 0 1px 2px #000;
}
#siege #construction .construction__carte-niveau {
  position: absolute; top: 1.45rem; left: .25rem; padding: .05rem .3rem;
  font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--or, #c9a75a);
  background: #1a1510; border: 1px solid rgb(184 150 79 / .7); border-radius: .6rem;
}
#siege #construction .construction__carte-marque { display: grid; place-items: center; }
#siege #construction .construction__carte-marque .batiments__marque { display: block; width: 3.2rem; height: 3.2rem; filter: drop-shadow(0 2px 3px #000); }
#siege #construction .construction__carte.est-ferme .construction__carte-marque .batiments__marque { filter: grayscale(.85) brightness(.55); }
/* La vignette rendue de l'ouvrage au palier visé (tools/rendre-les-vignettes-des-ouvrages.mjs) ; la marque peinte passe
   en médaillon dans son coin, et reprend la place si la vignette manque. */
#siege #construction .construction__carte-vue { position: relative; display: block; align-self: stretch; width: 100%; min-height: 0; }
#siege #construction .construction__carte-vue img {
  display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45));
}
#siege #construction .construction__carte-vue .construction__carte-marque { position: absolute; left: .2rem; bottom: 0; }
#siege #construction .construction__carte-vue .construction__carte-marque .batiments__marque { width: 1.35rem; height: 1.35rem; }
#siege #construction .construction__carte.est-ferme .construction__carte-vue img { filter: grayscale(.8) brightness(.5); }
#siege #construction .construction__carte-vue.est-sans-vue img { display: none; }
#siege #construction .construction__carte-vue.est-sans-vue .construction__carte-marque { position: static; display: grid; place-items: center; height: 100%; }
#siege #construction .construction__carte-vue.est-sans-vue .construction__carte-marque .batiments__marque { width: 3.2rem; height: 3.2rem; }
#siege #construction .construction__carte-chantier {
  position: absolute; top: 1.45rem; right: .25rem; padding: .05rem .3rem; font-size: .66rem; white-space: nowrap;
  color: #1b1408; background: var(--or, #c9a75a); border-radius: .6rem;
}
#siege #construction .construction__carte-gain { min-height: 1.15rem; padding: 0 .2rem; font-size: .72rem; color: #b9de8c; text-align: center; }
#siege #construction .construction__carte-gain .batiments__gain { display: inline-flex; align-items: center; gap: .2rem; }
#siege #construction .construction__carte-gain .batiments__medaillon { width: .95rem; height: .95rem; }
#siege #construction .construction__carte-pied {
  align-self: end; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; padding: .2rem .15rem .25rem; box-sizing: border-box;
  background: linear-gradient(180deg, #2a2219, #15110d); border-top: 1px solid rgb(184 150 79 / .55);
}
#siege #construction .construction__carte-prix { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .35rem; }
#siege #construction :is(.construction__piece, .construction__carte-duree, .construction__carte-rang) {
  display: inline-flex; align-items: center; gap: .15rem; font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#siege #construction :is(.construction__piece, .construction__carte-duree, .construction__carte-rang) img { width: .85rem; height: .85rem; flex: none; }
#siege #construction .construction__piece { color: var(--parchemin, #e9dcc0); }
#siege #construction .construction__piece.est-court { color: #ef8f7a; }
#siege #construction .construction__carte-duree { color: #d9c79f; }
#siege #construction .construction__carte-rang { color: #e5a58f; font-size: .66rem; }

/* Les chantiers en cours, au bord gauche : chaque place, puis l'attente. */
html:not(#c#c#c#c#c#c) #siege #construction button.construction__file {
  flex: none; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .3rem;
  width: 10rem; min-height: 0; margin: 0; padding: .45rem .55rem; text-align: left; text-transform: none; letter-spacing: 0;
  color: var(--parchemin, #e9dcc0); background: rgb(0 0 0 / .35); border: 1px solid rgb(184 150 79 / .45); border-radius: 3px;
  box-shadow: none; cursor: pointer;
}
html:not(#c#c#c#c#c#c) #siege #construction button.construction__file:is(:hover, :focus-visible, .est-choisie) { border-color: var(--or-vif, #e8c35a); background: rgb(40 32 24 / .7); }
#siege #construction .construction__file-titre { font-size: .72rem; font-variant-caps: small-caps; letter-spacing: .04em; color: var(--or, #c9a75a); }
#siege #construction .construction__place { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; line-height: 1.2; }
#siege #construction .construction__place.est-libre { color: #b9de8c; }
#siege #construction .construction__place.est-fermee { flex-direction: row; align-items: center; gap: .3rem; color: var(--texte-pale, #a8997d); font-size: .7rem; }
#siege #construction .construction__place.est-fermee img { width: .8rem; height: .8rem; opacity: .7; }
#siege #construction .construction__place-jauge { display: block; height: 5px; background: #1a1510; border: 1px solid rgb(184 150 79 / .35); }
#siege #construction .construction__place-jauge > span { display: block; height: 100%; background: linear-gradient(90deg, #8c6b2a, #e8c35a); }
#siege #construction .construction__place-fin { font-size: .7rem; color: var(--texte-pale, #a8997d); }
#siege #construction .construction__file-attente { font-size: .7rem; color: var(--texte-pale, #a8997d); }

/* « Comparer » : la liste en tableau, au bord droit. */
html:not(#c#c#c#c#c#c) #siege #construction button.construction__outil {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  width: 4.8rem; min-height: 0; margin: 0; padding: .4rem .3rem; font-size: .75rem; text-transform: none; letter-spacing: 0;
  color: var(--parchemin, #e9dcc0); background: rgb(0 0 0 / .35); border: 1px solid rgb(184 150 79 / .45); border-radius: 3px; box-shadow: none;
}
html:not(#c#c#c#c#c#c) #siege #construction button.construction__outil:is(:hover, :focus-visible) { border-color: var(--or-vif, #e8c35a); background: rgb(40 32 24 / .7); }
#siege #construction .construction__outil img { width: 1.6rem; height: 1.6rem; }

/* ── Le panneau au-dessus de la barre : la fiche de l'ouvrage, ou les chantiers en entier ── */
#siege #construction .construction__panneau {
  flex: 0 1 auto; width: min(52rem, 100%); min-height: 0; overflow: hidden auto; overscroll-behavior: contain;
  padding: var(--e-2) var(--e-3); color: var(--parchemin, #e9dcc0);
  background: linear-gradient(180deg, rgb(34 28 22 / .96), rgb(18 15 12 / .96));
  border: 1px solid rgb(184 150 79 / .7); border-radius: 3px; box-shadow: 0 6px 18px rgb(0 0 0 / .6);
}
#siege #construction .construction__panneau--file { width: min(34rem, 100%); }
#siege #construction .construction__tete { display: flex; align-items: baseline; gap: var(--e-2); margin: 0 0 var(--e-1); }
#siege #construction .construction__nom { margin: 0; font-family: var(--police-titre, inherit); font-size: 1.2rem; color: var(--or, #c9a75a); }
#siege #construction .construction__sous { color: var(--texte-pale, #a8997d); font-size: .9rem; }
html:not(#c#c#c#c#c#c) #siege #construction button.construction__fermer { margin-left: auto; min-width: 2.2rem; min-height: 2.2rem; padding: 0; text-transform: none; }
#siege #construction .construction__corps { min-width: 0; }
/* La fiche d'un ouvrage : sa vignette à gauche, l'aspect actuel avant elle quand le niveau visé le change. */
#siege #construction .construction__panneau--ouvrage { width: min(60rem, 100%); }
#siege #construction .construction__panneau--ouvrage .construction__corps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--e-3); align-items: start; }
#siege #construction .construction__vue-fiche { display: flex; align-items: center; gap: .2rem; margin: 0; }
#siege #construction .construction__vue-fiche img {
  display: block; width: 13rem; height: auto; aspect-ratio: 3 / 2; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .55));
}
#siege #construction .construction__vue-fiche.a-deux-aspects img { width: 9.5rem; }
#siege #construction .construction__vue-fiche .construction__vue-avant { filter: grayscale(.5) brightness(.7); }
#siege #construction .construction__vue-fleche { font-size: 1.6rem; color: var(--or, #c9a75a); }
#siege #construction .construction__vue-fiche.est-sans-vue { display: none; }
/* La fiche se lit en colonnes : le chantier (prix, durée, bouton) d'abord, le gain ensuite, les bras s'il y en a. */
#siege #construction-racine .batiments__fiche { padding: 0; border: 0; background: none; box-shadow: none; }
#siege #construction-racine .batiments__fiche > .batiments__colonne:has(.batiments__actes) { order: -1; }

@media (max-width: 46rem) {
  #siege #construction .construction { gap: var(--e-1); }
  #siege #construction .construction__barre { width: 100%; gap: 4px; padding: 4px; box-sizing: border-box; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__carte-bouton { width: 5.6rem; height: 7.6rem; }
  #siege #construction .construction__carte-nom { font-size: .64rem; }
  #siege #construction .construction__carte-marque .batiments__marque { width: 2.3rem; height: 2.3rem; }
  #siege #construction .construction__carte-vue .construction__carte-marque .batiments__marque { width: 1rem; height: 1rem; }
  /* La fiche reprend une colonne, sans vignette : la carte la montre déjà, et le bouton doit rester sans défilement. */
  #siege #construction .construction__panneau--ouvrage .construction__corps { grid-template-columns: minmax(0, 1fr); }
  #siege #construction .construction__vue-fiche { display: none; }
  #siege #construction :is(.construction__carte-niveau, .construction__carte-chantier) { top: 1.2rem; font-size: .6rem; }
  #siege #construction :is(.construction__piece, .construction__carte-duree, .construction__carte-rang) { font-size: .62rem; }
  #siege #construction .construction__carte-gain { font-size: .62rem; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__file { width: 6.4rem; padding: .3rem .4rem; }
  #siege #construction .construction__place { font-size: .68rem; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__outil { width: 3.4rem; font-size: .66rem; }
  #siege #construction .construction__panneau { padding: var(--e-1) var(--e-2); }
  #siege #construction .construction__nom { font-size: 1.05rem; }
}

/* Le bouton du chantier, dans la barre et dans la fiche d'un ouvrage désigné : un bouton de jeu en laiton, pas un
   rectangle gris (9/10/2026). */
html:not(#c#c#c#c#c#c) #siege :is(#base-fiche-racine, #construction-racine) button.batiments__batir {
  min-height: 2.9rem; padding: .5rem 1.2rem; text-transform: none; letter-spacing: .02em;
  font: 700 1rem / 1.1 var(--police-titre, serif); color: #fff3d6; text-shadow: 0 1px 2px #000;
  background: var(--hud-grain, none), linear-gradient(180deg, #8a6a2c, #5a3f17 55%, #3d2a0f);
  border: 1px solid #0c0906; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 230 170 / .35), inset 0 -2px 3px rgb(0 0 0 / .5), 0 0 0 1px #b8964f, 0 3px 8px rgb(0 0 0 / .6);
  transition: filter .12s ease, transform .12s ease;
}
html:not(#c#c#c#c#c#c) #siege :is(#base-fiche-racine, #construction-racine) button.batiments__batir:is(:hover, :focus-visible):not(:disabled) { filter: brightness(1.15); }
html:not(#c#c#c#c#c#c) #siege :is(#base-fiche-racine, #construction-racine) button.batiments__batir:focus-visible { outline: 2px solid #f0d9a0; outline-offset: 3px; }
html:not(#c#c#c#c#c#c) #siege :is(#base-fiche-racine, #construction-racine) button.batiments__batir:active:not(:disabled) { transform: translateY(1px); }
html:not(#c#c#c#c#c#c) #siege :is(#base-fiche-racine, #construction-racine) button.batiments__batir:disabled {
  filter: grayscale(.8) brightness(.7); cursor: not-allowed;
}

/* Au téléphone, la barre passe sur deux rangées : les chantiers et « Comparer » en tête, les sortes et les cartes en
   dessous sur toute la largeur. Côte à côte, il ne restait la place que de deux cartes. */
@media (max-width: 46rem) {
  #siege #construction .construction__barre {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "file outil" "milieu milieu";
  }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__file {
    grid-area: file; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; padding: .3rem .5rem;
  }
  #siege #construction .construction__place { flex-direction: row; align-items: center; gap: .4rem; }
  #siege #construction .construction__place-jauge { width: 3rem; }
  #siege #construction .construction__milieu { grid-area: milieu; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__outil {
    grid-area: outil; width: auto; flex-direction: row; gap: .3rem; padding: .3rem .5rem;
  }
  #siege #construction .construction__outil img { width: 1.1rem; height: 1.1rem; }
}

/* Téléphone couché (16 octobre 2026) : la barre tient 190 pixels à droite des médaillons (parure-domaine.css), avec
   des cartes de téléphone ; la fiche de l'ouvrage choisi couvre la barre et sa croix y ramène. */
@media (orientation: landscape) and (max-height: 520px) {
  #siege #construction .construction { position: relative; gap: 0; }
  #siege #construction .construction__barre { width: 100%; gap: 4px; padding: 4px; box-sizing: border-box; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__carte-bouton { width: 6rem; height: 8.2rem; }
  #siege #construction .construction__carte-nom { font-size: .64rem; }
  #siege #construction .construction__carte-marque .batiments__marque { width: 2.3rem; height: 2.3rem; }
  #siege #construction .construction__carte-vue .construction__carte-marque .batiments__marque { width: 1rem; height: 1rem; }
  #siege #construction :is(.construction__carte-niveau, .construction__carte-chantier) { top: 1.2rem; font-size: .6rem; }
  #siege #construction :is(.construction__piece, .construction__carte-duree, .construction__carte-rang) { font-size: .62rem; }
  #siege #construction .construction__carte-gain { font-size: .62rem; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__file { width: 5.8rem; padding: .3rem .4rem; }
  #siege #construction .construction__place { font-size: .68rem; }
  html:not(#c#c#c#c#c#c) #siege #construction button.construction__outil { width: 3.4rem; font-size: .66rem; }
  #siege #construction .construction__panneau { position: absolute; inset: 0; z-index: 2; width: auto; padding: var(--e-1) var(--e-2);
    background: linear-gradient(180deg, rgb(34 28 22), rgb(18 15 12)); }
  #siege #construction .construction__panneau--ouvrage .construction__corps { grid-template-columns: minmax(0, 1fr); }
  #siege #construction .construction__vue-fiche { display: none; }
  #siege #construction .construction__nom { font-size: 1.05rem; }
  /* Prix et durée sur une rangée : le bouton du chantier tient dessous sans défiler. */
  #siege #construction .batiments__colonne:has(> .batiments__prix-fiche) { flex-flow: row wrap; column-gap: var(--e-3); }
  #siege #construction .batiments__colonne:has(> .batiments__prix-fiche) > :not(.batiments__ligne) { flex: 1 1 100%; }
}