/* ── join.css — Page "Nous rejoindre" ───────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.join-hero {
  position     : relative;
  overflow     : hidden;
  background   : linear-gradient(135deg, #1a1040 0%, #0f1729 60%, #0a1628 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding      : 5rem 0 4rem;
  text-align   : center;
}

.join-hero-bg {
  position: absolute;
  inset   : 0;
  pointer-events: none;
}

.join-glow {
  position     : absolute;
  border-radius: 50%;
  filter       : blur(80px);
  opacity      : .25;
}
.join-glow-1 {
  width : 500px; height: 500px;
  top   : -150px; left: 50%;
  transform: translateX(-60%);
  background: #5865f2;
}
.join-glow-2 {
  width : 350px; height: 350px;
  bottom: -100px; right: 10%;
  background: #7289da;
  opacity: .15;
}

.join-hero-inner { position: relative; }

/* Icône Discord centrée */
.join-discord-icon {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 90px;
  height         : 90px;
  border-radius  : 50%;
  background     : rgba(88,101,242,.18);
  border         : 1px solid rgba(88,101,242,.35);
  color          : #7289da;
  margin-bottom  : 1.5rem;
}

.join-title {
  font-size  : 2.75rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--text);
}
.join-title-accent {
  background     : linear-gradient(90deg, #5865f2, #7289da);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.join-sub {
  color      : var(--text-muted);
  font-size  : 1.05rem;
  max-width  : 520px;
  margin     : 0 auto 2rem;
  line-height: 1.6;
}

/* Bouton Discord */
.join-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .6rem;
  background     : #5865f2;
  color          : #fff;
  font-weight    : 700;
  font-size      : 1rem;
  padding        : .85rem 1.75rem;
  border-radius  : .6rem;
  border         : none;
  cursor         : pointer;
  text-decoration: none;
  transition     : background .15s, transform .12s, box-shadow .15s;
  box-shadow     : 0 4px 20px rgba(88,101,242,.35);
}
.join-btn:hover {
  background : #4752c4;
  color      : #fff;
  transform  : translateY(-2px);
  box-shadow : 0 6px 28px rgba(88,101,242,.5);
}

.join-hint {
  margin-top: 1rem;
  font-size : .8rem;
  color     : var(--text-muted);
}

/* ── Section features ────────────────────────────────────────────────────── */
.join-features-section { padding: 4rem 0; }

.join-section-title {
  font-size    : 1.75rem;
  font-weight  : 800;
  margin-bottom: 2.5rem;
  color        : var(--text);
}

.join-features-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap                  : 1.25rem;
}

.join-feature-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .75rem;
  padding      : 1.5rem;
  transition   : border-color .2s, transform .2s;
}
.join-feature-card:hover {
  border-color: rgba(88,101,242,.4);
  transform   : translateY(-2px);
}

.join-feature-icon {
  font-size    : 1.75rem;
  margin-bottom: .75rem;
}

.join-feature-card h3 {
  font-size    : 1rem;
  font-weight  : 700;
  margin-bottom: .4rem;
  color        : var(--text);
}

.join-feature-card p {
  font-size  : .875rem;
  color      : var(--text-muted);
  line-height: 1.55;
}

.join-feature-card code {
  background   : rgba(255,255,255,.06);
  border-radius: .25rem;
  padding      : .1em .35em;
  font-size    : .85em;
  color        : var(--accent);
}

/* ── CTA final ──────────────────────────────────────────────────────────── */
.join-cta-section {
  background   : linear-gradient(135deg, rgba(88,101,242,.08) 0%, rgba(88,101,242,.04) 100%);
  border-top   : 1px solid rgba(88,101,242,.12);
  padding      : 4rem 0;
  text-align   : center;
}

.join-cta-inner { position: relative; }

.join-cta-title {
  font-size    : 2rem;
  font-weight  : 800;
  margin-bottom: .75rem;
  color        : var(--text);
}

.join-cta-sub {
  color        : var(--text-muted);
  font-size    : 1rem;
  margin-bottom: 2rem;
}

.join-cta-sub code {
  background   : rgba(255,255,255,.06);
  border-radius: .25rem;
  padding      : .1em .4em;
  color        : var(--accent);
}

.join-cta-actions {
  display    : flex;
  align-items: center;
  justify-content: center;
  gap        : 1rem;
  flex-wrap  : wrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .join-title      { font-size: 2rem; }
  .join-cta-title  { font-size: 1.5rem; }
  .join-cta-actions { flex-direction: column; align-items: stretch; }
  .join-btn        { justify-content: center; }
}