/* Source: public/membre.php */
/* ====== Charte additionnelle locale, non intrusive ====== */
.section { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.h2 { font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.muted { color: #6b7280; font-size: 14px; }

.profile { display: grid; gap: 16px; }
.profile-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.avatar-wrap { width: 96px; height: 96px; }
.avatar {
  width: 96px; height: 96px; border-radius: 999px; object-fit: cover; object-position: center;
  background: rgba(255,255,255,.06); display:block; text-align:center;
}
.avatar.fallback { display:grid; place-items:center; font-size:36px; color:#9ca3af; }
.header-meta { min-width:0; }
.name {
  font-weight: 800; font-size: 22px; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #ffffff; /* pseudo en blanc */
}
.role-badge {
  display: inline-block;
  font-size: 12px; line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  margin-bottom: 6px;
  color:#fff;
}
.since { font-size: 12px; color:#9ca3af; }

/* Inputs utilitaires */
.input { border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color:#fff; border-radius:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Card / media */
.card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); border-radius:16px; }
.media { display:flex; gap:12px; align-items:center; }
.row { display:flex; gap:12px; flex-wrap:wrap; }

/* ====== Bibliothèque de jeux ====== */
.library-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 560px){ .library-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px){ .library-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px){ .library-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px){ .library-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.game-card { display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; }
.cover-wrap { flex:0 0 64px; width:64px; }
.cover {
  width:64px; height:86px; /* approx 3:4 */
  border-radius:8px;
  object-fit: cover; object-position: center;
  display:block;
  background:#f3f4f6;
}
.cover-fallback { display:grid; place-items:center; font-size:24px; color:#9ca3af; }
.gmeta { min-width:0; }
.game-title {
  font-weight: 700; line-height:1.2; margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#ffffff; /* titre en blanc */
}
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.chip {
  display:inline-block; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
}
.chip-time { color:#fff; }
.gdesc { font-size:13px; line-height:1.35; color:#9ca3af; }