/* Fiche : identité, casier, répartition par type, badges de statut */

.profile { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.mug {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  /* toise */
  background:
    repeating-linear-gradient(to bottom, transparent 0 15px, rgba(255, 255, 255, 0.06) 15px 16px),
    repeating-linear-gradient(to bottom, transparent 0 79px, rgba(255, 255, 255, 0.16) 79px 81px),
    linear-gradient(#2c2e33, #18191c);
}

.mug img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mug__ghost { position: absolute; left: 12%; bottom: 0; width: 76%; fill: #3a3d43; }
.mug__change {
  position: absolute;
  left: 8px; right: 8px; top: 8px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.mug:hover .mug__change, .mug__change:focus-within { opacity: 1; }
.profile__id { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile__name { margin: 2px 0 0; font-family: var(--head); font-weight: 700; font-size: clamp(2.125rem, 3.8vw, 3.25rem); line-height: 1; }
.profile__alias { margin: 4px 0 0; color: var(--muted); font-size: 1.0625rem; }

.flags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.flag {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--red-soft);
  color: #ff6b70;
  border: 1px solid rgba(227, 36, 43, 0.4);
}
.flag--amber { background: var(--amber-soft); color: var(--amber); border-color: rgba(240, 167, 58, 0.4); }
.flag--grey { background: var(--grey-soft); color: var(--text); border-color: var(--line); }

.facts {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.facts .wide { grid-column: span 2; }
.facts dt { color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 1.0625rem; }

.tiles { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.tile dt { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.tile dd { margin: 6px 0 0; font-family: var(--head); font-weight: 700; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }

.grid3 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li {
  display: grid;
  grid-template-columns: 22px 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.mini-list li:first-child { border-top: 0; }
.mini-list .when { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.mini-list .what { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mini-list .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list .empty-row { display: block; color: var(--muted); grid-column: 1 / -1; }

/* Icônes de type */
.ticon { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Répartition par type */
.breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.breakdown li { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr) 24px; gap: 10px; align-items: center; }
.breakdown__label { font-weight: 600; font-size: 0.9375rem; }
.breakdown__bar { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.breakdown__bar span { display: block; height: 100%; border-radius: 4px; background: var(--red); }
.breakdown__n { text-align: right; font-family: var(--head); font-weight: 700; font-size: 1.125rem; }
.breakdown .empty-row { color: var(--muted); grid-column: 1 / -1; }

/* Badges de statut */
.status {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.status--en-cours { background: var(--amber-soft); color: var(--amber); }
.status--jamais-prouve { background: var(--green-soft); color: var(--green); }
.status--condamnee { background: var(--red-soft); color: #ff6b70; }
.status--classe { background: var(--grey-soft); color: var(--muted); }