/* La parure de l ecran : forge. 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 quatre colonnes sous un bandeau a
   ferrures : le rail des emplacements, les cases de ce qu on porte, le
   personnage eclaire au milieu, la maison et ses couleurs a droite. Le pied
   ferme la composition, le rayon ouvert vient dessous.

   La page de la forge portait deja une signature d acier gris posee avec un
   identifiant (quetes.css) : chaque regle de bouton reprend donc `#forge`,
   sinon la couleur d acier gagne sur l or. */


/* ── Le bandeau de titre ─────────────────────────────────────────────────
   La planche pose le titre au centre d un bandeau sombre a bouts biseautes,
   avec une equerre gravee a chaque coin. */

#forge.page .dialogue__entete {
  position: relative;
  display: block;
  padding: var(--e-3) 2.6rem;
  margin-bottom: var(--e-4);
  text-align: center;
  background:
    radial-gradient(60% 140% at 50% 0%, color-mix(in srgb, var(--or) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border-top: 2px solid var(--or-fonce);
  border-bottom: 2px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 20%, transparent), var(--ombre-2);
  clip-path: polygon(1.4rem 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 1.4rem 100%, 0 50%);
}

#forge.page .dialogue__entete::before,
#forge.page .dialogue__entete::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 0 solid var(--or);
  opacity: 0.8;
}

#forge.page .dialogue__entete::before {
  left: 1.6rem;
  border-top-width: 2px;
  border-left-width: 2px;
}

#forge.page .dialogue__entete::after {
  right: 1.6rem;
  border-top-width: 2px;
  border-right-width: 2px;
}

#forge.page .dialogue__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}


/* ── Les quatre colonnes ─────────────────────────────────────────────────
   Rail etroit, cases, personnage large, maison. Sous 68rem la composition se
   deplie en une colonne : le personnage passe devant les cases, comme au
   milieu de la planche. */

.forge-etabli {
  display: grid;
  grid-template-columns: 12.5rem 17rem minmax(0, 1fr) 20rem;
  grid-template-areas:
    "rail cases scene maison"
    "pied pied pied pied"
    "refus refus refus refus"
    "rayon rayon rayon rayon";
  gap: var(--e-4);
  align-items: stretch;
}

.forge-rail { grid-area: rail; }
.forge-cases { grid-area: cases; }
.forge-scene { grid-area: scene; }
.forge-maison { grid-area: maison; }
.forge-pied { grid-area: pied; }
#forge-refus { grid-area: refus; }
#forge-rayons { grid-area: rayon; }

@media (max-width: 68rem) {
  .forge-etabli {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "scene" "cases" "maison" "pied" "refus" "rayon";
  }
}


/* ── Le rail des emplacements ────────────────────────────────────────────
   La planche pose trois tuiles carrees dans une colonne bordee : la marque en
   haut, le mot dessous, la tuile ouverte en rouge.

   La signature d acier de la page est ecrite
   `#forge.page button:not(.lien):not(.dialogue__fermer)` : un identifiant,
   trois classes, un element. Une regle en `#forge.page .forge-rail__ligne` pese
   moins et perdait ; le rail sortait gris-bleu au lieu de rouge et d or. Les
   regles ci-dessous reprennent `button.rangee` et `:not(.lien)` pour peser
   plus, sans un seul `!important`. */

.forge-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-1) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

/* Huit places remplissent la colonne : le losange grave de la planche n a plus
   de vide a occuper. */
.forge-rail::after {
  display: none;
  content: "";
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: calc(-1 * var(--e-1));
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  transform: rotate(45deg);
}

#forge.page button.rangee.forge-rail__ligne:not(.lien) {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e-2);
  min-height: 3.5rem;
  padding: var(--e-2) var(--e-2);
  border-radius: 0;
  text-align: left;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 94%, transparent), color-mix(in srgb, var(--pierre-0) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 50%, transparent);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.07em;
}

#forge.page button.rangee.forge-rail__ligne:not(.lien):hover,
#forge.page button.rangee.forge-rail__ligne:not(.lien):focus-visible {
  color: var(--parchemin-clair);
  border-color: color-mix(in srgb, var(--or) 62%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 96%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
}

#forge.page button.rangee.forge-rail__ligne.rangee--premiere:not(.lien) {
  color: var(--parchemin-clair);
  background:
    radial-gradient(85% 60% at 50% 0%, color-mix(in srgb, var(--or) 20%, transparent), transparent 72%),
    linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border-color: var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 35%, transparent), 0 0 14px color-mix(in srgb, var(--perte-fond) 45%, transparent);
}

#forge.page button.rangee.forge-rail__ligne.rangee--premiere:not(.lien):hover,
#forge.page button.rangee.forge-rail__ligne.rangee--premiere:not(.lien):focus-visible {
  background:
    radial-gradient(85% 60% at 50% 0%, color-mix(in srgb, var(--or) 26%, transparent), transparent 72%),
    linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border-color: var(--or);
}

.forge-rail__ligne .rangee__marque {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  flex: none;
  stroke-width: 1.3;
}

.forge-rail__ligne.rangee--premiere .rangee__marque { stroke: var(--or-vif); }

.forge-rail__ligne .rangee__mot {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: var(--t-3);
}

/* Ce que le rayon contient, et ce qui y est deja a ta portee. Le chiffre
   se lit avant d ouvrir : sinon on pousse huit portes pour rien. */
.forge-rail__ligne .rangee__compte {
  flex: none;
  align-self: center;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--texte-pale);
}

.forge-rail__ligne.rangee--premiere .rangee__compte { color: color-mix(in srgb, var(--parchemin-clair) 85%, transparent); }

.forge-rail__ligne .rangee__dit {
  display: block;
  margin-top: var(--e-0);
  font-family: var(--police-corps);
  font-size: var(--t-2);
  letter-spacing: 0;
  color: var(--texte-pale);
}

.forge-rail__ligne.rangee--premiere .rangee__dit { color: color-mix(in srgb, var(--parchemin-clair) 90%, transparent); }

/* La planche ne met pas de chevron sur ses onglets, et le bouton dit deja par
   `aria-pressed` lequel est ouvert. */
.forge-rail__ligne .rangee__chevron { display: none; }

/* En colonne unique, les trois tuiles se rangent cote a cote : un rail vertical
   mangerait un ecran entier avant le personnage.
   Ce bloc suit les regles du rail. Ecrit plus haut, dans le bloc des colonnes,
   il perdait : une requete de media n ajoute aucun poids, et le rail restait
   en colonne sur telephone. */
@media (max-width: 68rem) {
  .forge-rail { flex-direction: row; }
  .forge-rail::after { display: none; }
  #forge.page button.rangee.forge-rail__ligne:not(.lien) { flex: 1 1 0; min-height: 5.4rem; }
}

/* 🔴 Au telephone, neuf places sur une rangee ne tiennent pas : chacune
   demande son mot et son compte, et la rangee depassait l ecran de 750 pixels
   (releve du 22/09/2026 sur 390 pixels). Trois rangees de trois ; ce que tu
   portes se lit juste dessous, dans « Sur toi ». */
@media (max-width: 42rem) {
  .forge-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-2);
    padding: var(--e-2);
  }
  #forge.page button.rangee.forge-rail__ligne:not(.lien) {
    flex-wrap: wrap;
    align-content: center;
    gap: var(--e-0) var(--e-2);
    min-width: 0;
    min-height: 3.4rem;
    padding: var(--e-2) var(--e-2);
  }
  .forge-rail__ligne .rangee__marque { width: 1.25rem; height: 1.25rem; }
  .forge-rail__ligne .rangee__mot { font-size: var(--t-2); overflow-wrap: anywhere; }
  .forge-rail__ligne .rangee__dit { display: none; }
  .forge-rail__ligne .rangee__compte { flex-basis: 100%; font-size: var(--t-1); }
}


/* ── Les cases de ce qu on porte ─────────────────────────────────────────
   Chaque emplacement tient dans un carre encadre d or, son nom au-dessus,
   ce qu il porte dessous. */

.forge-cases .porte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La derniere case prend la ligne entiere quand elle reste seule : la planche
   pose aussi une piece plus large au milieu de son panneau. */
.forge-cases .porte > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.forge-cases > .parure__banniere,
.forge-maison > .parure__banniere {
  font-size: var(--t-4);
  padding-inline: var(--e-4);
}

.forge-case {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-2);
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 85%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  border-radius: 0;
}

/* L echelon d une piece se lit a la couleur de son cadre entier et a la lueur
   qui la cerne, comme sur les planches. Une barre de couleur posee sur la
   seule tranche gauche ne vient d aucune d elles.

   Ce bloc passe avant les etats de la case. Ecrit apres, il gagnait par
   l ordre et une piece ouverte perdait son cadre d or. */
.forge-case--echelon-1 { border-color: var(--echelon-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-1) 35%, transparent); }
.forge-case--echelon-2 { border-color: var(--echelon-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-2) 35%, transparent); }
.forge-case--echelon-3 { border-color: var(--echelon-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-3) 40%, transparent); }
.forge-case--echelon-4 { border-color: var(--echelon-4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-4) 45%, transparent), 0 0 6px color-mix(in srgb, var(--echelon-4) 25%, transparent); }
.forge-case--echelon-5 { border-color: var(--echelon-5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-5) 50%, transparent), 0 0 8px color-mix(in srgb, var(--echelon-5) 30%, transparent); }
.forge-case--echelon-6 { border-color: var(--echelon-6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-6) 55%, transparent), 0 0 10px color-mix(in srgb, var(--echelon-6) 35%, transparent); }

.forge-case.est-vide {
  border-style: solid;
  border-color: color-mix(in srgb, var(--or) 14%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 60%, transparent);
}

.forge-case.est-ouverte {
  border-color: var(--or);
  box-shadow: 0 0 10px color-mix(in srgb, var(--or) 28%, transparent);
}

.forge-case__ou {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}

.forge-case__vignette {
  display: grid;
  place-items: center;
  width: auto;
  height: 6.4rem;
  aspect-ratio: 1;
  margin: var(--e-0) auto var(--e-1);
}

.forge-case__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

.forge-case__marque {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
}

.forge-case__quoi {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.25;
  color: var(--parchemin);
}

.forge-case.est-vide .forge-case__quoi {
  color: var(--texte-pale);
  font-style: italic;
}

.forge-case__echelon {
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.forge-case__dit {
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}



/* ── Le personnage, au milieu ────────────────────────────────────────────
   La planche met la figure dans une salle sombre, entre deux torches. Le
   modele en relief tient dans un cadre d or, sur un fond de pierre chaude. */

.forge-scene {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.forge-scene__banniere {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.forge-scene__salle {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 24rem;
  padding: var(--e-4) var(--e-3) var(--e-5);
  background:
    radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--or) 12%, transparent), transparent 62%),
    linear-gradient(180deg, var(--pierre-2) 0%, var(--pierre-0) 100%);
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--pierre-0) 85%, transparent);
  overflow: hidden;
}

/* La lueur des deux torches de la planche, tracee au dégradé. */
.forge-scene__salle::before,
.forge-scene__salle::after {
  content: "";
  position: absolute;
  top: 6%;
  width: 24%;
  height: 62%;
  background: radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--feu-lueur) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.forge-scene__salle::before { left: 0; }
.forge-scene__salle::after { right: 0; }

/* Le modele en relief et le portrait peint tiennent la meme case : l un
   remplace l autre sans deplacer le reste. */
.forge-scene__homme {
  display: grid;
  place-items: center;
  width: min(22rem, 100%);
}

.forge-scene__homme > * { grid-area: 1 / 1; }

#forge .forge__personnage {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.forge-scene__peint {
  position: relative;
  margin: 0;
}

/* Le relief est monte : `carte.js` marque son hote, et le peint s efface.
   Le peint est ecrit apres l hote dans la page pour que ce voisinage existe
   sans `:has()`. */
#forge .forge__personnage.a-le-relief + .forge-scene__peint { display: none; }

/* La monture que tu montes, posee au sol a droite, comme le cheval de la
   planche. Sans monture, la figure reste seule. */
.forge-scene__monture {
  position: absolute;
  right: 0.8rem;
  bottom: 0.9rem;
  width: min(10.5rem, 32%);
  margin: 0;
  text-align: center;
}

/* Les vues d equipement sont prises sur fond clair de studio. Dans une salle
   sombre, ce carre gris se voit avant la monture ; le voile et le filtre le
   ramenent au niveau du reste. */
.forge-scene__monture::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 1;
  background: radial-gradient(72% 64% at 50% 42%, transparent 0 38%, color-mix(in srgb, var(--pierre-0) 70%, transparent) 100%);
  pointer-events: none;
  z-index: 1;
}

.forge-scene__monture-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.85);
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 60%, transparent), var(--ombre-3);
}

.forge-scene__monture-nom {
  margin-top: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  text-shadow: var(--ombre-texte);
}

#forge .forge__personnage .portrait__relief {
  position: relative;
  aspect-ratio: 0.56;
  border: 1px solid var(--or-fonce);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--or) 25%, transparent), inset 0 0 40px color-mix(in srgb, var(--pierre-0) 75%, transparent), var(--ombre-3);
}

/* Le decor peint derriere le modele arrive en plein jour ; la planche montre
   une salle basse eclairee par deux torches. Ce voile ramene le jour au soir. */
#forge .forge__personnage .portrait__relief::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 58% at 50% 38%, transparent 0 42%, color-mix(in srgb, var(--pierre-0) 78%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 55%, transparent), transparent 32%, color-mix(in srgb, var(--pierre-0) 70%, transparent));
  pointer-events: none;
}


/* ── La maison et ses couleurs ───────────────────────────────────────────
   La planche pend une banniere a gauche du panneau, le nom au-dessus, les
   couleurs dessous, une ligne par email. */

.forge-maison__corps {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  justify-items: center;
}

.forge-etendard {
  --etoffe: var(--cire);
  position: relative;
  display: grid;
  place-items: start center;
  width: 11rem;
  padding: var(--e-4) var(--e-3) 3rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 16%, transparent), transparent 26%, color-mix(in srgb, var(--pierre-0) 45%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--pierre-0) 45%, transparent), transparent 20%, transparent 80%, color-mix(in srgb, var(--pierre-0) 45%, transparent)),
    var(--etoffe);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 55%, transparent), var(--ombre-3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.forge-etendard--vide {
  --etoffe: var(--pierre-4);
  border-color: color-mix(in srgb, var(--or) 30%, transparent);
}

.forge-etendard__barre {
  position: absolute;
  top: 0.35rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 0.28rem;
  background: linear-gradient(180deg, var(--or-vif), var(--or-fonce));
}

.forge-etendard__toile {
  display: grid;
  place-items: center;
  min-height: 7.5rem;
  margin-top: var(--e-2);
}

.forge-etendard__toile .blason {
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--pierre-0) 60%, transparent));
}

.forge-maison__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--or-vif);
}

.forge-maison__devise {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  font-style: italic;
  text-align: center;
  color: var(--texte);
}

.forge-maison__vide {
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.45;
  text-align: center;
  color: var(--texte);
}

.forge-blason {
  width: 100%;
  margin-top: var(--e-1);
  padding-top: var(--e-2);
  border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

.forge-blason__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--or);
}

.forge-blason__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.4rem;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) 0;
}

.forge-blason__ligne + .forge-blason__ligne { border-top: 1px solid color-mix(in srgb, var(--or) 12%, transparent); }

.forge-blason__mot {
  font-size: var(--t-3);
  color: var(--texte-pale);
}

.forge-blason__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--parchemin);
}

/* La planche pose une plage de couleur large a droite de chaque ligne, pas une
   pastille. La bordure d or la detache du fond noir. */
.forge-blason__pastille {
  height: 1.4rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 22%, transparent), transparent 55%),
    var(--teinte, transparent);
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 55%, transparent);
}

.forge-blason__ligne--mot .forge-blason__valeur { grid-column: 2 / -1; }


/* ── Le pied de l ecran ──────────────────────────────────────────────────
   La planche ferme sur une barre : le retour a gauche, une plaque a droite.
   Ici la plaque dit le degre de la forge, qui decide de ce qu on peut battre. */

.forge-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  background: linear-gradient(180deg, var(--pierre-2), var(--pierre-0));
  border-top: 1px solid var(--or-fonce);
  border-bottom: 1px solid var(--or-fonce);
}

#forge.page .forge-pied__retour {
  margin: 0;
  padding: var(--e-2) var(--e-4);
  border-radius: 0;
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border: 1px solid var(--or-fonce);
  font-family: var(--police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#forge.page .forge-pied__retour:hover,
#forge.page .forge-pied__retour:focus-visible {
  color: var(--parchemin-clair);
  border-color: var(--or);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-2));
}

/* La plaque de droite. La planche y met CONFIRMER ; ici rien ne se confirme,
   une piece part de la forge des qu on la bat. La place dit donc le degre de
   la forge, qui decide de ce qu on peut battre. */
#forge .forge-pied .forge-pied__plaque {
  flex: 0 1 auto;
  margin: 0;
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-3);
  line-height: 1.4;
  text-align: right;
  color: var(--or-vif);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 16%, transparent);
  clip-path: polygon(0.7rem 0, 100% 0, 100% calc(100% - 0.7rem), calc(100% - 0.7rem) 100%, 0 100%, 0 0.7rem);
}


/* ── Le rayon ouvert ─────────────────────────────────────────────────────
   Le nom de l emplacement en banniere, puis les pieces en fiches. */

#forge-rayons .forge-rayon {
  margin: 0;
  padding: var(--e-4) var(--e-4) var(--e-4);
}

.forge-rayon__banniere {
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
}

.forge-rayon__banniere .colonne__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-vif);
}

.forge-rayon__dit {
  font-family: var(--police-corps);
  font-size: var(--t-2);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-pale);
}

#forge-rayons .rayon__liste {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-3);
}

#forge-rayons .piece {
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-3);
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--or) 34%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent), var(--ombre-2);
}

/* Meme forme que les cases : l echelon se lit au cadre entier et a la lueur.
   La barre de 3 px de `salle.css` tombe deja sur le cadre pose plus haut ; il
   restait a rendre la teinte de l echelon, qui avait disparu avec elle. Ce
   bloc passe avant `est-portee`, sinon la piece que tu portes perdrait son
   cadre d or.

   Les teintes sont celles des cases, sans melange : deux dialectes d echelon
   sur un meme ecran donneraient un bleu vif dans le panneau de gauche et un
   bleu eteint pour la meme piece dans le rayon. */
#forge-rayons .piece.piece--echelon-1 { border-color: var(--echelon-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-1) 35%, transparent); }
#forge-rayons .piece.piece--echelon-2 { border-color: var(--echelon-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-2) 35%, transparent); }
#forge-rayons .piece.piece--echelon-3 { border-color: var(--echelon-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-3) 40%, transparent); }
#forge-rayons .piece.piece--echelon-4 { border-color: var(--echelon-4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-4) 45%, transparent), 0 0 6px color-mix(in srgb, var(--echelon-4) 25%, transparent); }
#forge-rayons .piece.piece--echelon-5 { border-color: var(--echelon-5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-5) 50%, transparent), 0 0 8px color-mix(in srgb, var(--echelon-5) 30%, transparent); }
#forge-rayons .piece.piece--echelon-6 { border-color: var(--echelon-6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-6) 55%, transparent), 0 0 10px color-mix(in srgb, var(--echelon-6) 35%, transparent); }

#forge-rayons .piece.est-portee {
  border-color: var(--or);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or-vif) 35%, transparent), 0 0 12px color-mix(in srgb, var(--or) 28%, transparent);
}

#forge-rayons .piece.est-fermee { opacity: 0.62; }

.piece__tete {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
}

.piece__cadre {
  width: 5.2rem;
  aspect-ratio: 1;
}

#forge-rayons .piece__image {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  image-rendering: auto;
}

.piece__titres {
  display: grid;
  gap: var(--e-0);
  min-width: 0;
}

#forge-rayons .piece__nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  line-height: 1.2;
  color: var(--parchemin);
}

#forge-rayons .piece__echelon { color: var(--or); }

#forge-rayons .piece__dit {
  padding-left: var(--e-2);
  border-left: 2px solid color-mix(in srgb, var(--or) 28%, transparent);
  color: var(--texte-pale);
}

#forge-rayons .piece__fait { color: var(--or-vif); }

#forge-rayons .piece__ecart {
  background: color-mix(in srgb, var(--pierre-0) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

#forge-rayons .piece__cout {
  font-family: var(--police-titre);
  color: var(--parchemin);
}

#forge-rayons .piece__cout.est-introuvable {
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
}

#forge-rayons .piece__etat {
  color: var(--texte-pale);
  font-family: var(--police-titre);
  letter-spacing: 0.06em;
}

#forge-rayons .piece.est-portee .piece__etat { color: var(--or-vif); }

/* Le bouton de decision : le sceau rouge de la planche, pas l acier gris de
   la signature de la page. Meme poids que le rail : `button.sceau-sang` et
   `:not(.lien)` passent devant la signature d acier. */
#forge.page button.sceau-sang.piece__forger:not(.lien) {
  align-self: stretch;
  justify-content: center;
  min-height: 2.7rem;
  margin-top: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-radius: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.09em;
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 30%, transparent), var(--ombre-2);
}

#forge.page button.sceau-sang.piece__forger:not(.lien):hover:not(:disabled),
#forge.page button.sceau-sang.piece__forger:not(.lien):focus-visible {
  background: linear-gradient(180deg, var(--cire-vif), var(--peril));
  border-color: var(--or);
}


/* ── Le telephone ────────────────────────────────────────────────────────
   Le rail passe en trois lignes larges, les cases se rangent en trois
   colonnes, la banniere de la maison reste au centre. */

@media (max-width: 40rem) {
  #forge.page .dialogue__entete { padding: var(--e-2) var(--e-4); }
  /* Les equerres des coins tombent sur le titre des que la barre retrecit. */
  #forge.page .dialogue__entete::before,
  #forge.page .dialogue__entete::after { display: none; }

  .forge-cases .porte { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .forge-case { padding: var(--e-2) var(--e-1); }
  .forge-case__quoi { font-size: var(--t-2); }
  .forge-case__dit { font-size: var(--t-1); }

  .forge-scene__salle { min-height: 17rem; padding-bottom: var(--e-4); }
  .forge-scene__homme { width: min(15rem, 62vw); }
  .forge-scene__monture { width: min(7rem, 26%); right: 0.5rem; bottom: 0.6rem; }
  .forge-scene__monture-nom { font-size: var(--t-1); }

  #forge.page button.rangee.forge-rail__ligne:not(.lien) { min-height: 4.8rem; font-size: var(--t-3); }
  .forge-rail__ligne .rangee__marque { width: 1.7rem; height: 1.7rem; }
  .forge-rail__ligne .rangee__dit { font-size: var(--t-1); }

  .forge-pied { justify-content: center; }
  #forge .forge-pied .forge-pied__plaque { flex: 1 1 100%; text-align: center; }

  .piece__tete { grid-template-columns: 4rem minmax(0, 1fr); }
  .piece__cadre { width: 4rem; }
}


/* ── Le tri du rayon et les paliers ──────────────────────────────────────
   Un rayon porte jusqu a trois cent quatre-vingt-dix-neuf pieces. Trois
   boutons disent ce qu on regarde, et un titre marque chaque echelon. */

.forge-rayon__tris {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) 0;
}

#forge.page button.forge-rayon__tri:not(.lien) {
  padding: var(--e-1) var(--e-4);
  border-radius: 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  letter-spacing: 0.02em;
  color: var(--texte-pale);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

#forge.page button.forge-rayon__tri.est-choisi:not(.lien) {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border-color: var(--or-fonce);
}

.forge-rayon__attente {
  padding: var(--e-4);
  margin: 0;
  font-family: var(--police-corps);
  color: var(--texte-pale);
}

.rayon__palier {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-2) 0 var(--e-0);
  list-style: none;
}

.rayon__palier::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or) 45%, transparent), transparent);
}

.rayon__palier-mot {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

/* ── Les terres du rayon ─────────────────────────────────────────────────
   Quatre cent huit armures ne se lisent pas d un bloc. Le rayon se coupe par
   terre : ce que ta forge sait battre d abord, les autres ensuite. */

.forge-rayon__terres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--or) 12%, transparent);
  margin-top: var(--e-2);
}

#forge.page button.forge-rayon__terre:not(.lien) {
  padding: var(--e-1) var(--e-3);
  border-radius: 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  letter-spacing: 0.01em;
  color: var(--texte-pale);
  background: color-mix(in srgb, var(--pierre-0) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 16%, transparent);
}

#forge.page button.forge-rayon__terre.est-choisi:not(.lien) {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  border-color: var(--or-fonce);
}

/* Le prix d une piece que ton forgeron ne sait pas encore faire, et la raison
   juste dessous : un prix qui ne colle pas a la fiche passe pour un bug. */
#forge-rayons .piece__cout--etranger {
  color: var(--or-fonce, var(--or-sourd));
}

#forge-rayons .piece__etranger {
  margin: var(--e-0) 0 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--texte-pale);
}

/* ── L etabli : la lame qu on bat soi-meme ───────────────────────────────
   Quatre places posees comme sur un billot, l apercu dessous, le nom au bas.
   Le tiroir d un type ne s ouvre qu au clic : quatre cent soixante-six
   morceaux d un bloc ne se lisent pas. */

#forge.page button.forge-rail__etabli:not(.lien) {
  margin-top: var(--e-2);
  border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}

.forge-case--lame .forge-case__quoi {
  font-family: var(--police-titre);
  color: var(--parchemin);
}

.lame-etabli {
  padding-bottom: var(--e-4);
}

.lame-tenue {
  margin: var(--e-3) var(--e-4) 0;
  padding: var(--e-2) var(--e-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois-sombre) 70%, transparent), color-mix(in srgb, var(--pierre-2) 80%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 24%, transparent);
}

.lame-tenue__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.04em;
  color: var(--parchemin-clair);
}

.lame-tenue__faits,
.lame-apercu__faits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  margin: var(--e-1) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte-pale);
}

#forge.page button.lame-tenue__ranger:not(.lien),
#forge.page button.lame-tenue__refondre:not(.lien) {
  min-height: 44px;
  margin: var(--e-2) var(--e-2) 0 0;
  padding: var(--e-1) var(--e-3);
  border-radius: 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
  background: color-mix(in srgb, var(--pierre-0) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 16%, transparent);
}

.lame-ferme {
  margin: var(--e-4) var(--e-4);
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
}

.lame-places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) 0;
}

#forge.page button.lame-place:not(.lien) {
  display: block;
  padding: var(--e-2) var(--e-3);
  border-radius: 0;
  text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 16%, transparent);
  color: var(--texte-pale);
}

#forge.page button.lame-place.est-pleine:not(.lien) {
  border-color: var(--or-fonce);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 92%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
}

#forge.page button.lame-place.est-ouverte:not(.lien) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 40%, transparent);
}

.lame-place__quoi {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

.lame-place__nom {
  display: block;
  margin-top: var(--e-0);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--parchemin);
}

.lame-place__dit {
  display: block;
  margin-top: var(--e-0);
  font-size: var(--t-2);
  color: var(--texte-pale);
}

.lame-apercu {
  margin: var(--e-3) var(--e-4) 0;
  padding: var(--e-2) var(--e-4);
  border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

.lame-apercu__vide,
.lame-tiroir__attente {
  margin: 0;
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
}

.lame-apercu__accord {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  color: var(--or);
}

.lame-apercu__poids,
.lame-apercu__cout {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte-pale);
}

.lame-apercu__etranger {
  margin: var(--e-1) 0 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--or-fonce, var(--or-sourd));
}

.lame-nom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) 0;
}

.lame-nom__mot {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

.lame-nom__champ {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--e-1) var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin-clair);
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 24%, transparent);
  border-radius: 0;
}

.lame-manque {
  margin: var(--e-2) var(--e-4) 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--or);
}

#forge.page button.lame-battre:not(.lien) {
  margin: var(--e-3) var(--e-4) 0;
}

#forge.page button.lame-battre[disabled]:not(.lien) {
  opacity: 0.45;
  cursor: not-allowed;
}

.lame-tiroir {
  margin-top: var(--e-4);
  border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

.lame-tiroir__tris {
  display: flex;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-4) 0;
}

#forge.page button.lame-tiroir__tri:not(.lien) {
  padding: var(--e-1) var(--e-3);
  border-radius: 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  color: var(--texte-pale);
  background: color-mix(in srgb, var(--pierre-0) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 16%, transparent);
}

#forge.page button.lame-tiroir__tri.est-choisi:not(.lien) {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  border-color: var(--or-fonce);
}

.lame-tiroir__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  padding: 0 var(--e-4);
  list-style: none;
}

.lame-tiroir__palier {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-2) 0 var(--e-0);
  list-style: none;
}

.lame-tiroir__palier::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or) 45%, transparent), transparent);
}

.lame-piece {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 92%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

.lame-piece.est-choisi {
  border-color: var(--or);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 30%, transparent);
}

.lame-piece.est-fermee {
  opacity: 0.55;
}

.lame-piece__echelon {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

.lame-piece__nom {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--parchemin);
}

.lame-piece__dit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-0) var(--e-2);
  margin: 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

.lame-piece__terre {
  font-style: italic;
}

.lame-piece__cout {
  margin: 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

.lame-piece__cout--etranger {
  color: var(--or-fonce, var(--or-sourd));
}

.lame-piece__etat {
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

#forge.page button.lame-piece__prendre:not(.lien) {
  margin-top: var(--e-1);
  padding: var(--e-1) var(--e-3);
  border-radius: 0;
  font-size: var(--t-2);
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  border: 1px solid var(--or-fonce);
}

@media (max-width: 720px) {
  .lame-places { grid-template-columns: 1fr 1fr; }
  .lame-tiroir__liste { grid-template-columns: 1fr; }
}


/* ── Le rayon en liste comparable (22/09/2026) ───────────────────────────
   Écran React (interface/composants/forge.jsx). Une ligne par pièce, qui
   reprend la grille de l'en-tête : l'effet principal de la place et le prix
   tombent l'un sous l'autre, comme sur la liste des troupes. Au téléphone,
   la pièce, son effet principal et son prix ; dès 36 rem de large, chaque
   effet du combat a sa colonne et les autres effets la leur.
   Les règles portent deux identifiants : la signature d'acier des boutons
   de la page (quetes.css) en porte un, et gagnait tout le reste. */

#forge-rayon-racine {
  grid-area: rayon;
  min-width: 0;
  container: rayon / inline-size;
  scroll-margin-top: 4.6rem;
}
#forge-rayon-racine[hidden],
#forge-rayon-racine:empty { display: none; }

/* 🔴 Sous 68 rem, le rayon suit le rail. Il venait après le personnage, les
   cases et la maison : au téléphone, deux mille pixels plus bas, et un geste
   dans le rail ne changeait rien de visible. */
@media (max-width: 68rem) {
  .forge-etabli {
    grid-template-areas: "rail" "refus" "rayon" "scene" "cases" "maison" "pied";
  }
}

#forge #forge-rayon-racine .forge-liste { margin: 0; padding: var(--e-4) var(--e-4) var(--e-4); }
#forge #forge-rayon-racine .forge-liste__banniere { margin-bottom: var(--e-2); }
/* Dans un rayon étroit, « Pour cette place » passait sous le nom de la place
   et mordait le bas du cartouche : le nom seul y suffit. */
@container rayon (max-width: 22rem) {
  #forge #forge-rayon-racine .forge-liste__banniere .forge-rayon__dit { display: none; }
}

#forge #forge-rayon-racine .forge-liste__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
}
#forge #forge-rayon-racine .forge-liste__sur-toi {
  flex: 1 1 10rem;
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.4;
  color: var(--texte);
}

/* Les choix d'une ligne : la place, la terre. Un menu tient sur une ligne au
   téléphone, là où quatorze terres en boutons en prenaient trois. */
#forge #forge-rayon-racine .forge-liste__choix { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
#forge #forge-rayon-racine .forge-liste__choix-mot {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}
#forge #forge-rayon-racine .forge-liste__choix select {
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: var(--e-1) var(--e-2);
  font: inherit;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--parchemin);
  background: color-mix(in srgb, var(--pierre-0) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  border-radius: 0;
}

#forge #forge-rayon-racine .forge-liste__reglages {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-3) 0 var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

/* Trois tris côte à côte, le compte sous le mot. */
/* « Hors de portée » est le plus long des trois mots : sa case est plus
   large, pour qu'il tienne sur une ligne à 360 pixels. */
#forge #forge-rayon-racine .forge-liste__tris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.75fr);
  gap: var(--e-1);
}
#forge #forge-rayon-racine button.forge-liste__tri {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-height: 44px;
  margin: 0;
  padding: var(--e-1) var(--e-2);
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--texte-pale);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  border-radius: 0;
  box-shadow: none;
}
#forge #forge-rayon-racine button.forge-liste__tri.est-choisi {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
  border-color: var(--or-fonce);
}
#forge #forge-rayon-racine .forge-liste__tri-compte {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
#forge #forge-rayon-racine button.forge-liste__tri.est-choisi .forge-liste__tri-compte { color: var(--or-vif); }

/* L'en-tête et les lignes : la même grille. */
/* La vignette a sa colonne et couvre les deux rangées de la ligne : le nom
   et les chiffres dans la première, les pastilles des autres effets dans la
   seconde, sous le nom et jusqu'au bout. L'en-tête « Pièce » couvre la
   vignette et le nom. */
#forge #forge-rayon-racine .forge-liste__entetes,
#forge #forge-rayon-racine button.forge-liste__rangee {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 3.4rem 4.1rem;
  align-items: center;
  column-gap: var(--e-2);
}
#forge #forge-rayon-racine .forge-liste__entetes > :first-child { grid-column: 1 / span 2; }
#forge #forge-rayon-racine .forge-liste__large { display: none; }
/* Au téléphone, le mot d'une colonne cède la place à sa marque, mais le
   lecteur d'écran le lit encore : « Attaque, ranger par attaque ». */
#forge #forge-rayon-racine .forge-liste__long {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* L'en-tête reste en vue sous le titre de la page : sur quatre cents lignes,
   la colonne d'un chiffre se lit sans remonter. Son haut est mesuré par
   forge.js sur le titre réel (collé ou non, et le rembourrage de la page). */
#forge #forge-rayon-racine .forge-liste__entetes {
  position: sticky;
  top: var(--forge-liste-haut, 4.4rem);
  z-index: 2;
  padding: 0 0.45rem 0 calc(0.45rem + 3px);
  background: var(--pierre-2);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}
#forge #forge-rayon-racine button.forge-liste__entete,
#forge #forge-rayon-racine .forge-liste__entete-mot {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}
#forge #forge-rayon-racine button.forge-liste__entete {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
#forge #forge-rayon-racine button.forge-liste__entete--nombre { justify-content: center; }
#forge #forge-rayon-racine button.forge-liste__entete:hover,
#forge #forge-rayon-racine button.forge-liste__entete.est-choisi { color: var(--or-vif); background: none; transform: none; }
#forge #forge-rayon-racine .forge-liste__fleche { min-width: 0.6rem; font-size: var(--t-2); letter-spacing: 0; }
#forge #forge-rayon-racine .forge-liste__marque { display: block; width: 1.3rem; height: 1.3rem; }


#forge #forge-rayon-racine .forge-liste__liste {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
#forge #forge-rayon-racine .rayon__palier { margin: var(--e-4) 0 var(--e-1); padding: 0 var(--e-2); }

/* Le bas de l'écran porte la barre des onglets au téléphone : une ligne
   ramenée en vue s'arrête au-dessus, et en haut sous l'en-tête collé. */
#forge #forge-rayon-racine .forge-liste__ligne {
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
  scroll-margin: 7.5rem 0 5.5rem;
}
#forge #forge-rayon-racine button.forge-liste__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;
  cursor: pointer;
  scroll-margin: 7.5rem 0 5.5rem;
}
#forge #forge-rayon-racine button.forge-liste__rangee:hover { background: color-mix(in srgb, var(--or) 7%, transparent); transform: none; }
#forge #forge-rayon-racine .forge-liste__ligne.est-portee button.forge-liste__rangee {
  background: color-mix(in srgb, var(--or) 8%, transparent);
  border-left-color: var(--or);
}
#forge #forge-rayon-racine .forge-liste__ligne.est-ouverte button.forge-liste__rangee {
  background: color-mix(in srgb, var(--or) 12%, transparent);
  border-left-color: var(--or-vif);
}

#forge #forge-rayon-racine .forge-liste__piece { display: contents; }

/* L'échelon se lit au cadre de la vignette, avec les teintes des cases, et
   en toutes lettres au titre de son palier. */
#forge #forge-rayon-racine .forge-liste__vignette {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--echelon-1);
}
#forge #forge-rayon-racine .forge-liste__vignette--2 { border-color: var(--echelon-2); }
#forge #forge-rayon-racine .forge-liste__vignette--3 { border-color: var(--echelon-3); }
#forge #forge-rayon-racine .forge-liste__vignette--4 { border-color: var(--echelon-4); box-shadow: 0 0 6px color-mix(in srgb, var(--echelon-4) 30%, transparent); }
#forge #forge-rayon-racine .forge-liste__vignette--5 { border-color: var(--echelon-5); box-shadow: 0 0 8px color-mix(in srgb, var(--echelon-5) 35%, transparent); }
#forge #forge-rayon-racine .forge-liste__vignette--6 { border-color: var(--echelon-6); box-shadow: 0 0 10px color-mix(in srgb, var(--echelon-6) 40%, transparent); }
#forge #forge-rayon-racine .forge-liste__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  image-rendering: auto;
}

#forge #forge-rayon-racine .forge-liste__noms { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
#forge #forge-rayon-racine .forge-liste__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--parchemin-clair);
  overflow-wrap: anywhere;
}
#forge #forge-rayon-racine .forge-liste__sous {
  font-size: var(--t-1);
  line-height: 1.3;
  color: var(--texte-pale);
}
#forge #forge-rayon-racine .forge-liste__sous--portee { color: var(--or-vif); }
/* Au téléphone, les effets hors colonne en pastilles : l'image de l'effet et
   sa valeur, sur une ligne le plus souvent. */
#forge #forge-rayon-racine .forge-liste__pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-0) var(--e-3);
  grid-column: 2 / -1;
  grid-row: 2;
  margin-top: var(--e-0);
}
#forge #forge-rayon-racine .forge-liste__pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#forge #forge-rayon-racine .forge-liste__pastille-image { flex: none; width: 0.95rem; height: 0.95rem; }
#forge #forge-rayon-racine .forge-liste__sous--fermee { color: var(--parchemin-bas); }

#forge #forge-rayon-racine .forge-liste__nombre {
  text-align: center;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#forge #forge-rayon-racine .forge-liste__autres {
  flex-direction: column;
  gap: var(--e-0);
  font-size: var(--t-2);
  line-height: 1.3;
  color: var(--texte);
}
#forge #forge-rayon-racine .forge-liste__prix {
  display: flex;
  flex-direction: column;
  font-size: var(--t-2);
  line-height: 1.3;
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
}
#forge #forge-rayon-racine .forge-liste__cout {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  white-space: nowrap;
}
#forge #forge-rayon-racine .forge-liste__medaillon { flex: none; width: 1rem; height: 1rem; }
/* Une matière qui manque se lit en rouge, et se dit à qui écoute la page. */
#forge #forge-rayon-racine .forge-liste__prix .est-court { color: var(--perte, var(--perte)); }
#forge #forge-rayon-racine .forge-liste__a-gagner { font-family: var(--police-corps); font-style: italic; color: var(--texte-pale); }

#forge #forge-rayon-racine .forge-liste__ligne.est-fermee :is(.forge-liste__nom, .forge-liste__nombre, .forge-liste__prix) { color: var(--texte); }
#forge #forge-rayon-racine .forge-liste__ligne.est-fermee .forge-liste__vignette { opacity: 0.6; filter: grayscale(0.6); }

#forge #forge-rayon-racine .forge-liste__attente {
  margin: 0;
  padding: var(--e-4) var(--e-1);
  font-family: var(--police-corps);
  color: var(--texte-pale);
}
#forge #forge-rayon-racine button.forge-liste__reessayer {
  min-height: 44px;
  margin-top: var(--e-2);
  padding: var(--e-1) var(--e-4);
  border-radius: 0;
}

/* La fiche d'une pièce ouverte : sa tête et l'écart avec ce que tu portes,
   puis le prix, ce que la fonte rend, le bouton et sa réponse. Une colonne au
   téléphone, deux ailleurs. */
#forge #forge-rayon-racine .forge-fiche {
  display: grid;
  gap: var(--e-3);
  padding: 0.6rem 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);
}
#forge #forge-rayon-racine .forge-fiche__corps { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
#forge #forge-rayon-racine .forge-fiche__tete {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
}
#forge #forge-rayon-racine .forge-fiche__vignette { width: 4.6rem; height: 4.6rem; }
#forge #forge-rayon-racine .forge-fiche__titres { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
#forge #forge-rayon-racine .forge-fiche__titres > p { margin: 0; }
#forge #forge-rayon-racine .forge-fiche__qualite {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
}
#forge #forge-rayon-racine .forge-fiche__provenance { font-size: var(--t-2); line-height: 1.35; color: var(--texte-pale); }
#forge #forge-rayon-racine .forge-fiche__fait { font-size: var(--t-3); line-height: 1.4; color: var(--or-vif); }
#forge #forge-rayon-racine .forge-fiche__ecart {
  margin: 0;
  background: color-mix(in srgb, var(--pierre-0) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

#forge #forge-rayon-racine .forge-fiche__geste { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
#forge #forge-rayon-racine .forge-fiche__geste > p { margin: 0; font-size: var(--t-3); line-height: 1.4; }
#forge #forge-rayon-racine .forge-fiche__prix { font-family: var(--police-titre); color: var(--parchemin); }
#forge #forge-rayon-racine .forge-fiche__note,
#forge #forge-rayon-racine .forge-fiche__obtention {
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
}
#forge #forge-rayon-racine .forge-fiche__etat { font-family: var(--police-titre); letter-spacing: 0.04em; color: var(--texte-pale); }
#forge #forge-rayon-racine .forge-fiche__etat.est-portee { color: var(--or-vif); }

/* Le sceau rouge de la planche, comme l'ancien bouton du rayon. */
#forge #forge-rayon-racine button.sceau-sang.forge-fiche__forger {
  align-self: stretch;
  justify-content: center;
  min-height: 2.9rem;
  margin: var(--e-1) 0 0;
  padding: var(--e-2) var(--e-4);
  border-radius: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  letter-spacing: 0.09em;
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--perte-fond), var(--cire-fonce));
  border: 1px solid var(--or-fonce);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 30%, transparent), var(--ombre-2);
}
#forge #forge-rayon-racine button.sceau-sang.forge-fiche__forger:hover:not(:disabled),
#forge #forge-rayon-racine button.sceau-sang.forge-fiche__forger:focus-visible {
  background: linear-gradient(180deg, var(--cire-vif), var(--peril));
  border-color: var(--or);
}
#forge #forge-rayon-racine button.sceau-sang.forge-fiche__forger:disabled {
  color: var(--texte);
  background: linear-gradient(180deg, var(--cuir), var(--pierre-3));
  border-color: color-mix(in srgb, var(--or-fonce) 50%, transparent);
  cursor: not-allowed;
}

#forge #forge-rayon-racine .forge-fiche__retour { padding: var(--e-2) var(--e-2); }
#forge #forge-rayon-racine .forge-fiche__retour.est-bon {
  color: var(--parchemin);
  background: color-mix(in srgb, var(--or) 10%, transparent);
  border-left: 3px solid var(--or);
}
#forge #forge-rayon-racine .forge-fiche__histoire { margin: 0; }

@container rayon (min-width: 36rem) {
  #forge #forge-rayon-racine .forge-liste__reglages {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
  }
  /* Le nom s'arrête à 20 rem, l'effet et le prix le suivent, et les autres
     effets prennent le reste au bout de la ligne : sur 1 440 pixels, le nom
     s'étirait sur six cents et l'œil traversait l'écran pour lire un prix. */
  #forge #forge-rayon-racine .forge-liste__entetes,
  #forge #forge-rayon-racine button.forge-liste__rangee {
    grid-template-columns: 2.4rem minmax(8rem, 17.5rem) repeat(var(--principaux, 1), 4.6rem) 5.8rem minmax(9rem, 1fr);
    column-gap: var(--e-4);
  }
  #forge #forge-rayon-racine .forge-liste__autres,
  #forge #forge-rayon-racine .forge-liste__entete-mot { order: 1; }
  #forge #forge-rayon-racine .forge-liste__large { display: block; }
  #forge #forge-rayon-racine .forge-liste__autres { display: flex; }
  #forge #forge-rayon-racine .forge-liste__long {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  #forge #forge-rayon-racine .forge-liste__court,
  #forge #forge-rayon-racine .forge-liste__etroit { display: none; }
  #forge #forge-rayon-racine .forge-fiche {
    grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 1fr);
    align-items: start;
    gap: var(--e-3) var(--e-5);
  }
  #forge #forge-rayon-racine .forge-fiche__histoire { grid-column: 1 / -1; }
}


/* ── Le coffre (23/09/2026) ──────────────────────────────────────────────
   Les pièces trouvées qu on ne porte pas, sous le personnage et les cases :
   une ligne par pièce, son image, son nombre d exemplaires, ce qu elle fait,
   l écart avec la pièce portée et le bouton qui la porte. Les règles portent
   `#forge.page` : la signature d acier des boutons de la page en porte un. */

.forge-etabli {
  grid-template-areas:
    "rail cases scene maison"
    "pied pied pied pied"
    "coffre coffre coffre coffre"
    "refus refus refus refus"
    "rayon rayon rayon rayon";
}
@media (max-width: 68rem) {
  .forge-etabli {
    grid-template-areas: "rail" "refus" "rayon" "scene" "cases" "coffre" "maison" "pied";
  }
}

.forge-coffre { grid-area: coffre; min-width: 0; padding-bottom: var(--e-4); }
.forge-coffre > .parure__banniere { font-size: var(--t-4); padding-inline: var(--e-4); }
.forge-coffre__compte,
.forge-coffre__reponse {
  margin: var(--e-1) var(--e-4) var(--e-2);
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte-pale);
}
.forge-coffre__reponse { color: var(--or-vif); }
.forge-coffre__reponse.est-refus { color: var(--perte); }
.forge-coffre__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--e-2);
  margin: 0;
  padding: 0 var(--e-4);
  list-style: none;
}
.coffre__ligne {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  grid-template-areas: "image texte" "bouton bouton";
  gap: var(--e-1) var(--e-3);
  padding: var(--e-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 85%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
}
.coffre__vignette { grid-area: image; align-self: start; display: grid; place-items: center; aspect-ratio: 1; }
.coffre__image { width: 100%; height: 100%; object-fit: contain; }
.coffre__texte { grid-area: texte; min-width: 0; }
.coffre__texte > p { margin: 0 0 var(--e-0); }
.coffre__nom { font-family: var(--police-titre); font-size: var(--t-4); letter-spacing: 0.04em; color: var(--parchemin); }
.coffre__nombre {
  display: inline-block;
  margin-left: var(--e-1);
  padding: 0 var(--e-1);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  color: var(--pierre-0);
  background: var(--or);
}
.coffre__echelon { font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); }
.coffre__dit, .coffre__contre, .coffre__ecart { font-size: var(--t-2); line-height: 1.4; color: var(--texte-pale); }
.coffre__ecart { color: var(--parchemin); }
.coffre__cause { font-size: var(--t-2); color: var(--perte); }
.coffre__refus { grid-column: 1 / -1; margin: 0; font-size: var(--t-2); color: var(--perte); }
.coffre__cause.est-rappelee { font-weight: 600; }
/* La monture à l'écurie et ce que la fonte rendrait : deux faits, sous l'écart. */
.coffre__ecurie { font-size: var(--t-2); font-style: italic; color: var(--parchemin); }
/* Les parts se rangent en file : au téléphone, une part qui passe à la ligne
   garde l'interligne du texte au lieu d'ouvrir un trou. */
.coffre__fonte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-0) var(--e-2);
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--texte-pale);
}
.coffre__fonte .chiffre { white-space: nowrap; }
.coffre__fonte .chiffre__valeur { color: var(--or-vif); }
.coffre__fonte-sep { color: var(--or); }
/* Au doigt, chaque part garde sa cible de 44 px (decomposition.css) : les
   parts passent ensemble sous la phrase, sur une seule rangée. */
@media (pointer: coarse) {
  .coffre__fonte { row-gap: 0; }
  .coffre__fonte-dit { flex-basis: 100%; }
}
.coffre__fonte.est-refusee { display: block; font-style: italic; color: var(--parchemin); }
/* Une lame d'établi n'a pas d'image : son texte prend toute la ligne. */
.coffre__ligne--lame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "bouton"; }
/* Les gestes d'une ligne : porter en premier, fondre à côté, en plus discret. */
.coffre__gestes {
  grid-area: bouton;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: stretch;
}
#forge.page button.sceau-sang.coffre__porter:not(.lien) {
  flex: 1 1 10rem;
  min-height: 2.75rem;
  margin: 0;
  font-size: var(--t-3);
}
#forge.page button.sceau-sang.coffre__porter.est-empeche:not(.lien) { filter: grayscale(0.7) brightness(0.8); }
/* Fondre porte l'acier des boutons secondaires de la forge (quetes.css), comme Ranger. */
#forge.page button.coffre__fondre:not(.lien) {
  flex: 0 1 auto;
  min-height: 2.75rem;
  margin: 0;
  padding: var(--e-1) var(--e-4);
  font-size: var(--t-2);
  letter-spacing: 0.08em;
}

/* Ranger une pièce portée : un geste secondaire, sous sa case. La zone
   touchable garde 44 px. */
#forge.page button.forge-case__ranger:not(.lien):not(.dialogue__fermer) {
  justify-self: center;
  min-height: 44px;
  margin-top: var(--e-1);
  padding: var(--e-1) var(--e-4);
  font-size: var(--t-2);
  letter-spacing: 0.08em;
}

/* ── La pièce gagnée dans un rapport : son image, puis la phrase ─────── */

.piece-gagnee { display: flex; align-items: center; gap: var(--e-2); }
.piece-gagnee__vignette {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 70%, transparent);
}
.piece-gagnee__image { width: 100%; height: 100%; object-fit: contain; }
#hommes .expedition-bilan__image {
  float: left;
  width: 3rem;
  height: 3rem;
  margin: 0 var(--e-2) var(--e-1) 0;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 70%, transparent);
}
#hommes .expedition-bilan__piece { overflow: hidden; }

/* ── La découverte d une pièce ────────────────────────────────────────────
   Chaque pièce obtenue s arrête devant le joueur : l image au centre, son
   nom, ce qu elle fait, l écart avec la pièce portée, où elle est allée, et
   le choix. Même cadre que les cérémonies, en plus étroit. */

.decouverte {
  width: min(30rem, calc(100vw - 2rem));
  max-width: 30rem;
  padding: 0;
  border-color: var(--or);
  background: radial-gradient(ellipse at 50% 0%, var(--pierre-4) 0%, var(--pierre-3) 55%, var(--pierre-1) 100%);
}
.decouverte::backdrop { background: color-mix(in srgb, var(--pierre-0) 82%, transparent); }
/* La coque des dialogues du jeu les ouvre sur 56 rem : la découverte reste
   étroite, autour de sa pièce. */
html[data-vue="jeu"] dialog.decouverte { width: min(30rem, calc(100vw - 2rem)); }
.decouverte__cadre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-2);
  padding: var(--e-5) var(--e-4) var(--e-4);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--echelon-5) 35%, transparent);
}
.decouverte__cadre > p { margin: 0; }
.decouverte__source {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or-sourd);
}
.decouverte__piece {
  display: grid;
  place-items: center;
  width: min(13rem, 56vw);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--or) 16%, transparent), color-mix(in srgb, var(--pierre-0) 85%, transparent) 70%);
}
.decouverte__image { width: 100%; height: 100%; object-fit: contain; }
.decouverte__sans-image { margin: 0; padding: var(--e-4); font-style: italic; color: var(--texte-pale); }
.decouverte__nom {
  margin: var(--e-1) 0 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--t-7);
  letter-spacing: 0.04em;
  color: var(--parchemin);
  text-wrap: balance;
}
.decouverte__echelon { font-size: var(--t-2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); }
.decouverte__effets, .decouverte__ou, .decouverte__restent {
  max-width: 26rem;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--texte-pale);
}
.decouverte__ou { color: var(--parchemin); }
.decouverte__ecart { align-self: stretch; text-align: left; }
.decouverte__cause { font-size: var(--t-3); color: var(--perte); }
.decouverte__reponse { font-size: var(--t-3); color: var(--or-vif); }
.decouverte__reponse.est-refus { color: var(--perte); }
.decouverte__restent { font-size: var(--t-2); font-style: italic; }
.decouverte__autres { font-size: var(--t-3); color: var(--parchemin); }
.decouverte__autres > .decouverte__voir-coffre {
  min-height: 44px;
  padding: 0 var(--e-1);
  font: inherit;
  color: var(--or-vif);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background: none;
  border: 0;
  cursor: pointer;
}
.decouverte__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.decouverte__actions > button { min-height: 44px; }
.decouverte__actions > .sceau { margin-top: 0; padding: var(--e-2) var(--e-5); font-size: var(--t-3); letter-spacing: 0.14em; }
.decouverte__actions > button:not(.sceau) {
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-titre);
  letter-spacing: 0.08em;
  color: var(--parchemin);
  background: transparent;
  border: 1px solid var(--or-fonce);
}
.decouverte__actions > button:not(.sceau):hover,
.decouverte__actions > button:not(.sceau):focus-visible { border-color: var(--or); color: var(--or-vif); }
@keyframes decouverte-arrive { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.decouverte[open] .decouverte__cadre { animation: decouverte-arrive 500ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .decouverte[open] .decouverte__cadre { animation: none; } }