.tcs-bestiaire-card {
--tcs-copper: #b87333;
--tcs-gold: #e2bd69;
--tcs-dark: #1d1714;
--tcs-dark-soft: #2a211c;
--tcs-text: #f3e6cf;
--tcs-muted: #c9b9a4;

max-width: 900px;
margin: 28px auto;
overflow: hidden;

background:
linear-gradient(
135deg,
rgba(32, 23, 18, 0.98),
rgba(18, 13, 11, 0.98)
);

border: 1px solid var(--tcs-copper);
border-radius: 16px;

color: var(--tcs-text);

box-shadow:
0 8px 24px rgba(0, 0, 0, 0.18);
}

.tcs-bestiaire-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;

padding: 20px 24px;

border-bottom: 1px solid rgba(184, 115, 51, 0.45);

background:
linear-gradient(
90deg,
rgba(184, 115, 51, 0.12),
transparent
);
}

.tcs-bestiaire-card__eyebrow {
margin: 0 0 4px;

font-size: 12px;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 0.12em;

color: var(--tcs-copper);
}

.tcs-bestiaire-card__title {
margin: 0;

font-size: clamp(24px, 4vw, 34px);
line-height: 1.1;

color: var(--tcs-gold);
}

.tcs-bestiaire-card__badge {
flex-shrink: 0;

display: inline-flex;
align-items: center;

padding: 6px 11px;

border: 1px solid var(--tcs-copper);
border-radius: 999px;

background: rgba(184, 115, 51, 0.12);

color: var(--tcs-gold);

font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}

.tcs-bestiaire-card__body {
display: grid;
grid-template-columns: minmax(180px, 260px) 1fr;
gap: 24px;

padding: 24px;
}

.tcs-bestiaire-card__portrait {
overflow: hidden;

border: 1px solid rgba(184, 115, 51, 0.6);
border-radius: 14px;

background: var(--tcs-dark-soft);

aspect-ratio: 1 / 1;
}

.tcs-bestiaire-card__portrait img {
display: block;

width: 100%;
height: 100%;

object-fit: cover;
}

.tcs-bestiaire-card__content {
min-width: 0;
}

.tcs-bestiaire-card__details {
margin: 0;
}

.tcs-bestiaire-card__row {
display: grid;
grid-template-columns: minmax(120px, 160px) 1fr;
gap: 16px;

padding: 10px 0;

border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tcs-bestiaire-card__row:last-child {
border-bottom: 0;
}

.tcs-bestiaire-card__row dt {
margin: 0;

font-size: 12px;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 0.05em;

color: var(--tcs-copper);
}

.tcs-bestiaire-card__row dd {
margin: 0;

line-height: 1.55;

color: var(--tcs-text);
}

.tcs-bestiaire-card__danger {
color: var(--tcs-gold);
font-weight: 700;
}

.tcs-bestiaire-card__story {
margin-top: 20px;
padding: 16px 18px;

border-left: 3px solid var(--tcs-copper);
border-radius: 6px;

background: rgba(184, 115, 51, 0.07);
}

.tcs-bestiaire-card__story h3 {
margin: 0 0 8px;

font-size: 16px;

color: var(--tcs-gold);
}

.tcs-bestiaire-card__story p {
margin: 0;

line-height: 1.65;

color: var(--tcs-muted);
}

/* Légère distinction visuelle selon la gamme */

.tcs-bestiaire-card--fluffy .tcs-bestiaire-card__badge {
background: rgba(226, 189, 105, 0.12);
}

.tcs-bestiaire-card--grumpii .tcs-bestiaire-card__badge {
background: rgba(184, 115, 51, 0.16);
}

/* Responsive */

@media screen and (max-width: 700px) {

.tcs-bestiaire-card {
margin: 20px 0;
}

.tcs-bestiaire-card__header {
align-items: flex-start;
flex-direction: column;
}

.tcs-bestiaire-card__body {
grid-template-columns: 1fr;
padding: 18px;
}

.tcs-bestiaire-card__portrait {
max-width: 260px;
}

.tcs-bestiaire-card__row {
grid-template-columns: 1fr;
gap: 4px;
}
}


/* ==========================================================
   TCS-BESTIAIRE-LAYOUT-FIX
   Contenu pleine largeur lorsqu'aucun portrait n'est défini
   ========================================================== */

/*
 * Sans portrait, le contenu était placé dans la première
 * colonne de la grille (180-260px), laissant toute la
 * seconde moitié de la fiche vide.
 */
.tcs-bestiaire-card__body
> .tcs-bestiaire-card__content:only-child {
grid-column: 1 / -1;
width: 100%;
}


/*
 * Sur une fiche sans portrait, les informations peuvent
 * exploiter toute la largeur disponible.
 */
.tcs-bestiaire-card__content:only-child
.tcs-bestiaire-card__details {
width: 100%;
}


/*
 * Histoire en pleine largeur du contenu.
 */
.tcs-bestiaire-card__content:only-child
.tcs-bestiaire-card__story {
width: 100%;
box-sizing: border-box;
}


/*
 * Un peu plus d'espace pour les valeurs sur grand écran.
 */
@media screen and (min-width: 701px) {

.tcs-bestiaire-card__content:only-child
.tcs-bestiaire-card__row {
grid-template-columns:
minmax(160px, 220px)
minmax(0, 1fr);
}

.tcs-bestiaire-card__content:only-child
.tcs-bestiaire-card__story {
margin-top: 24px;
padding: 20px 22px;
}

}


/*
 * Mobile : on conserve la disposition verticale existante.
 */
@media screen and (max-width: 700px) {

.tcs-bestiaire-card__body
> .tcs-bestiaire-card__content:only-child {
grid-column: auto;
}

.tcs-bestiaire-card__content:only-child
.tcs-bestiaire-card__row {
grid-template-columns: 1fr;
}

}