/* ============================================================
   style.css — StreamNode shared styles
   Chargé en premier sur toutes les pages.
   menu.css, index.css, earn-money.css, premium.css etc.
   n'ont plus besoin de redéfinir ces éléments.
   ============================================================ */

/* ── VARIABLES ───────────────────────────────────────── */
:root {
    --blue:        #3b82f6;
    --blue-dim:    rgba(59, 130, 246, 0.10);
    --blue-glow:   rgba(59, 130, 246, 0.28);
    --indigo:      #6366f1;
    --indigo-dim:  rgba(99, 102, 241, 0.10);

    --bg-base:     #0a0a0f;
    --bg-card:     #0f1117;
    --bg-elevated: #161b27;

    --border:        rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.11);

    --text-primary:   #e8edf2;
    --text-secondary: #64748b;
    --text-muted:     #374151;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    --shadow:      0 4px 20px rgba(0, 0, 0, 0.5);
    --nav-height:  64px;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;
    --transition:   all 0.18s ease;
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── BASE ────────────────────────────────────────────── */
body {
    background:              var(--bg-base);
    color:                   var(--text-primary);
    font-family:             var(--font-body);
    font-size:               15px;
    line-height:             1.6;
    -webkit-font-smoothing:  antialiased;
    min-height:              100vh;
    display:                 flex;
    flex-direction:          column;
}

main { flex: 1; }
section { position: relative; }

/* ── LAYOUT ──────────────────────────────────────────── */
.inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 1.5rem;
}

/* ── TYPOGRAPHY SHARED ───────────────────────────────── */
.tag {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     var(--blue-dim);
    border:         1px solid rgba(59, 130, 246, 0.18);
    border-radius:  4px;
    padding:        4px 12px;
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--blue);
    margin-bottom:  1rem;
}

.section-title {
    font-family:     var(--font-display);
    font-size:       clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight:     700;
    color:           var(--text-primary);
    letter-spacing:  -0.03em;
    margin-bottom:   0.625rem;
    line-height:     1.2;
}

.section-sub {
    color:     var(--text-secondary);
    font-size: 0.95rem;
    max-width: 500px;
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         11px 22px;
    background:      var(--blue);
    color:           #fff;
    border-radius:   var(--radius-sm);
    font-weight:     600;
    font-size:       0.875rem;
    text-decoration: none;
    transition:      var(--transition);
    border:          none;
    cursor:          pointer;
}
.btn-primary:hover {
    background:  #2563eb;
    box-shadow:  0 6px 20px var(--blue-glow);
    transform:   translateY(-1px);
}

.btn-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         11px 22px;
    background:      transparent;
    color:           var(--text-secondary);
    border-radius:   var(--radius-sm);
    font-weight:     500;
    font-size:       0.875rem;
    text-decoration: none;
    transition:      var(--transition);
    border:          1px solid var(--border-strong);
}
.btn-outline:hover {
    color:       var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background:  var(--bg-elevated);
}

.btn-ghost {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         11px 22px;
    background:      var(--bg-elevated);
    color:           var(--text-secondary);
    border-radius:   var(--radius-sm);
    font-weight:     500;
    font-size:       0.875rem;
    text-decoration: none;
    transition:      var(--transition);
    border:          1px solid var(--border);
}
.btn-ghost:hover {
    color:        var(--text-primary);
    border-color: var(--border-strong);
}

/* ── HERO ACTIONS ────────────────────────────────────── */
.hero-actions {
    display:         flex;
    gap:             0.75rem;
    flex-wrap:       wrap;
    justify-content: center;
}

/* ── GRID BACKGROUND (hero motif) ────────────────────── */
.bg-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── UTILITY ─────────────────────────────────────────── */
.text-blue   { color: var(--blue); }
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }

.gradient-text {
    background: linear-gradient(135deg, var(--blue) 30%, var(--indigo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── RESPONSIVE BASE ─────────────────────────────────── */
@media (max-width: 560px) {
    .hero-actions { flex-direction: column; align-items: center; }
}