/* Niveau, statistiques et talents (29/09/2026, interface/composants/talents.jsx).

   Même habit que le HUD (cadre.css) : médaillon de fer pour le niveau, barre
   d'expérience sertie, cartes de talent en plaque sombre à filet d'or. Un
   passif porte un écu, un ordre un étendard. Un palier à choisir s'allume, un
   palier à venir se grise avec sa condition écrite. Les boutons reprennent le
   préfixe du cadre commun : sans lui, la règle des boutons passe devant. */

.talents {
  display: grid;
  gap: var(--e-3, 12px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--police-corps);
  color: var(--texte, #e8dcc4);
}

.talents__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3, 12px);
}

/* ── Le niveau ───────────────────────────────────────────────────────────── */

.talents__niveau {
  display: flex;
  align-items: center;
  gap: var(--e-3, 12px);
  flex: 1 1 16rem;
  min-width: 0;
}
.talents__medaillon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--hud-fer-rond, radial-gradient(circle at 50% 30%, #8d9399, #26282c));
  box-shadow: 0 0 0 2px var(--hud-or-filet, #b8964f), 0 0 0 4px #0d0b09, var(--hud-ombre, 0 4px 10px rgb(0 0 0 / .5));
  font-family: var(--police-titre);
  font-size: 1.45rem;
  color: var(--hud-or-clair, #f0d9a0);
  text-shadow: 0 1px 2px #000;
}
.talents__niveau.est-compacte .talents__medaillon { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
.talents__barre-bloc { display: grid; gap: 4px; flex: 1; min-width: 0; }
.talents__barre-mot {
  font-family: var(--police-titre);
  letter-spacing: var(--capitales, .06em);
  color: var(--or-vif, #e8c36a);
}
.talents__barre {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #0c0a08, #1d1812);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .8), 0 0 0 1px rgb(184 150 79 / .55);
  overflow: hidden;
}
.talents__barre > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, #f3d98f, #b98a2e 55%, #7a5718);
  box-shadow: inset 0 1px 0 rgb(255 245 210 / .6);
}
.talents__barre-chiffres { font-size: var(--t-2, .85rem); color: var(--texte-pale, #b9ab8f); font-variant-numeric: tabular-nums; }

/* ── L'exercice ──────────────────────────────────────────────────────────── */

.talents__exercice { display: grid; gap: 4px; flex: 0 1 15rem; }
.talents__note, .talent__note, .talent__dit, .talent__ordre, .talent__porteur, .talent__refus {
  margin: 0;
  font-size: var(--t-2, .85rem);
  line-height: 1.35;
  color: var(--texte-pale, #b9ab8f);
}
.talent__dit { font-style: italic; }
.talent__refus { color: var(--perte, #d9776a); }
.talent__porteur { font-family: var(--police-titre); color: var(--or-vif, #e8c36a); }

/* ── Les statistiques ────────────────────────────────────────────────────── */

.talents__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 6px;
  margin: 0;
}
.talents__stat {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #2a231b, #16120d);
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 1px 0 rgb(255 232 180 / .12);
  border-radius: 3px;
}
.talents__stat dt { font-size: var(--t-2, .85rem); color: var(--texte-pale, #b9ab8f); }
.talents__stat dd { margin: 0; font-family: var(--police-titre); font-size: 1.1rem; color: var(--gain, #9fd08a); }

/* ── Les paliers ─────────────────────────────────────────────────────────── */

.talents__titre {
  margin: var(--e-2, 8px) 0 0;
  padding: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4, 1.05rem);
  font-weight: 400;
  letter-spacing: var(--capitales, .06em);
  color: var(--or-vif, #e8c36a);
}
.talents__paliers { display: grid; gap: var(--e-3, 12px); margin: 0; padding: 0; list-style: none; }
.talents__palier { display: grid; gap: 6px; }
.talents__palier > .talents__note { padding: 0 4px; }
.talents__palier-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.talents__palier-n {
  padding: 2px 10px;
  font-family: var(--police-titre);
  color: var(--hud-or-clair, #f0d9a0);
  background: var(--hud-cuir, #2f2114);
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6);
  border-radius: 2px;
}
.talents__palier.est-verrouille .talents__palier-n { color: var(--texte-pale, #b9ab8f); box-shadow: inset 0 0 0 1px rgb(120 110 95 / .5); }
.talents__palier-verrou { font-size: var(--t-2, .85rem); color: var(--texte-pale, #b9ab8f); }
.talents__pastille {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f27a5e, #a52a1a 70%);
  box-shadow: 0 0 0 1px #2a0c07, 0 0 8px rgb(242 122 94 / .7);
  font: 700 .8rem/1 var(--police-corps);
  color: #fff4e6;
  vertical-align: middle;
}

.talents__offre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 8px;
}
/* L'arbre : un palier par colonne, ses deux ou trois talents l'un sous l'autre. */
.talents__paliers { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); align-items: start; }
.talents__palier .talents__offre { grid-template-columns: 1fr; }

/* Dans la fiche d'une sorte, au bureau : le volet des talents prend toute la
   largeur sous les trois autres, sinon l'arbre tient dans un quart d'écran. */
@container fiche (min-width: 50rem) {
  :is(#hommes #armee, #siege #recrutement) .ost__volets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#hommes #armee, #siege #recrutement) .ost__volet--entrainer {
    grid-column: 1 / -1;
    order: 5;
    padding: var(--e-3, 12px) 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--or, #b8964f) 30%, transparent);
  }
}

/* ── Une carte de talent ─────────────────────────────────────────────────── */

.talent {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 3px;
  background:
    var(--hud-grain, none),
    radial-gradient(120% 80% at 50% 0%, rgb(74 58 40 / .45), transparent 70%),
    linear-gradient(180deg, #211b15, #110e0b);
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .5), inset 0 0 0 3px #0d0b09, 0 3px 8px rgb(0 0 0 / .45);
}
.talent__tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.talent__genre {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--hud-fer-rond, #33363a);
  box-shadow: 0 0 0 1px var(--hud-or-filet, #b8964f);
  color: var(--hud-or-clair, #f0d9a0);
}
.talent--actif .talent__genre { color: #f2a36a; }
.talent__nom { font-family: var(--police-titre); font-size: 1.02rem; color: var(--hud-or-clair, #f0d9a0); }
.talent__drapeau { font-size: .75rem; color: var(--texte-pale, #b9ab8f); }
.talent__effets { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.talent__effets li { font-size: var(--t-3, .95rem); color: var(--gain, #9fd08a); }
.talent__effets li::before { content: '◆ '; font-size: .6em; vertical-align: .2em; color: var(--hud-or-filet, #b8964f); }

.talent.est-pris, .talent.est-choisi {
  box-shadow: inset 0 0 0 2px #e6c065, inset 0 0 0 4px #0d0b09, 0 0 14px rgb(230 192 101 / .35), 0 3px 8px rgb(0 0 0 / .45);
}
.talent.est-ecarte, .talent.est-verrouille { opacity: .55; filter: saturate(.4); }
.talent.est-endormi { opacity: .75; box-shadow: inset 0 0 0 2px rgb(150 150 170 / .7), inset 0 0 0 4px #0d0b09; }
.talents__palier.est-a-choisir .talent.est-offert { box-shadow: inset 0 0 0 1px #e6c065, inset 0 0 0 3px #0d0b09, 0 0 10px rgb(230 192 101 / .25); }

.talents__retour { margin: 0; font-size: var(--t-3, .95rem); color: var(--gain, #9fd08a); }
.talents__retour.refus { color: var(--perte, #d9776a); }
.talents__vide { margin: 0; color: var(--texte-pale, #b9ab8f); }

/* ── Les boutons ─────────────────────────────────────────────────────────── */

html:not(#cadre#cadre#cadre) button.talents__geste {
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid #0d0b09;
  border-radius: 3px;
  background: var(--hud-fer, linear-gradient(180deg, #62676d, #1b1d20));
  box-shadow: var(--hud-relief, inset 0 1px 0 rgb(255 232 180 / .22)), 0 0 0 1px rgb(184 150 79 / .55), 0 2px 5px rgb(0 0 0 / .5);
  font-family: var(--police-titre);
  font-size: .98rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--hud-or-clair, #f0d9a0);
  text-shadow: 0 1px 1px #000;
  cursor: pointer;
}
html:not(#cadre#cadre#cadre) button.talents__geste small { font-family: var(--police-corps); font-size: .78rem; color: #d9ccb0; }
html:not(#cadre#cadre#cadre) button.talents__geste--or:not(:disabled) {
  background: linear-gradient(180deg, #f1d58c, #b98a2e 55%, #6d4c14);
  color: #1b1208;
  text-shadow: 0 1px 0 rgb(255 240 200 / .6);
}
html:not(#cadre#cadre#cadre) button.talents__geste--discret {
  justify-self: start;
  min-height: 32px;
  padding: 3px 10px;
  background: transparent;
  box-shadow: 0 0 0 1px rgb(184 150 79 / .35);
  font-size: .85rem;
  color: var(--texte-pale, #b9ab8f);
}
html:not(#cadre#cadre#cadre) button.talents__geste:not(:disabled):is(:hover, :focus-visible) {
  filter: brightness(1.15);
  box-shadow: var(--hud-relief, none), 0 0 0 1px #f0d9a0, 0 0 10px rgb(240 217 160 / .45);
}
html:not(#cadre#cadre#cadre) button.talents__geste:not(:disabled):active { transform: translateY(1px); filter: brightness(.92); }
html:not(#cadre#cadre#cadre) button.talents__geste:disabled { opacity: .5; cursor: not-allowed; }

/* Le niveau sur la carte du registre. */
.ost__carte-niveau { display: inline-flex; align-items: center; gap: 2px; font-family: var(--police-titre); color: var(--hud-or-clair, #f0d9a0); }

/* La fiche du dragon, sous ses capacités. */
.bete__talents { display: grid; gap: var(--e-2, 8px); margin-top: var(--e-3, 12px); }

@media (max-width: 42rem) {
  .talents__offre { grid-template-columns: 1fr; }
  .talents__medaillon { width: 2.8rem; height: 2.8rem; font-size: 1.2rem; }
  .talents__exercice { flex: 1 1 100%; }
}

/* Les ordres à la préparation : des cartes courtes, deux par rangée quand la
   feuille le permet. La phrase de situation reste sur la fiche de la sorte. */
.talents--ordres .talents__offre { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px; }
.talents--ordres .talent { padding: 7px 9px; gap: 3px; }
.talents--ordres .talent__dit,
.talents--ordres .talent__note { display: none; }
.talents--ordres .talent__nom { font-size: .95rem; }
.talents--ordres .talent__effets li { font-size: var(--t-2, .85rem); }
html:not(#cadre#cadre#cadre) .talents--ordres button.talents__geste { min-height: 34px; padding: 3px 10px; font-size: .9rem; }