/* ─────────────────────────────────────────────────────────────────────────
   « Ton personnage » (plan des onglets, lot D, 24/09/2026)

   Trois onglets sur la page `#forge` (identifiant historique) : la Fiche,
   l'Équipement (la forge) et l'Ascension. Toutes les valeurs viennent de
   jeu/jetons.css ; l'en-tête, les onglets et les trois boutons viennent de
   jeu/styles/cadre.css, chargée après cette feuille.

   Le préfixe `html[data-vue="jeu"] #forge.page` pèse un identifiant et deux
   classes : la feuille de la forge (parure-forge.css) et la signature des
   boutons de quetes.css écrivent `#forge.page …`, et une règle plus légère
   perdait sans bruit (piège 2 de la cascade).
   ───────────────────────────────────────────────────────────────────────── */


/* ── Communs ─────────────────────────────────────────────────────────────── */

html[data-vue="jeu"] #forge.page .personnage__titre {
  margin: 0 0 var(--e-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--or-vif);
}
html[data-vue="jeu"] #forge.page .personnage__sous-titre {
  margin: var(--e-3) 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-weight: 400;
  color: var(--or);
}
html[data-vue="jeu"] #forge.page .personnage__dit,
html[data-vue="jeu"] #forge.page .personnage__note {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: var(--interligne);
  color: var(--texte);
}
html[data-vue="jeu"] #forge.page .personnage__note {
  margin-top: var(--e-3);
  font-size: var(--t-2);
  color: var(--texte-pale);
}
html[data-vue="jeu"] #forge.page .personnage__retour {
  margin: var(--e-2) 0 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte);
}
html[data-vue="jeu"] #forge.page .personnage__retour.est-bon { color: var(--gain); }
html[data-vue="jeu"] #forge.page .personnage__retour.refus { color: var(--perte); }

/* Une jauge décorative : le chiffre écrit à côté dit la même chose. */
.personnage-jauge {
  display: block;
  height: 6px;
  border-radius: var(--rayon);
  background: var(--pierre-4);
  overflow: hidden;
}
.personnage-jauge > span {
  display: block;
  height: 100%;
  background: var(--or-fonce);
}
.personnage-jauge.est-tiede > span { background: var(--or-sourd); }
.personnage-jauge.est-pleine > span { background: var(--gain); }

.personnage-jeton {
  display: inline-block;
  padding: var(--e-0) var(--e-2);
  border: var(--filet);
  border-radius: var(--rayon);
  background: var(--pierre-3);
  font-family: var(--police-corps);
  font-size: var(--t-2);
  color: var(--texte-fort);
}

/* La vignette 3D du héros : une photo de l'atelier, au format 4 sur 5. */
.personnage-vignette {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--filet);
  border-radius: var(--rayon);
  background: var(--pierre-1);
}
.personnage-vignette img,
.personnage-vignette canvas,
.personnage-vignette > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── La Fiche ────────────────────────────────────────────────────────────── */

html[data-vue="jeu"] #forge.page .personnage-fiche:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
}
/* Les deux sections React entrent dans la grille de la fiche. */
html[data-vue="jeu"] #forge.page .personnage-fiche__racine { display: contents; }

/* Au téléphone, les compétences et leurs cases d'abord : c'est là qu'on agit. */
html[data-vue="jeu"] #forge.page .personnage-competences { order: 1; }
html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero { order: 2; }
html[data-vue="jeu"] #forge.page .personnage-caractere { order: 3; }
html[data-vue="jeu"] #forge.page .personnage-fiche .maison { order: 4; }
html[data-vue="jeu"] #forge.page .personnage-fiche .sang { order: 5; }

/* La situation : le héros en pied, l'identité et les quatre jauges. */
html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
  margin: 0;
  padding: var(--e-3);
  border: var(--filet);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  box-shadow: var(--ombre-2);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .portrait {
  position: relative;
  width: 100%;
  margin: 0;
}
html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero__texte {
  display: grid;
  gap: var(--e-2);
  min-width: 0;
}
html[data-vue="jeu"] #forge.page .personnage-fiche .identite .colonne__titre {
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--or-vif);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .identite__resume {
  margin: 0 0 var(--e-2);
  font-size: var(--t-3);
  font-style: normal;
  color: var(--texte-fort);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .identite__details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--e-1);
  margin: 0;
}
html[data-vue="jeu"] #forge.page .personnage-fiche .identite__details > div {
  display: grid;
  gap: 0;
  padding: var(--e-1) var(--e-2);
  border: var(--filet-cuir);
  border-radius: var(--rayon);
  background: var(--pierre-1);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .identite__details dt {
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--texte-pale);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .identite__details dd {
  margin: 0;
  font-size: var(--t-3);
  color: var(--texte-fort);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .jauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-1);
  margin: 0;
}
html[data-vue="jeu"] #forge.page .personnage-fiche .jauge {
  position: relative;
  margin: 0;
  padding: var(--e-1) var(--e-2);
  border: var(--filet-cuir);
  border-radius: var(--rayon);
  background: var(--pierre-1);
  overflow: hidden;
}
html[data-vue="jeu"] #forge.page .personnage-fiche .jauge--experience { grid-column: 1 / -1; }
html[data-vue="jeu"] #forge.page .personnage-fiche .jauge dt {
  font-size: var(--t-1);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--texte-pale);
}
html[data-vue="jeu"] #forge.page .personnage-fiche .jauge dd {
  margin: 0;
  font-size: var(--t-3);
  color: var(--texte-fort);
}

/* Les compétences : une ligne par compétence, sa case en tête. */
html[data-vue="jeu"] #forge.page .personnage-competences { container: competences / inline-size; }
html[data-vue="jeu"] #forge.page .personnage-competences__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--e-3);
  margin-bottom: var(--e-1);
}
html[data-vue="jeu"] #forge.page .personnage-competences__tete .personnage__titre { margin: 0; }
html[data-vue="jeu"] #forge.page .personnage-competences__tete > :not(.personnage__titre, .personnage-competences__garder) { grid-column: 1 / -1; }
/* Étroit : le compte et le bouton passent sous le titre, sur toute la largeur ;
   dans la colonne `auto`, le compte débordait sur le titre au téléphone. */
html[data-vue="jeu"] #forge.page .personnage-competences__garder {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  margin-top: var(--e-1);
}
@container competences (min-width: 40rem) {
  html[data-vue="jeu"] #forge.page .personnage-competences__garder { grid-column: auto; justify-content: end; margin-top: 0; }
}
html[data-vue="jeu"] #forge.page .personnage-competences__regle { font-size: var(--t-2); color: var(--texte-pale); }
html[data-vue="jeu"] #forge.page .personnage-competences__entetes {
  display: none;
}
html[data-vue="jeu"] #forge.page .personnage-competences__liste {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Téléphone : la case, le nom, le niveau ; ce qui manque et les gestes dessous. */
html[data-vue="jeu"] #forge.page .personnage-competence {
  display: grid;
  grid-template-columns: var(--cible) minmax(0, 1fr) 2.5rem;
  align-items: center;
  column-gap: var(--e-2);
  margin: 0;
  padding: var(--e-1) 0;
  border: 0;
  border-top: var(--filet-cuir);
  background: none;
}
html[data-vue="jeu"] #forge.page .personnage-competence.est-choisie { background: var(--voile-or); }
html[data-vue="jeu"] #forge.page .personnage-competence__case {
  display: grid;
  place-items: center;
  width: var(--cible);
  height: var(--cible);
  grid-row: 1 / span 2;
  cursor: pointer;
}
html[data-vue="jeu"] #forge.page .personnage-competence__case input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--or);
  cursor: pointer;
}
html[data-vue="jeu"] #forge.page .personnage-competence__nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--texte-fort);
}
html[data-vue="jeu"] #forge.page .personnage-competence__niveau {
  justify-self: end;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  color: var(--or-vif);
}
html[data-vue="jeu"] #forge.page .personnage-competence__suivant {
  grid-column: 2 / -1;
  display: grid;
  gap: var(--e-0);
  font-size: var(--t-2);
  color: var(--texte);
}
/* « Monte quand » : dans l'infobulle du nom, au survol et au clavier (9/10/2026, moins de texte à l'écran). */
html[data-vue="jeu"] #forge.page .personnage-competence__nom[data-infobulle] {
  position: relative; justify-self: start; cursor: help;
  text-decoration: underline dotted rgb(214 180 105 / .55); text-underline-offset: 4px;
}
html[data-vue="jeu"] #forge.page .personnage-competence__nom[data-infobulle]:focus-visible { outline: 2px solid #f0d9a0; outline-offset: 3px; }
html[data-vue="jeu"] #forge.page .personnage-competence__nom[data-infobulle]:is(:hover, :focus-visible)::after {
  content: attr(data-infobulle);
  position: absolute; z-index: 30; top: calc(100% + 6px); left: -6px;
  width: max-content; max-width: min(20rem, 70vw); padding: 7px 10px;
  border: 2px solid #3a2a17; border-radius: 4px;
  background: var(--habit-parchemin); box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 10px 24px rgb(0 0 0 / .65);
  font: 400 var(--t-2) / 1.4 var(--police-corps); letter-spacing: 0; text-transform: none; text-shadow: none; white-space: normal; color: #2b1b0c;
  pointer-events: none;
}
html[data-vue="jeu"] #forge.page .personnage-competence__vite {
  margin-left: .5rem; font-style: normal; font-size: var(--t-1); color: var(--or-vif);
}
/* L'apport des traits portés, à côté du niveau ; sa note dit quel trait (16/10/2026). */
html[data-vue="jeu"] #forge.page .personnage-competence__trait {
  margin-left: .25rem; font: 600 var(--t-1) / 1 var(--police-corps); font-style: normal; color: #9fd08a; white-space: nowrap;
}
html[data-vue="jeu"] #forge.page .personnage-competence__trait.est-dur { color: #e0a090; }
/* Au large, les colonnes : case, compétence, niveau, prochain niveau, gestes. */
@container competences (min-width: 40rem) {
  html[data-vue="jeu"] #forge.page .personnage-competences__entetes,
  html[data-vue="jeu"] #forge.page .personnage-competence {
    display: grid;
    grid-template-columns: var(--cible) 9rem 3.5rem minmax(11rem, 1fr);
    column-gap: var(--e-3);
    align-items: center;
  }
  html[data-vue="jeu"] #forge.page .personnage-competences__entetes {
    padding: var(--e-1) 0;
    font-size: var(--t-1);
    letter-spacing: var(--capitales);
    text-transform: uppercase;
    color: var(--texte-pale);
  }
  html[data-vue="jeu"] #forge.page .personnage-competences__entetes > span:first-child { text-align: center; }
  html[data-vue="jeu"] #forge.page .personnage-competence { padding: 0; }
  html[data-vue="jeu"] #forge.page .personnage-competence__case { grid-row: auto; }
  html[data-vue="jeu"] #forge.page .personnage-competence__niveau { justify-self: center; }
  html[data-vue="jeu"] #forge.page .personnage-competence__suivant { grid-column: auto; }
}

/* Le caractère : les traits, puis une ligne par axe. */
html[data-vue="jeu"] #forge.page .personnage-caractere__traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0 0 var(--e-2);
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #forge.page .personnage-caractere__axes {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #forge.page .personnage-axe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-0) var(--e-3);
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
html[data-vue="jeu"] #forge.page .personnage-axe__nom { grid-row: 1; grid-column: 1; }
html[data-vue="jeu"] #forge.page .personnage-axe__valeur { grid-row: 1; grid-column: 2; }
html[data-vue="jeu"] #forge.page .personnage-axe__bouts { grid-row: 2; }
html[data-vue="jeu"] #forge.page .personnage-axe__trait { grid-row: 3; }
html[data-vue="jeu"] #forge.page .personnage-axe__nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--texte-fort);
}
html[data-vue="jeu"] #forge.page .personnage-axe__valeur { justify-self: end; font-size: var(--t-3); color: var(--texte-fort); }
html[data-vue="jeu"] #forge.page .personnage-axe__bouts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem;
  gap: var(--e-2);
  align-items: center;
  font-size: var(--t-1);
  color: var(--texte-pale);
}
html[data-vue="jeu"] #forge.page .personnage-axe__bouts > span:last-child { text-align: end; }
html[data-vue="jeu"] #forge.page .personnage-axe__barre {
  position: relative;
  height: 6px;
  border-radius: var(--rayon);
  background: linear-gradient(90deg, var(--cire), var(--pierre-4) 50%, var(--or-sourd));
}
html[data-vue="jeu"] #forge.page .personnage-axe__barre > span {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 14px;
  margin-left: -2px;
  border-radius: var(--rayon);
  background: var(--parchemin-clair);
  box-shadow: var(--ombre-1);
}
html[data-vue="jeu"] #forge.page .personnage-axe__trait {
  grid-column: 1 / -1;
  font-size: var(--t-2);
  color: var(--or);
}

/* La maison et le sang, repris des compagnons, dans le même cadre. */
html[data-vue="jeu"] #forge.page .personnage-fiche :is(.maison, .sang) {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border: var(--filet);
  border-radius: var(--rayon);
  background: var(--pierre-2);
  box-shadow: var(--ombre-2);
}
html[data-vue="jeu"] #forge.page .personnage-fiche :is(.maison, .sang) .colonne__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--or-vif);
}

/* Téléphone : le héros à gauche de son identité, les jauges sous les deux. */
@media (max-width: 42rem) {
  html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero { grid-template-columns: 7.5rem minmax(0, 1fr); }
  html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero__texte { display: contents; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .jauges { grid-column: 1 / -1; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .identite__details { grid-template-columns: minmax(0, 1fr); }
}

/* Bureau : la situation, la maison et le sang à gauche, les compétences et
   le caractère à droite. */
@media (min-width: 68rem) {
  html[data-vue="jeu"] #forge.page .personnage-fiche:not([hidden]) {
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    align-items: start;
  }
  html[data-vue="jeu"] #forge.page .personnage-fiche > * { order: 0; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .portrait { width: 12rem; justify-self: center; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .maison { grid-column: 1; grid-row: 2; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .sang { grid-column: 1; grid-row: 3; }
  /* La colonne de droite est un seul bloc qui traverse une dernière rangée
     flexible : il ne gonfle plus les rangées de la situation et de la maison,
     et le caractère suit les compétences sans trou (relevé du 24/09/2026). */
  html[data-vue="jeu"] #forge.page .personnage-fiche:not([hidden]) { grid-template-rows: auto auto auto 1fr; }
  html[data-vue="jeu"] #forge.page .personnage-fiche__racine {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    grid-column: 2;
    grid-row: 1 / span 4;
    min-width: 0;
  }
}


/* Grand bureau (30/09/2026) : un écran de personnage de jeu PC. Le héros en
   pied tient toute la colonne de gauche, en grand, avec son identité et ses
   jauges dessous ; les compétences courent en haut à droite sur deux
   colonnes, le caractère et le sang dessous, la maison à côté. À 1 440 px,
   l'ancienne grille laissait les deux tiers du panneau vides sous le
   caractère pendant que la maison et le sang descendaient sous le héros. */
@media (min-width: 84rem) {
  html[data-vue="jeu"] #forge.page .personnage-fiche:not([hidden]) {
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr) minmax(16rem, 20rem);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "heros comp  comp"
      "heros carac maison"
      "heros sang  maison";
  }
  html[data-vue="jeu"] #forge.page .personnage-fiche__racine { display: contents; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .salle-hero { grid-area: heros; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .personnage-competences { grid-area: comp; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .personnage-caractere { grid-area: carac; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .maison { grid-area: maison; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .sang { grid-area: sang; }
  html[data-vue="jeu"] #forge.page .personnage-fiche .portrait { width: 100%; justify-self: stretch; }
}

/* ── L'Équipement ────────────────────────────────────────────────────────── */

/* Bureau : les places à gauche, la liste comparable au milieu dès le premier
   écran, le héros en pied et ce qu'il porte à droite. La maison n'y est plus :
   elle se lit dans la Fiche. */
@media (min-width: 68rem) {
  html[data-vue="jeu"] #forge.page .personnage-equipement .forge-etabli {
    grid-template-columns: 12.5rem minmax(0, 1fr) 17rem;
    /* Le refus prend toute la largeur au-dessus : une rangée vide partagée
       avec le rail et le héros se gonflait de leur hauteur, et la liste
       descendait de 300 pixels. */
    /* La ligne qui ferme la forge (rien à ton prix, le bâtiment qui manque) se lit
       sous les places : au-dessus de la liste, il la repoussait sous le
       premier écran. La rangée du milieu est flexible : le héros et la liste
       qui la traversent ne gonflent pas les autres. */
    grid-template-areas:
      "refus refus refus"
      "rail rayon scene"
      "ferme rayon scene"
      ". rayon cases"
      "coffre coffre coffre"
      "pied pied pied";
    grid-template-rows: auto auto 1fr auto auto auto;
    align-items: start;
  }
}
/* La liste défile dans son cadre, sous son en-tête : trois cents armes ne
   repoussent plus le coffre à dix écrans. */
/* `position: relative` : les mots cachés des lignes, placés en absolu,
   s'accrochaient au cadre du rayon et allongeaient la page de la liste
   entière (1 100 pixels vides sous le coffre, relevé du 24/09/2026). */
html[data-vue="jeu"] #forge.page #forge-rayon-racine .forge-liste__liste {
  position: relative;
  max-height: max(18rem, calc(100vh - 22rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (max-width: 68rem) {
  html[data-vue="jeu"] #forge.page .personnage-equipement .forge-etabli {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "refus" "rayon" "ferme" "scene" "cases" "coffre" "pied";
  }
}
html[data-vue="jeu"] #forge.page .personnage-equipement #forge-ferme { grid-area: ferme; margin: 0; }
html[data-vue="jeu"] #forge.page #forge-rayon-racine .forge-liste { padding-top: var(--e-3); }
/* Téléphone : les places en une rangée de puces qui glisse au-dessus de la liste,
   serrée contre elle pour que le choix de la place tienne dans le premier tiers. */
@media (max-width: 42rem) {
  html[data-vue="jeu"] #forge.page .personnage-equipement .forge-etabli { gap: var(--e-2); }
  html[data-vue="jeu"] #forge.page #forge-rayon-racine .forge-liste { padding-top: var(--e-2); }
  html[data-vue="jeu"] #forge.page .personnage-equipement .forge-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--e-1);
    padding: var(--e-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  html[data-vue="jeu"] #forge.page .personnage-equipement .forge-rail button.rangee.forge-rail__ligne:not(.lien) {
    flex: 0 0 auto;
    /* La règle commune des rangées met chaque bouton à toute la largeur : une
       seule place se voyait, et rien ne disait que la rangée glisse. */
    width: auto;
    min-width: 5.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-height: var(--cible);
    padding: var(--e-1) var(--e-2);
    scroll-snap-align: start;
  }
  html[data-vue="jeu"] #forge.page .personnage-equipement .forge-rail__ligne .rangee__compte { flex-basis: auto; }
}


/* ── L'Ascension ─────────────────────────────────────────────────────────── */

html[data-vue="jeu"] #forge.page #personnage-ascension-racine {
  display: grid;
  gap: var(--e-4);
}
html[data-vue="jeu"] #forge.page .ascension-conditions {
  display: grid;
  gap: 0;
  margin: var(--e-2) 0;
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #forge.page .ascension-condition {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  gap: var(--e-1) var(--e-3);
  align-items: center;
  margin: 0;
  padding: var(--e-2) 0;
  border: 0;
  border-top: var(--filet-cuir);
  background: none;
}
html[data-vue="jeu"] #forge.page .ascension-condition__marque { color: var(--or); text-align: center; }
html[data-vue="jeu"] #forge.page .ascension-condition__dit { font-size: var(--t-3); color: var(--texte-fort); }
html[data-vue="jeu"] #forge.page .ascension-condition.est-atteinte .ascension-condition__dit { color: var(--texte-pale); }
html[data-vue="jeu"] #forge.page .ascension-condition__mesure {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(4rem, 10rem) auto;
  gap: var(--e-2);
  align-items: center;
  font-size: var(--t-2);
  color: var(--texte);
}
html[data-vue="jeu"] #forge.page .ascension-condition__mesure:empty { display: none; }
html[data-vue="jeu"] #forge.page .ascension-condition__geste { grid-column: 3; grid-row: 1 / span 2; }
html[data-vue="jeu"] #forge.page .ascension-condition__geste:empty { display: none; }
html[data-vue="jeu"] #forge.page .ascension-rang__tete .personnage__titre { margin-bottom: var(--e-1); }
html[data-vue="jeu"] #forge.page .ascension-rang__gestes .bouton-monter { width: auto; }
html[data-vue="jeu"] #forge.page .ascension-rang__gestes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-2);
}
html[data-vue="jeu"] #forge.page .ascension-ouvre__actes {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-3);
  color: var(--texte);
}
html[data-vue="jeu"] #forge.page .ascension-ouvre__actes li { margin: 0; padding: 0; border: 0; background: none; }
html[data-vue="jeu"] #forge.page .ascension-ouvre strong { color: var(--texte-fort); font-weight: 400; }

/* L'échelle : une file qui glisse, ton rang au milieu de la vue. */
html[data-vue="jeu"] #forge.page .ascension-echelle__file {
  position: relative;
  display: flex;
  gap: var(--e-2);
  margin: 0;
  padding: 0 0 var(--e-2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
html[data-vue="jeu"] #forge.page .ascension-echelon {
  flex: 0 0 6.5rem;
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  scroll-snap-align: center;
}
html[data-vue="jeu"] #forge.page .ascension-echelon__nom {
  font-size: var(--t-2);
  line-height: 1.2;
  color: var(--texte-pale);
}
html[data-vue="jeu"] #forge.page .ascension-echelon.est-atteinte .ascension-echelon__nom { color: var(--texte); }
html[data-vue="jeu"] #forge.page .ascension-echelon.est-courante .ascension-echelon__nom { color: var(--or-vif); }
html[data-vue="jeu"] #forge.page .ascension-echelon.est-courante .personnage-vignette { border: var(--filet-fort); }
html[data-vue="jeu"] #forge.page .ascension-echelon.est-visee .personnage-vignette { border-color: var(--or); border-style: dashed; }
html[data-vue="jeu"] #forge.page .ascension-echelon.est-verrouillee .personnage-vignette { filter: grayscale(0.7) brightness(0.7); }

/* ── La ligne de la Demeure ──────────────────────────────────────────────── */

html[data-vue="jeu"] .demeure-personnage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  margin: var(--e-2) 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  color: var(--texte);
}


/* ── Le portrait du bandeau ──────────────────────────────────────────────── */

html[data-vue="jeu"] #jeu .hud .bandeau__portrait {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 0;
  padding: 0;
  border: var(--filet);
  border-radius: var(--rayon-rond);
  background: var(--pierre-1);
  overflow: hidden;
  cursor: pointer;
}
html[data-vue="jeu"] #jeu .hud .bandeau__portrait:is(:hover, :focus-visible) {
  border-color: var(--or);
  outline: 2px solid var(--or);
  outline-offset: 2px;
}
html[data-vue="jeu"] #jeu .hud .bandeau__portrait > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}