/* NightGame — À propos */

.apropos-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  position: relative;
  z-index: 2;
}

.apropos-hero { text-align: center; margin-bottom: 3rem; }
.apropos-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--cyan);
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}
.apropos-title {
  font-family: "Orbitron", sans-serif;
  font-size: 2.6rem;
  margin-bottom: 1rem;
}
.apropos-sub {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.apropos-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}
.feature-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--violet); }
.feature-icon { font-size: 2rem; margin-bottom: 0.6rem; }
.feature-card h3 { font-family: "Orbitron", sans-serif; margin-bottom: 0.5rem; font-size: 1.05rem; }
.feature-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

.apropos-social { text-align: center; }
.apropos-social .section-title { margin-bottom: 0.5rem; }
.apropos-social-sub { color: var(--text-muted); margin-bottom: 2rem; }

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
}
.social-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.social-card:hover {
  transform: translateY(-3px);
  border-color: var(--c);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 26px var(--glow);
}
.social-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.social-icon svg { width: 25px; height: 25px; fill: var(--c); }
.social-info { flex: 1; min-width: 0; }
.social-name { display: block; font-weight: 700; font-size: 1rem; }
.social-handle { display: block; font-size: 0.85rem; color: var(--text-muted); }
.social-arrow { color: var(--text-muted); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.social-card:hover .social-arrow { opacity: 1; transform: translate(2px, -2px); color: var(--c); }

html.mode-phone .apropos-title { font-size: 2rem; }
html.mode-phone .social-grid { grid-template-columns: 1fr; }