/* ============================================================
   MyGameList v3 — Page d'accueil
   ============================================================ */

/* ── Hero ───────────────────────────────────── */
.banner-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  margin: -4px auto 16px;
  line-height: 1.6;
  max-width: 520px;
  text-align: center;
}
.banner-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.banner-stat-block {
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px 16px;
  text-align: center;
  min-width: 110px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-top: 3px solid transparent;
}
.bsb-blue   { border-top-color: #60a5fa; }
.bsb-green  { border-top-color: #34d399; }
.bsb-orange { border-top-color: #fb923c; }
.bsb-red    { border-top-color: #f87171; }
.bsb-purple { border-top-color: #a78bfa; }
.bsb-cyan   { border-top-color: #38bdf8; }
.bsb-yellow { border-top-color: var(--yellow); }
.banner-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--yellow);
}
.banner-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Cartes de prévisualisation dans la bannière */
.games-preview {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  transform: rotate(2deg);
}
.game-preview-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition);
}
.game-preview-card:hover { transform: translateY(-4px) rotate(-1deg); }
.game-preview-cover {
  aspect-ratio: 2/3;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: rgba(255,255,255,0.05);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.game-preview-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(26,58,107,0.85);
  color: var(--white);
  padding: 2px 7px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  display: inline-block;
}
.game-preview-card:nth-child(1) .game-preview-cover { background: rgba(255,255,255,0.05); }
.game-preview-card:nth-child(2) .game-preview-cover { background: rgba(255,255,255,0.05); }
.game-preview-card:nth-child(3) .game-preview-cover { background: rgba(255,255,255,0.05); }
.game-preview-card:nth-child(4) .game-preview-cover { background: rgba(255,255,255,0.05); }
.game-preview-card:nth-child(5) .game-preview-cover { background: rgba(255,255,255,0.05); }
.game-preview-card:nth-child(6) .game-preview-cover { background: rgba(255,255,255,0.05); }
.game-preview-card-platform {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.8);
  padding: 3px 8px;
  border-radius: 4px;
}
.game-preview-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.game-preview-collectors {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.game-preview-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-preview-price {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
}
.game-preview-note {
  font-size: 11px;
  color: var(--yellow);
  font-weight: 600;
  margin-top: 2px;
}

/* ── Section générique ──────────────────────── */
.section { padding: 24px 24px; }
.section-alt { background: var(--white); }
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow-dark);
  margin-bottom: 2px;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--blue);
}

/* ── Game cards ─────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 16px;
}
.game-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
}
.game-card:hover {
  border-color: var(--blue-mid);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.game-cover {
  aspect-ratio: 2/3;
  background: var(--gray-100);
  position: relative;
  overflow: hidden;
}
.game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.game-card:hover .game-cover img { transform: scale(1.04); }
.game-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, var(--blue-light), var(--gray-100));
}
.game-platform-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(26,58,107,0.85);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.game-status-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid white;
}
.status-done     { background: #22C55E; }
.status-playing  { background: var(--yellow-dark); }
.status-wishlist { background: var(--blue-mid); }

.game-info { padding: 11px 13px 13px; }
.game-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.game-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.game-year { font-size: 12px; color: var(--text-muted); }
.game-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--yellow-dark);
}

/* ── Features ────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition);
}
.feature-card:hover {
  border-color: var(--yellow);
  box-shadow: 0 4px 20px rgba(245,197,24,0.12);
  transform: translateY(-2px);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.icon-yellow { background: var(--yellow-light); }
.icon-blue   { background: var(--blue-light); }

.feature-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
}
.feature-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── CTA banner ──────────────────────────────── */
.cta-banner {
  background: var(--yellow);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.5px;
}
.cta-banner p {
  font-size: 15px;
  color: rgba(26,58,107,0.7);
  margin-top: 6px;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  .banner-inner { grid-template-columns: 1fr; }
  .games-preview { display: none; }
  .banner-stats { gap: 20px; }
}
@media (max-width: 600px) {
  .navbar-links { display: none; }
  .navbar-burger { display: flex; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-banner { text-align: center; justify-content: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ── Activity list ───────────────────────────── */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.activity-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
  min-height: 52px;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--blue-pale); }

.activity-avatar-link { flex-shrink: 0; }
.activity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-200);
  background: var(--gray-100);
}

.activity-content { flex: 1; min-width: 0; }
.activity-main {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.activity-user {
  font-weight: 600;
  color: var(--pseudo);
}
.activity-user:hover { text-decoration: underline; }
.activity-verb {
  color: var(--text-muted);
  margin: 0 4px;
  font-weight: 400;
}
.activity-game {
  font-weight: 500;
  color: var(--text);
}
.activity-game:hover { color: var(--blue); text-decoration: underline; }

.activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.activity-console {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  /* fond supprimé — logo direct */
}
.activity-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.badge-new  { background: #DCFCE7; color: #166534; }
.badge-used { background: var(--gray-100); color: var(--text-muted); }

.activity-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-mid);
}
.activity-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.activity-cover-link { flex-shrink: 0; }
.activity-cover {
  width: 44px;
  height: 58px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}
.activity-cover-placeholder {
  width: 44px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: 18px;
}

/* ── Bannière réorganisée ─────────────────── */
.banner { background: var(--blue); padding: 24px 0 18px; color: var(--white); }

.banner-headline {
  text-align: center;
  margin-bottom: 20px;
}
.banner-headline h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -1.5px;
  margin: 6px 0 10px;
  line-height: 1.1;
}
.banner-headline h1 em { color: var(--yellow); font-style: normal; }

.banner-bottom {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 32px;
  align-items: start;
}

/* ── News dans la bannière ────────────────── */
/* ── News bannière homepage ─────────────────────────────────── */
.banner-news {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.banner-news-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--blue);
  padding: 10px 14px 8px;
  border-bottom: 2px solid var(--gray-200);
  background: var(--white);
}

.banner-news-voir-plus {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-mid);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.banner-news-voir-plus:hover { color: var(--blue); text-decoration: underline; }

/* ── Home news items — style liste compacte ─────────────────── */
.home-news-item {
  display: block;
  padding: 10px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition);
  border-left: 3px solid transparent;
}
.home-news-item:last-child { border-bottom: none; }
.home-news-item:hover {
  background: var(--blue-pale);
  border-left-color: var(--blue-mid);
}

/* Ligne principale : titre+auteur à gauche / date+comms à droite */
.home-news-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.home-news-thumb {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
}

.home-news-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.home-news-titre {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-news-item:hover .home-news-titre { text-decoration: underline; }

.home-news-by {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.home-news-by strong {
  font-weight: 600;
  color: var(--pseudo);
}

.home-news-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.home-news-date {
  font-size: 11px;
  color: var(--text-muted);
}

.home-news-comms {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.home-news-extrait {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card {
  display: block;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  color: var(--text);
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.news-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-1px); }
.news-card-header { display:flex; align-items:flex-start; gap:6px; }
.news-card-titre { font-size: 14px; font-weight: 700; color: var(--blue); line-height: 1.3; }
.news-card-comms { margin-left:auto; font-size:11px; color:var(--text-muted); white-space:nowrap; }
.news-card-meta { font-size: 11px; color: rgba(255,255,255,0.6); margin: 3px 0; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.news-card-extrait { font-size: 12px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.news-voir-plus {
  font-size: 12px;
  font-weight: 600;
  color: var(--yellow);
  text-align: right;
  display: block;
  margin-top: 4px;
}
.news-voir-plus:hover { text-decoration: underline; }

/* ── Carousel badges jeux ─────────────────── */
.game-preview-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 900px) {
  .banner-bottom { grid-template-columns: 1fr; }
  .games-preview { display: none; }
}


/* ── Miniature jeu dans activité ─────────────── */
.activity-jaq {
  width: 32px; height: 43px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
}
.activity-jaq-placeholder {
  width: 32px; height: 43px;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; border-radius: 3px;
  flex-shrink: 0;
}

/* ── Harmonisation tailles polices home ──────── */
.section-title { font-size: 22px !important; }
.section-label { font-size: 12px !important; }

/* ── Corrections accueil ─────────────────────── */
.banner-news-title { color: var(--yellow) !important; font-weight: 700; letter-spacing: 1px; }

/* Boutons CTA centrés */
.banner-cta {
  justify-content: center !important;
}

/* Bouton "Se connecter" plus visible */
.banner-cta .btn-ghost {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}
.banner-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.28) !important;
}

/* Sections côte à côte pour inscrits + nouveautés */
.home-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .home-two-cols { grid-template-columns: 1fr; }
}

/* Messagerie */
.navbar-msg-link {
  /* règle intentionnellement vide — présence dans le DOM suffisante */
}

/* ── Ils nous ont rejoints — matrice 2 lignes ───────────────── */
.new-members-wrap {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 16px 20px;
}
.new-members-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px 4px;
}
.new-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text);
  padding: 8px 4px;
  border-radius: var(--radius);
  transition: background var(--transition), transform 0.15s;
}
.new-member-card:hover {
  background: var(--blue-pale);
  transform: translateY(-2px);
}
.new-member-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--gray-100);
  transition: border-color 0.15s;
  display: block;
}
.new-member-card:hover .new-member-avatar { border-color: var(--blue-mid); }
.new-member-pseudo {
  font-size: 13px;
  font-weight: 700;
  color: var(--pseudo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.new-member-xp   { line-height: 1; }
.new-member-jeux { font-size: 12px; font-weight: bold; var(--text-muted); }
.new-member-date { font-size: 11px; color: var(--text-muted); }

/* ── Activity tags (activité récente) ───────────────────────── */
.activity-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--gray-100);
  color: var(--text-muted);
  white-space: nowrap;
}
.activity-tag.tag-new  { background: #22C55E22; color: #16a34a; }
.activity-tag.tag-used { background: #94a3b822; color: var(--text-muted); }

.profile-avatar-square {
  border-radius: 12px !important;
  object-fit: cover;
}

/* ── Home : bande photos horizontale ───────────────────────── */
/* ── Dernières photos ───────────────────────────────────────── */
.home-photo-strip-wrap {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 16px 20px;
}
.home-photo-strip-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}
.home-photo-strip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 100px;
  text-decoration: none;
  color: var(--text);
  gap: 6px;
  padding: 6px 4px;
  border-radius: var(--radius);
  transition: background var(--transition), transform 0.15s;
}
.home-photo-strip-card:hover {
  background: var(--blue-pale);
  transform: translateY(-2px);
}
.home-photo-strip-img-wrap {
  width: 92px; height: 92px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
}
.home-photo-strip-img {
  width: 92px; height: 92px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.home-photo-strip-card:hover .home-photo-strip-img { transform: scale(1.06); }
.home-photo-strip-placeholder {
  width: 92px; height: 92px;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.home-photo-strip-info { width: 100px; text-align: center; }
.home-photo-strip-user {
  font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--pseudo);
}
.home-photo-strip-date { font-size: 12px; color: var(--text-muted); }
.home-photo-strip-desc {
  font-size: 10px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100px;
}

/* ── Gamethèque : blocs console sans espacement ─────────────── */
/* ── News card : image ──────────────────────────────────────── */
.news-card-img {
  width: 100%; height: 70px;
  background-size: cover; background-position: center;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}
.news-card-body { padding: 6px 10px 8px; }
.news-card:not(:has(.news-card-img)) .news-card-header,
.news-card:not(:has(.news-card-img)) .news-card-meta,
.news-card:not(:has(.news-card-img)) .news-card-extrait { font-size: 12px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }

/* ── Derniers avis (home) ────────────────────────────────── */
.home-avis-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.home-avis-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
}
.home-avis-row:last-child { border-bottom: none; }
.home-avis-row:nth-child(odd)  { background: rgba(26,58,107,0.015); }
.home-avis-row:nth-child(even) { background: rgba(245,197,24,0.045); }
.home-avis-row:hover { background: rgba(47,106,177,0.10); }
.home-avis-cover {
  width: 36px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--gray-100);
}
.home-avis-info { flex: 1; min-width: 0; }
.home-avis-jeu {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-avis-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.home-avis-note {
  font-size: 11px;
  font-weight: 800;
  background: var(--yellow);
  color: var(--blue);
  padding: 1px 6px;
  border-radius: 4px;
}
.home-avis-author { font-size: 12px; font-weight: 600; color: var(--pseudo); }
.home-avis-date   { font-size: 12px; color: var(--text-muted); }
.home-avis-extrait {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-avis-comms {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Prix activité — à droite, pleine hauteur */
.activity-prix-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-left: 1px solid var(--gray-100);
  min-width: 80px;
  flex-shrink: 0;
}
.activity-prix-amount {
  font-size: 16px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
}
.activity-prix-magasin {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}
/* Aligner avatar et jaquette verticalement */
.activity-item > a,
.activity-item > a > img,
.activity-item > a > div {
  align-self: center;
}
.activity-content { align-self: center; }
.activity-time { align-self: center; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }

/* Activite recente: ligne compacte, zebra discret, respiration verticale */
.activity-item {
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  min-height: 68px;
  font-size: 14px;
}
.activity-item:nth-child(odd) {
  background: rgba(26,58,107,0.015);
}
.activity-item:nth-child(even) {
  background: rgba(245,197,24,0.045);
}
.activity-item:hover {
  background: rgba(47,106,177,0.10);
}
.activity-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.activity-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.activity-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  line-height: 1.45;
}
.activity-summary .xp-badge,
.activity-summary .user-xp-badge,
.activity-summary .badge-xp {
  flex-shrink: 0;
}
.activity-verb {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.activity-platform {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.activity-platform img {
  display: block;
}
.activity-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
}
.activity-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.activity-badges > .activity-tag.tag-new:first-child,
.activity-badges > .activity-tag.tag-used:first-child {
  display: none;
}
.activity-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.activity-tag-highlight {
  background: rgba(245,197,24,0.18);
  color: #9a6d00;
}
.activity-tag-success {
  background: rgba(34,197,94,0.14);
  color: #15803d;
}
.activity-prix-block {
  display: none;
}
.activity-time {
  align-self: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 10px;
}

@media (max-width: 900px) {
  .activity-item {
    align-items: flex-start;
  }
  .activity-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .activity-time {
    padding-left: 0;
  }
}

/* ── Feature blocks (dans la bannière, fond bleu) ──────── */
.home-features-wrap {
  margin: 36px 0 8px;
}

.home-features-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.banner-features-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--yellow);
  margin-bottom: 4px;
}

.banner-features-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}

.home-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.home-feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  border-top: 3px solid transparent;
  padding: 20px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: box-shadow var(--transition), transform var(--transition);
}
.home-feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Accent couleur par carte */
.home-feature-collection { border-top-color: #60a5fa; }
.home-feature-details    { border-top-color: #34d399; }
.home-feature-community  { border-top-color: #f87171; }
.home-feature-forum      { border-top-color: #fb923c; }
.home-feature-toplistes  { border-top-color: var(--yellow); }
.home-feature-avis       { border-top-color: #a78bfa; }
.home-feature-photos     { border-top-color: #4ade80; }
.home-feature-xp         { border-top-color: #fbbf24; }
.home-feature-legacy     { border-top-color: #38bdf8; }

.home-feature-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.home-feature-body { flex: 1; min-width: 0; }

.home-feature-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 6px;
}

.home-feature-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 10px;
}

.home-feature-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-feature-list li {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  padding-left: 14px;
  position: relative;
}
.home-feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--yellow-dark);
  font-weight: 700;
}

.home-feature-cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-mid);
  text-decoration: none;
}
.home-feature-cta:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .home-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-features-grid { grid-template-columns: 1fr; }
  .banner-features-title { font-size: 16px; }
}

/* ── Banner 2-column layout (non-logged) ─────────────────── */
.banner-twocol {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 28px;
  align-items: center;
  margin: 20px 0 24px;
}
.banner-twocol-left {
  display: flex;
  flex-direction: column;
}
.banner-twocol-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1.5px solid rgba(255,255,255,0.25);
  padding-left: 28px;
}

/* ── Demo game card ──────────────────────────────────────── */
.demo-game-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}
.demo-game-jaq-wrap {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: var(--gray-100);
}
.demo-game-jaq {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.demo-game-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}
.demo-game-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.demo-game-console {
  display: flex;
  align-items: center;
  gap: 5px;
}
.demo-console-logo {
  height: 13px;
  width: auto;
}
.demo-game-console span {
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  background: var(--blue);
  padding: 1px 6px;
  border-radius: 3px;
}
.demo-game-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.demo-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gray-50);
  border-radius: 6px;
  padding: 5px 7px;
  border: 1px solid var(--gray-200);
}
.demo-stat-icon { font-size: 13px; }
.demo-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}
.demo-stat-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
}
.demo-game-actions {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.demo-game-btn {
  display: block;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--blue);
  color: var(--white);
  transition: all var(--transition);
}
.demo-game-btn:hover { background: var(--blue-mid); color: var(--white); }
.demo-game-btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.demo-game-btn-outline:hover { background: var(--blue-pale); color: var(--blue); }
.demo-game-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
  text-align: center;
}

@media (max-width: 860px) {
  .banner-twocol {
    grid-template-columns: 1fr;
  }
  .banner-twocol-right { display: none; }
}