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

/* ── DESIGN TOKENS ── */
:root {
  --bg-void: #07090d;
  --bg-deep: #0c0f16;
  --bg-card: #10151f;
  --bg-card-hover: #141b28;
  --border: rgba(255,255,255,0.06);
  --border-active: rgba(212,175,55,0.35);
  --gold: #d4af37;
  --gold-light: #f5d060;
  --gold-glow: rgba(212,175,55,0.12);
  --text-primary: #dde3ec;
  --text-secondary: #6b7a90;
  --text-muted: #323d50;
  --green: #00c97a;
  --blue: #4a9eff;
  --purple: #b06bff;
  --red: #ff5a5a;
  --nav-h: 68px;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212,175,55,0.04) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ── NAV ── */
.nav {
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background: rgba(7,9,13,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  height:100%; display:flex; align-items:center; gap:2rem;
}
.nav-logo {
  display:flex; align-items:center; gap:8px;
  font-family:'Syne', sans-serif; font-size:18px; font-weight:700;
  flex-shrink:0; letter-spacing:-0.02em;
}
.logo-mark { color:var(--gold); font-size:20px; }
.logo-text strong { color:var(--gold); }
.nav-links {
  display:flex; list-style:none; gap:4px; margin-left:auto;
}
.nav-link {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:6px;
  font-size:13px; font-weight:500;
  color:var(--text-secondary);
  transition:all .2s;
  border:1px solid transparent;
}
.nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,0.04); }
.nav-link.active {
  color:var(--gold); border-color:var(--border-active);
  background:var(--gold-glow);
}
.nav-icon { font-size:14px; }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text-secondary); border-radius:2px; transition:.2s; }

/* ── HERO (homepage) ── */
.hero {
  position:relative; overflow:hidden;
  padding: calc(var(--nav-h) + 60px) 0 80px;
  text-align:center;
}
.hero-bg {
  position:absolute; inset:0; overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--border-active);
  background:var(--gold-glow); padding:5px 14px; border-radius:20px;
  margin-bottom:28px;
}
.hero-title {
  font-family:'Syne', sans-serif;
  font-size:clamp(32px, 5vw, 62px);
  font-weight:800; line-height:1.1;
  letter-spacing:-.03em; margin-bottom:20px;
}
.gold-text { color:var(--gold); }
.hero-sub {
  color:var(--text-secondary); font-size:15px; line-height:1.8;
  margin-bottom:40px;
}
.hero-stats {
  display:inline-flex; align-items:center; gap:24px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; padding:16px 32px;
}
.stat-item { text-align:center; }
.stat-num { display:block; font-family:'Syne',sans-serif; font-size:22px; font-weight:700; color:var(--gold); }
.stat-label { font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; }
.stat-sep { color:var(--text-muted); font-size:20px; }

/* ── SECTION TITLES ── */
.section-title {
  font-family:'Syne',sans-serif; font-size:20px; font-weight:700;
  letter-spacing:-.02em; margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.section-tag {
  font-family:'DM Mono',monospace; font-size:11px; font-weight:400;
  color:var(--gold); background:var(--gold-glow);
  border:1px solid var(--border-active); border-radius:4px;
  padding:2px 8px; letter-spacing:.06em;
}

/* ── CATEGORIES GRID ── */
.categories-section { padding:60px 0 20px; }
.categories-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.cat-card {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:24px 16px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); text-align:center;
  transition:all .25s; position:relative; overflow:hidden;
}
.cat-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--accent-color, rgba(212,175,55,0.06)) 0%, transparent 60%);
  opacity:0; transition:.25s;
}
.cat-card:hover { border-color:var(--border-active); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.4); }
.cat-card:hover::before { opacity:1; }
.cat-icon { font-size:28px; }
.cat-name { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; }
.cat-count { font-size:11px; color:var(--text-muted); }
.cat-bonus { font-size:12px; color:var(--gold); font-weight:500; }
.cat-arrow { font-size:16px; color:var(--text-muted); margin-top:auto; transition:.2s; }
.cat-card:hover .cat-arrow { color:var(--gold); transform:translateX(4px); }

/* ── OFFRES GRID ── */
.top-section { padding:40px 0 60px; }
.offres-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.offre-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:14px;
  transition:all .2s; position:relative;
}
.offre-card:hover { border-color:var(--border-active); background:var(--bg-card-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
.card-header { display:flex; align-items:flex-start; gap:12px; }
.card-logo { font-size:28px; flex-shrink:0; width:44px; height:44px; display:grid; place-items:center; background:rgba(255,255,255,0.04); border-radius:8px; }
.card-title-wrap { flex:1; min-width:0; }
.card-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; line-height:1.2; }
.card-rating { display:flex; align-items:center; gap:6px; margin-top:4px; }
.stars { color:var(--gold); font-size:11px; letter-spacing:1px; }
.rating-num { font-size:11px; color:var(--text-secondary); }
.card-badge {
  font-size:10px; font-weight:600; padding:3px 8px;
  border-radius:4px; letter-spacing:.06em; text-transform:uppercase;
  flex-shrink:0; align-self:flex-start;
}
.badge-gold { background:rgba(212,175,55,0.15); color:var(--gold); border:1px solid rgba(212,175,55,0.3); }
.badge-green { background:rgba(0,201,122,0.12); color:var(--green); border:1px solid rgba(0,201,122,0.25); }
.badge-blue { background:rgba(74,158,255,0.12); color:var(--blue); border:1px solid rgba(74,158,255,0.25); }
.badge-purple { background:rgba(176,107,255,0.12); color:var(--purple); border:1px solid rgba(176,107,255,0.25); }

.card-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; }

.card-bonus {
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.03) 100%);
  border:1px solid rgba(212,175,55,0.2);
  border-radius:8px; padding:14px 16px;
}
.bonus-amount { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; color:var(--gold); display:block; }
.bonus-detail { font-size:12px; color:var(--text-secondary); margin-top:3px; display:block; }

.card-conditions { font-size:12px; color:var(--text-secondary); }
.cond-label { color:var(--text-muted); }

.card-actions { display:flex; gap:8px; margin-top:auto; }
.btn-detail {
  padding:9px 16px; border-radius:6px; font-size:12px; font-weight:500;
  border:1px solid var(--border); color:var(--text-secondary);
  transition:.2s; flex:1; text-align:center;
}
.btn-detail:hover { border-color:var(--border-active); color:var(--text-primary); }
.btn-parrainage {
  padding:9px 16px; border-radius:6px; font-size:12px; font-weight:600;
  background:var(--gold); color:#07090d; flex:2; text-align:center;
  transition:.2s; letter-spacing:.02em;
}
.btn-parrainage:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:0 4px 16px rgba(212,175,55,.3); }

/* ── TRUST SECTION ── */
.trust-section { padding:40px 0 80px; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
}
.trust-icon { font-size:18px; display:block; margin-bottom:8px; color:var(--gold); }
.trust-item strong { font-family:'Syne',sans-serif; font-size:13px; display:block; margin-bottom:6px; }
.trust-item p { font-size:12px; color:var(--text-secondary); line-height:1.6; }

/* ── PAGE HERO (category pages) ── */
.page-hero {
  padding: calc(var(--nav-h) + 40px) 0 48px;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 0% 50%, var(--hero-accent, rgba(212,175,55,0.05)) 0%, transparent 70%);
}
.page-hero--banque { --hero-accent: rgba(74,158,255,0.07); }
.page-hero--crypto { --hero-accent: rgba(212,175,55,0.07); }
.page-hero--gold { --hero-accent: rgba(212,175,55,0.09); }
.page-hero--assurance { --hero-accent: rgba(0,201,122,0.06); }
.page-hero--broker { --hero-accent: rgba(176,107,255,0.07); }
.page-hero--detail { --hero-accent: rgba(212,175,55,0.06); }

.breadcrumb { font-size:12px; color:var(--text-muted); margin-bottom:16px; display:flex; gap:8px; align-items:center; }
.breadcrumb a:hover { color:var(--gold); }
.page-h1 { font-family:'Syne',sans-serif; font-size:clamp(24px,3.5vw,40px); font-weight:800; letter-spacing:-.03em; margin-bottom:12px; }
.page-intro { font-size:14px; color:var(--text-secondary); max-width:700px; line-height:1.8; }

/* ── PAGE LAYOUT (category) ── */
.page-layout { padding:48px 0 80px; display:flex; flex-direction:column; gap:56px; }
.offres-section {}
.content-section {
  max-width:800px;
  border-top:1px solid var(--border); padding-top:48px;
}

/* ── MARKDOWN CONTENT ── */
.content-section h2 {
  font-family:'Syne',sans-serif; font-size:18px; font-weight:700;
  letter-spacing:-.02em; margin:32px 0 12px; color:var(--text-primary);
}
.content-section h3 {
  font-family:'Syne',sans-serif; font-size:15px; font-weight:600;
  margin:24px 0 10px; color:var(--gold);
}
.content-section p { font-size:13px; color:var(--text-secondary); margin-bottom:14px; line-height:1.8; }
.content-section ul { margin:0 0 16px 20px; }
.content-section li { font-size:13px; color:var(--text-secondary); margin-bottom:6px; line-height:1.7; }
.content-section strong { color:var(--text-primary); }
.md-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:13px; }
.md-table td { padding:10px 14px; border:1px solid var(--border); color:var(--text-secondary); }
.md-table tr:first-child td { color:var(--text-primary); font-weight:600; background:rgba(255,255,255,0.03); }
.md-table tr:hover td { background:rgba(255,255,255,0.02); }

/* ── DETAIL PAGE ── */
.detail-header { display:flex; align-items:center; gap:16px; }
.detail-logo { font-size:48px; width:70px; height:70px; display:grid; place-items:center; background:rgba(255,255,255,0.04); border-radius:12px; border:1px solid var(--border); }
.detail-rating { display:flex; align-items:center; gap:8px; margin-top:6px; }

.detail-layout { padding:48px 0 80px; display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:start; }
.detail-main { display:flex; flex-direction:column; gap:28px; }
.detail-section h2 { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; margin-bottom:12px; }
.detail-section p { font-size:13px; color:var(--text-secondary); line-height:1.8; }

.detail-bonus-box {
  background:linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.02) 100%);
  border:1px solid rgba(212,175,55,0.25); border-radius:12px; padding:28px;
  text-align:center;
}
.detail-bonus-amount { font-family:'Syne',sans-serif; font-size:36px; font-weight:800; color:var(--gold); margin-bottom:8px; }
.detail-bonus-detail { font-size:14px; color:var(--text-secondary); margin-bottom:24px; }
.btn-large { padding:14px 28px; font-size:14px; font-weight:700; border-radius:8px; letter-spacing:.03em; display:inline-block; width:100%; }
.detail-legal { font-size:11px; color:var(--text-muted); margin-top:10px; }

.conditions-box { display:flex; flex-direction:column; gap:14px; }
.cond-row { display:flex; gap:14px; align-items:flex-start; padding:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
.cond-icon { font-size:18px; flex-shrink:0; }
.cond-row strong { font-size:12px; display:block; margin-bottom:4px; }
.cond-row p { font-size:12px; color:var(--text-secondary); }

.detail-disclaimer { background:rgba(255,90,90,0.05); border:1px solid rgba(255,90,90,0.15); border-radius:8px; padding:16px; }
.detail-disclaimer h3 { font-size:13px; margin-bottom:8px; }
.detail-disclaimer p { font-size:12px; color:var(--text-secondary); line-height:1.7; margin:0; }

.detail-sidebar { display:flex; flex-direction:column; gap:0; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; position:sticky; top:calc(var(--nav-h) + 20px); }
.sidebar-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; padding:16px 18px; border-bottom:1px solid var(--border); }
.sidebar-offre { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); transition:.2s; }
.sidebar-offre:last-child { border-bottom:none; }
.sidebar-offre:hover { background:var(--bg-card-hover); }
.sidebar-logo { font-size:20px; width:34px; height:34px; display:grid; place-items:center; background:rgba(255,255,255,0.04); border-radius:6px; flex-shrink:0; }
.sidebar-offre strong { display:block; font-size:12px; }
.sidebar-bonus { font-size:11px; color:var(--gold); }
.sidebar-arrow { color:var(--text-muted); margin-left:auto; transition:.2s; }
.sidebar-offre:hover .sidebar-arrow { color:var(--gold); transform:translateX(3px); }

/* ── FOOTER ── */
.footer { border-top:1px solid var(--border); margin-top:40px; }
.footer-inner {
  max-width:1200px; margin:0 auto; padding:48px 24px 32px;
  display:flex; gap:48px;
}
.footer-brand { flex:1; }
.footer-brand p { font-size:12px; color:var(--text-muted); margin-top:10px; max-width:280px; line-height:1.7; }
.footer-links { display:flex; gap:48px; }
.footer-col { display:flex; flex-direction:column; gap:8px; }
.footer-heading { font-family:'Syne',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:4px; }
.footer-col a { font-size:13px; color:var(--text-secondary); transition:.2s; }
.footer-col a:hover { color:var(--gold); }
.footer-disclaimer { max-width:1200px; margin:0 auto; padding:20px 24px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); line-height:1.7; }
.footer-copy { max-width:1200px; margin:0 auto; padding:14px 24px 24px; font-size:11px; color:var(--text-muted); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .categories-grid { grid-template-columns:repeat(3,1fr); }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .detail-layout { grid-template-columns:1fr; }
  .detail-sidebar { position:static; }
  .footer-inner { flex-direction:column; gap:32px; }
}
@media (max-width:640px) {
  .nav-links { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--bg-deep); border-bottom:1px solid var(--border); flex-direction:column; padding:12px; gap:4px; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; margin-left:auto; }
  .categories-grid { grid-template-columns:repeat(2,1fr); }
  .hero-stats { flex-direction:column; gap:12px; }
  .stat-sep { display:none; }
  .offres-grid { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr; }
  .footer-links { flex-direction:column; gap:24px; }
}