/* ═══════════════════════════════════════════════════════════════
   HACKER THEME OVERRIDE — paul.noirbusson.fr
   Inclure APRÈS style.css sur chaque page principale.
   Ne casse pas les fonctionnalités existantes.
═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --hk-bg:        #060d08;
    --hk-bg2:       #0a1510;
    --hk-bg3:       #0d1c14;
    --hk-border:    #1a3322;
    --hk-border2:   #245038;
    --hk-green:     #00ff88;
    --hk-green2:    #7fff9c;
    --hk-green3:    #c8ffd4;
    --hk-muted:     rgba(0,255,136,.45);
    --hk-text:      #ddfde8;
    --hk-text2:     rgba(200,255,210,.7);
    --hk-glow:      0 0 18px rgba(0,255,136,.18);
    --hk-glow2:     0 0 28px rgba(0,255,136,.28);
}

/* ── Fond global + scanlines ────────────────────────────────── */
body {
    background-color: var(--hk-bg) !important;
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(0,255,136,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0,255,80,.04) 0%, transparent 50%) !important;
    color: var(--hk-text) !important;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0,0,0,.18) 3px,
        rgba(0,0,0,.18) 4px
    );
    pointer-events: none;
    z-index: 9998;
}

/* ── Logo bar ───────────────────────────────────────────────── */
.site-logo-link { color: var(--hk-text) !important; }
.site-logo-link span { color: var(--hk-green) !important; text-shadow: 0 0 10px rgba(0,255,136,.5); }

.site-settings-link {
    background: var(--hk-bg2) !important;
    border-color: var(--hk-border) !important;
    color: var(--hk-green2) !important;
}
.site-settings-link:hover {
    background: var(--hk-bg3) !important;
    border-color: var(--hk-green) !important;
    box-shadow: var(--hk-glow) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    border-color: var(--hk-border) !important;
    background: rgba(0,0,0,.4) !important;
    font-family: 'Courier New', monospace !important;
    position: relative;
}
.site-footer::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-green), transparent);
    opacity: .25;
    margin-bottom: 0;
    position: absolute;
    top: 0; left: 0; right: 0;
}
.site-footer-copy {
    color: #2a4a38 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.78rem !important;
    letter-spacing: .05em !important;
}
.site-footer-copy::before { content: '> '; color: rgba(0,255,136,.2); }
.site-footer-links a {
    color: #2d5040 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.78rem !important;
    border: 1px solid transparent !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    transition: all .2s !important;
}
.site-footer-links a:hover {
    color: var(--hk-green2) !important;
    border-color: var(--hk-border) !important;
    background: rgba(0,255,136,.06) !important;
}

/* ── Cartes et panels ───────────────────────────────────────── */
.home-card, .util-card, .bp-card, .config-card, .settings-card,
.cv-card, .sin-card, .result-card, .texte-card, .rap-card,
.blog-summary, .mentions-box, .passions-card, .mc-join-card,
.escape-card, .meme-card, .stats-card, .contact-card {
    background: var(--hk-bg2) !important;
    border-color: var(--hk-border) !important;
}

.home-card:hover, .util-card:hover, .bp-card:hover, .cv-card:hover,
.rap-card:hover, .passions-card:hover {
    border-color: var(--hk-green) !important;
    box-shadow: var(--hk-glow) !important;
}

.home-card::before, .util-card::before {
    background: radial-gradient(circle at top left, rgba(0,255,136,.12), transparent 60%) !important;
}

/* ── Textes clés ─────────────────────────────────────────────── */
.home-eyebrow, .util-eyebrow, .cv-eyebrow, .eyebrow,
.home-section-label, .contact-eyebrow,
.lang-switcher .active, .lang-btn.active {
    color: var(--hk-green) !important;
}

.home-name span, .util-title span, .cv-name span,
.contact-title span, .mc-title span, .guide-main-title span,
.title span, h1 span, h2 span {
    color: var(--hk-green) !important;
    text-shadow: 0 0 12px rgba(0,255,136,.4) !important;
}

.home-card-arrow, .util-card-arrow { color: var(--hk-muted) !important; }
.home-card:hover .home-card-arrow, .util-card:hover .util-card-arrow {
    color: var(--hk-green) !important;
}

/* Badges */
.cv-badge, .home-badge, .tech-badge, .skill-badge {
    background: rgba(0,255,136,.12) !important;
    border-color: var(--hk-border2) !important;
    color: var(--hk-green2) !important;
}

/* ── Boutons ─────────────────────────────────────────────────── */
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
.form-submit,
a[class*="btn"],
[class*="btn"]:not(.lang-btn):not(.window-btn):not(.tab-btn):not(.nav-btn) {
    background: rgba(0,255,136,.12) !important;
    border-color: var(--hk-border2) !important;
    color: var(--hk-green3) !important;
    box-shadow: 0 4px 16px rgba(0,255,136,.1) !important;
    transition: all .2s !important;
}

button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
.form-submit:hover,
a[class*="btn"]:hover,
[class*="btn"]:hover:not(:disabled):not(.lang-btn):not(.window-btn):not(.tab-btn) {
    background: rgba(0,255,136,.22) !important;
    border-color: var(--hk-green) !important;
    color: #ffffff !important;
    box-shadow: var(--hk-glow) !important;
}

.btn-convert, .btn-go, .btn-roll, .btn-primary,
.btn-spin, .btn-copy, .btn-gen, .form-submit {
    background: rgba(0,255,136,.18) !important;
    border-color: var(--hk-green) !important;
    color: var(--hk-green3) !important;
}
.btn-convert:hover, .btn-go:hover, .btn-roll:hover, .btn-primary:hover,
.btn-spin:hover, .btn-copy:hover, .btn-gen:hover, .form-submit:hover {
    background: rgba(0,255,136,.32) !important;
    box-shadow: var(--hk-glow2) !important;
    color: #fff !important;
}

/* Boutons de langue — discrets */
.lang-btn {
    background: var(--hk-bg2) !important;
    border: 1px solid var(--hk-border) !important;
    color: var(--hk-text2) !important;
}
.lang-btn.active {
    border-color: var(--hk-green) !important;
    color: var(--hk-green3) !important;
    background: rgba(0,255,136,.1) !important;
}

/* ── Inputs, selects, textareas ─────────────────────────────── */
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="url"], input[type="search"],
input[type="tel"], select, textarea {
    background: var(--hk-bg2) !important;
    border: 1px solid var(--hk-border) !important;
    color: var(--hk-text) !important;
    caret-color: var(--hk-green) !important;
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--hk-green) !important;
    box-shadow: 0 0 0 2px rgba(0,255,136,.15) !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(0,255,136,.3) !important;
}
select option {
    background: var(--hk-bg2) !important;
    color: var(--hk-text) !important;
}

/* ── Liens ──────────────────────────────────────────────────── */
a { color: var(--hk-green2) !important; }
a:hover { color: var(--hk-green) !important; }

/* Exceptions : textes blancs lisibles dans les cartes */
.home-card-title, .util-card-title, .cv-section-title,
.rap-name, .passions-title, h1, h2, h3, h4, h5, h6,
.big-val, .big-lbl, .mc-title, .guide-main-title,
.contact-title, .blog-title, .meme-title, .stats-title {
    color: white !important;
}
.home-card-desc, .util-card-desc, .cv-text, .rap-duration,
p:not([class]), li:not([class]) {
    color: var(--hk-text2) !important;
}

/* ── Tableaux ───────────────────────────────────────────────── */
table { border-color: var(--hk-border) !important; }
th {
    background: var(--hk-bg3) !important;
    color: var(--hk-green2) !important;
    border-color: var(--hk-border) !important;
}
td {
    background: var(--hk-bg2) !important;
    color: var(--hk-text2) !important;
    border-color: var(--hk-border) !important;
}
tr:hover td { background: var(--hk-bg3) !important; }

/* ── Onglets (tabs) ─────────────────────────────────────────── */
.tab-btn, .nav-btn {
    background: var(--hk-bg2) !important;
    border-color: var(--hk-border) !important;
    color: var(--hk-text2) !important;
}
.tab-btn.active, .nav-btn.active,
.tab-btn[aria-selected="true"] {
    background: rgba(0,255,136,.14) !important;
    border-color: var(--hk-green) !important;
    color: var(--hk-green3) !important;
}
.tab-btn:hover, .nav-btn:hover {
    border-color: var(--hk-border2) !important;
    color: var(--hk-text) !important;
}

/* ── Barres de progression, sliders ────────────────────────── */
input[type="range"] { accent-color: var(--hk-green) !important; }
progress, .progress-bar { accent-color: var(--hk-green) !important; }
.progress-fill, .bar-fill { background: var(--hk-green) !important; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hk-bg); }
::-webkit-scrollbar-thumb { background: var(--hk-border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hk-green); }

/* ── Sélection de texte ─────────────────────────────────────── */
::selection { background: rgba(0,255,136,.25); color: #fff; }

/* ── Pages spécifiques : CV ─────────────────────────────────── */
.cv-hero { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.cv-hero-avatar { border-color: var(--hk-green) !important; box-shadow: 0 0 16px rgba(0,255,136,.3) !important; }
.cv-section { border-color: var(--hk-border) !important; }
.cv-tag { background: rgba(0,255,136,.1) !important; border-color: var(--hk-border2) !important; color: var(--hk-green2) !important; }
.cv-timeline-dot { background: var(--hk-green) !important; box-shadow: 0 0 8px rgba(0,255,136,.4) !important; }
.cv-timeline-line { background: var(--hk-border) !important; }
.two-col { border-color: var(--hk-border) !important; }

/* ── Pages spécifiques : Stats ──────────────────────────────── */
.big-stats { border-color: var(--hk-border) !important; }
.big-stat { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.big-val { color: var(--hk-green) !important; text-shadow: 0 0 12px rgba(0,255,136,.35) !important; }

/* ── Pages spécifiques : Blog ───────────────────────────────── */
.blog-summary { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.blog-summary-links a {
    background: var(--hk-bg) !important;
    border-color: var(--hk-border) !important;
    color: var(--hk-text2) !important;
}
.blog-summary-links a:hover {
    border-color: var(--hk-green) !important;
    color: var(--hk-green3) !important;
    background: rgba(0,255,136,.08) !important;
}

/* ── Pages spécifiques : Contact ────────────────────────────── */
.contact-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.contact-item { border-color: var(--hk-border) !important; }
.contact-item:hover { border-color: var(--hk-green) !important; background: rgba(0,255,136,.05) !important; }
.contact-icon { color: var(--hk-green) !important; }
.form-input { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; color: var(--hk-text) !important; }
.form-input:focus { border-color: var(--hk-green) !important; }
.form-label { color: var(--hk-text2) !important; }

/* ── Pages spécifiques : Utilitaires ───────────────────────── */
.util-page { background: transparent !important; }
.util-grid .util-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.util-card-icon { color: var(--hk-green) !important; }
.result-box, .output-box, .preview-box {
    background: var(--hk-bg2) !important;
    border-color: var(--hk-border) !important;
    color: var(--hk-text) !important;
}
.sin-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.bits-table th { background: var(--hk-bg3) !important; color: var(--hk-green2) !important; }
.bits-table td { background: var(--hk-bg2) !important; color: var(--hk-text2) !important; }
.wheel-canvas-wrap { border-color: var(--hk-border) !important; }

/* ── Pages spécifiques : Raps ───────────────────────────────── */
.rap-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.rap-header { background: var(--hk-bg3) !important; }
.rap-cover { border-color: var(--hk-border) !important; }
audio::-webkit-media-controls-panel { background: var(--hk-bg2) !important; }

/* ── Pages spécifiques : Passions / Actus / Recommandations ── */
.passions-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.actu-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.reco-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.reco-card:hover { border-color: var(--hk-green) !important; box-shadow: var(--hk-glow) !important; }

/* ── Pages spécifiques : Minecraft ─────────────────────────── */
.mc-join-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.mc-join-btn { background: rgba(0,255,136,.15) !important; border-color: var(--hk-border2) !important; color: var(--hk-green3) !important; }
.mc-join-btn:hover { background: rgba(0,255,136,.28) !important; border-color: var(--hk-green) !important; box-shadow: var(--hk-glow) !important; }
.mc-feature { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.mc-online-dot { box-shadow: 0 0 8px var(--hk-green) !important; }

/* ── Pages spécifiques : Compte / Auth ──────────────────────── */
.auth-card, .compte-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.auth-title span { color: var(--hk-green) !important; }

/* ── Pages spécifiques : Paramètres ────────────────────────── */
.settings-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.settings-btn { background: var(--hk-bg3) !important; border-color: var(--hk-border) !important; color: var(--hk-text2) !important; }
.settings-btn:hover, .settings-btn.active-theme { border-color: var(--hk-green) !important; color: var(--hk-green3) !important; background: rgba(0,255,136,.12) !important; }

/* ── Pages spécifiques : Escape game / Mèmes ───────────────── */
.escape-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.meme-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }

/* ── Admin panel ────────────────────────────────────────────── */
.admin-card { background: var(--hk-bg2) !important; border-color: var(--hk-border) !important; }
.admin-table th { background: var(--hk-bg3) !important; color: var(--hk-green2) !important; }

/* ── Code blocks ────────────────────────────────────────────── */
code, pre, .code-block, .cmd-block {
    background: #000 !important;
    border-color: var(--hk-border) !important;
    color: var(--hk-green2) !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* ── Indicateurs, badges de statut ─────────────────────────── */
.status-online, .badge-green, .online-dot { color: var(--hk-green) !important; }
.status-dot { background: var(--hk-green) !important; box-shadow: 0 0 6px var(--hk-green) !important; }

/* ── Notification toast ─────────────────────────────────────── */
.toast, .notif {
    background: var(--hk-bg3) !important;
    border-color: var(--hk-green) !important;
    color: var(--hk-green3) !important;
    box-shadow: var(--hk-glow) !important;
}

/* ── Compatibilité thèmes Konami (les thèmes gardent la priorité) ── */
body.theme-green,
body.theme-mint,
body.rainbow {
    /* les thèmes du jeu Konami priment sur hacker-theme.css */
}