/* ─────────────────────────────────────────────────────────────────────────────
   Profil d'un membre du forum (perfil.php, 19/10/2026) et pseudo de la page compte.
   Feuille À PART de site.css : site.css porte des retouches du créateur pas encore
   commitées (vidéo de gameplay) ; une seconde feuille se déploie sans les toucher.
   Même palette (variables de site.css) ; liée dans l'en-tête de toutes les pages,
   parce que la navigation sans rechargement (site.js) ne relit pas le <head>.
   ───────────────────────────────────────────────────────────────────────────── */

.perfil-trilha { padding-top: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 1rem; }
.perfil-placa {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 2.6rem);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.perfil-lado { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.perfil-avatar {
  --cor-classe: var(--ouro);
  position: relative;
  width: 168px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--cor-classe);
  border-radius: 4px;
  background: radial-gradient(120% 80% at 50% 20%, rgba(89, 22, 154, 0.35), #100E15 70%);
  box-shadow: 0 0 0 1px var(--contorno), 0 14px 30px -18px rgba(0, 0, 0, 0.9);
}
/* Portrait en pied 440×720 : on garde le buste. */
.perfil-avatar img { display: block; width: 100%; height: auto; transform: scale(1.5); transform-origin: 50% 8%; }
.perfil-avatar-inicial { display: grid; place-items: center; }
.perfil-avatar-gema { position: absolute; width: 58%; height: auto; fill: var(--ametista); opacity: 0.55; }
.perfil-avatar-inicial span {
  position: relative;
  font: 400 4.2rem/1 var(--fonte-titulo);
  color: var(--titulo);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.perfil-ver { text-align: center; }

.perfil-cabeca h1 { margin: 0; font: 400 clamp(1.8rem, 4vw, 2.4rem)/1.15 var(--fonte-titulo); color: var(--titulo); overflow-wrap: anywhere; }
.perfil-grupo { margin: 0.5rem 0 0; color: var(--texto-2); }
.perfil-grupo strong { font-weight: 800; }
/* Le rouge de l'administrateur, comme sur la référence : la seule couleur vive de la page. */
.perfil-grupo-admin { color: #FF4B4B; }
.perfil-grupo-moderador { color: var(--positivo); }
.perfil-grupo-membro { color: var(--texto); }

.perfil-fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem 2rem;
  margin: 1.4rem 0 0;
  padding: 1rem 0;
  border-block: 1px dashed rgba(207, 177, 139, 0.22);
}
.perfil-fatos div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; }
.perfil-fatos dt { color: var(--texto-2); }
.perfil-fatos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.perfil-secao { margin-top: 1.6rem; }
.perfil-secao h2 { margin: 0 0 0.8rem; font: 400 1.35rem/1.2 var(--fonte-titulo); color: var(--titulo); }
.perfil-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.perfil-tabela th, .perfil-tabela td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid rgba(207, 177, 139, 0.12); }
.perfil-tabela th { font-size: 0.85rem; font-weight: 700; color: var(--texto-2); }
.perfil-tabela td:last-child, .perfil-tabela th:last-child { text-align: right; }
.perfil-lista { margin: 0; padding: 0; list-style: none; }
.perfil-lista li { display: grid; gap: 0.1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(207, 177, 139, 0.12); }
.perfil-lista-titulo { font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .perfil-placa { grid-template-columns: 1fr; }
  .perfil-fatos { grid-template-columns: 1fr; }
}

/* Page compte : le pseudo du forum, sous le code promo. */
.apelido-forum { display: grid; gap: 1rem; margin-top: 1.8rem; }
.apelido-forum h3 { margin: 0; }
.apelido-forum .botao { justify-self: start; }
.apelido-escolha { display: grid; gap: 1rem; }
.apelido-escolha .nota { margin: 0; }
.apelido-atual { margin: 0; font-weight: 700; }