/* ══════════════════════════════════════════
   BIIA CLUB — Design System v2
   Variante 1 : Navy + Doré + Fond clair
   Police : Montserrat
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface2: #F3EDE3;
  --accent: #0F1D3A;
  --cyan: #D4A23A;
  --text: #0F1D3A;
  --green: #2D8C4A;
  --gold: #D4A23A;
  --gold-light: #E8BD5E;
  --gold-dark: #B8882A;
  --navy: #0F1D3A;
  --navy-mid: #1B2D52;
  --navy-light: #2A3F6B;
  --cream: #FAF7F2;
  --cream-warm: #F3EDE3;
  --text-body: #3A4A6B;
  --text-muted: #7A879E;
  --border: #E2DCD2;
  --border-light: #EDE8E0;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── CARD SYSTEM ── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,29,58,0.04);
}
.card:hover {
  box-shadow: 0 4px 16px rgba(15,29,58,0.08);
}
.card2 {
  background: var(--surface2) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
}

/* ── ACCENT / COLORS ── */
.accent { color: var(--navy) !important; }
.cyan { color: var(--gold) !important; }

/* ── BUTTONS ── */
.btn-primary {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
  color: white !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px !important;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 10px rgba(15,29,58,0.2) !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(15,29,58,0.3) !important;
}

.btn-outline {
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  background: transparent !important;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  background: rgba(15,29,58,0.05) !important;
}

/* ── NAVIGATION ── */
.nav-link {
  color: var(--text-muted) !important;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--navy) !important;
  background: rgba(15,29,58,0.06) !important;
}

/* ── INPUT FIELDS ── */
.input-field {
  background: rgba(15,29,58,0.03) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  font-family: 'Montserrat', sans-serif;
}
.input-field:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(15,29,58,0.08);
}
.input-field::placeholder {
  color: var(--text-muted);
}

/* ── STAT NUMBER ── */
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── GLOW TEXT (now elegant shadow) ── */
.glow-text {
  text-shadow: none !important;
}

/* ── TAGS & BADGES ── */
.tag {
  background: rgba(212,162,58,0.12) !important;
  color: var(--gold-dark) !important;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-tag {
  background: rgba(15,29,58,0.08) !important;
  color: var(--navy) !important;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ── PROGRESS BAR ── */
.progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold)) !important;
  transition: width 0.8s ease;
}

/* ── MODAL ── */
.modal-bg {
  background: rgba(15,29,58,0.5) !important;
  backdrop-filter: blur(6px);
}

/* ── ERROR ── */
.error-msg {
  color: #D32F2F;
  font-size: 0.85rem;
  margin-top: 6px;
}

/* ── GRADIENT BORDER ── */
.gradient-border {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, var(--navy), var(--gold)) border-box !important;
  border: 2px solid transparent !important;
}

/* ── NEWS CARD ── */
.news-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s;
}
.news-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(15,29,58,0.06);
}

/* ── CIRCLE SCORE ── */
.circle-score {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  position: relative;
  border: 3px solid var(--border) !important;
}

/* ── ANIMATIONS ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease-out; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── SELECTION ── */
::selection {
  background: rgba(212,162,58,0.25);
  color: var(--navy);
}