.card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card p {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.card h4,
.card h5,
.card h6 {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.hero .card h3,
.hero .card h4,
.hero .card h5,
.hero .card h6,
.hero-minecraft .card h3,
.hero-minecraft .card h4,
.hero-minecraft .card h5,
.hero-minecraft .card h6 {
  color: var(--text);
}

/* Base commune boutons */
.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 12px 28px;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease,
    opacity .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.20) !important;
}

/* Bouton principal */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  color: #fff;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

.btn-primary:active {
  background: linear-gradient(135deg, #1e40af, #0e7490) !important;
  color: #fff !important;
}

/* Outline primary */
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.btn-outline-primary:active {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

/* Outline secondary */
.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.btn-outline-secondary:active {
  background: var(--surface-2) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Outline light : utile sur hero sombre */
.btn-outline-light {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.65);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background: #fff;
  border-color: #fff;
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(255,255,255,0.16);
}

.btn-outline-light:active {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.88) !important;
  color: #0f172a !important;
}

/* Bouton navbar Connexion un peu plus premium */
.navbar .btn-primary {
  padding: 10px 22px;
  font-size: 0.95rem;
}

/* Badge populaire */
.badge-pop {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ffbe0b;
  color: #000;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  box-shadow: var(--shadow-sm);
}

.section-subtitle {
  color: var(--text-muted);
  transition: color .2s ease;
}

.section-intro {
  color: var(--text);
  transition: color .2s ease;
}

.border {
  border-color: var(--border-soft) !important;
}

.card ul,
.card li {
  color: var(--text-muted);
}