/* ============================================================
   LES RÉSISTANTS — Surcharge complète du thème HLStatsX
   ============================================================ */

/* ===== IMPORT DES POLICES ===== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ===== VARIABLES ===== */
:root {
    --bg-void: #08070a;
    --bg-main: #14131a;
    --bg-card: #1a1922;
    --bg-card-hover: #21202c;
    --bg-elevated: #201f2a;
    --border: #2a2935;
    --border-light: #363545;
    --fg: #d5d2de;
    --fg-muted: #8885a0;
    --fg-dim: #55536a;
    --accent: #c9a84c;
    --accent-hover: #dbb85c;
    --accent-dim: #9a7e34;
    --accent-glow: rgba(201, 168, 76, 0.1);
    --accent-glow-strong: rgba(201, 168, 76, 0.2);
    --success: #40a060;
    --danger: #c04040;
    --info: #5080c0;
    --radius: 6px;
    --radius-lg: 10px;
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
}

/* ===== RESET GLOBAL ===== */
* {
    font-family: var(--font-body) !important;
}

body {
    background: var(--bg-void) !important;
    color: var(--fg) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== LIENS ===== */
a {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

a:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}

/* ===== TITRES ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    color: var(--fg) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

h1 { font-size: 24px !important; margin-bottom: 8px !important; }
h2 { font-size: 18px !important; margin-bottom: 6px !important; }
h3 { font-size: 15px !important; margin-bottom: 4px !important; }

/* ===== WRAPPER PRINCIPAL ===== */
.hlstats,
#hlstats,
.wrapper,
.main,
.content,
.page {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== HEADER / BARRE SUPÉRIEURE HLSTATSX ===== */
.header,
.headerBar,
#header,
.topbar,
.head {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 20px !important;
    margin-bottom: 20px !important;
    color: var(--fg) !important;
}

.header h1,
.headerBar h1,
#header h1 {
    font-size: 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.header h1::before,
.headerBar h1::before {
    content: '\f0e4';
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    color: var(--accent) !important;
    font-size: 16px !important;
}

/* ===== ONGLETS / TABS ===== */
.tabs,
.tab-nav,
.nav-tabs,
ul.tabs,
.tabContainer {
    display: flex !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    list-style: none !important;
    border: none !important;
    background: none !important;
}

.tabs li,
.tab-nav li,
.nav-tabs li,
ul.tabs li,
.tab {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

.tabs li a,
.tab-nav li a,
.nav-tabs > li > a,
ul.tabs li a,
.tab a {
    display: block !important;
    padding: 9px 16px !important;
    background: var(--bg-card) !important;
    color: var(--fg-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.tabs li a:hover,
.tab-nav li a:hover,
.nav-tabs > li > a:hover,
ul.tabs li a:hover,
.tab a:hover {
    background: var(--bg-card-hover) !important;
    color: var(--fg) !important;
    text-decoration: none !important;
}

.tabs li.active a,
.tab-nav li.active a,
.nav-tabs > li.active > a,
ul.tabs li.active a,
.tab.active a {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
    border-color: rgba(201, 168, 76, 0.2) !important;
}

/* ===== TABLEAUX ===== */
table {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

table thead {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid var(--border) !important;
}

table th {
    background: none !important;
    color: var(--fg-dim) !important;
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap !important;
}

table td {
    padding: 9px 14px !important;
    border: none !important;
    border-bottom: 1px solid rgba(42, 41, 53, 0.4) !important;
    color: var(--fg) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

table tr:last-child td {
    border-bottom: none !important;
}

table tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Lignes alternées */
table tr.even td,
table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.01) !important;
}

/* ===== CARTES / BOÎTES D'INFO ===== */
.box,
.panel,
.block,
.info-box,
.stat-box,
.data-block,
.sidebar-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    color: var(--fg) !important;
}

.box h3,
.panel h3,
.block h3,
.sidebar-box h3 {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--fg-dim) !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ===== STATS EN TÊTE (players tracked, kills, etc.) ===== */
.summary,
.stats-summary,
.stat-bar,
.overview,
.game-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.summary .stat,
.stats-summary .stat,
.stat-bar .stat-item,
.overview .item {
    flex: 1 !important;
    min-width: 120px !important;
    text-align: center !important;
    padding: 14px 10px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 !important;
}

.summary .stat .value,
.stats-summary .stat .value,
.stat-bar .stat-value,
.overview .item .val,
.stat-num {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--fg) !important;
    line-height: 1 !important;
}

.summary .stat .label,
.stats-summary .stat .label,
.stat-bar .stat-label,
.overview .item .lbl,
.stat-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--fg-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-top: 5px !important;
}

/* Valeurs accentuées dans les stats */
.accent,
.highlight,
.gold {
    color: var(--accent) !important;
}

/* ===== FORMULAIRES / INPUTS ===== */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
select,
textarea {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--fg) !important;
    padding: 8px 12px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    transition: border-color 0.2s !important;
    outline: none !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder {
    color: var(--fg-dim) !important;
}

/* Boutons */
input[type="submit"],
button,
.btn,
.button {
    background: var(--accent) !important;
    color: var(--bg-void) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 8px 18px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

input[type="submit"]:hover,
button:hover,
.btn:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
}

/* ===== GRAPHIQUES / CHARTS ===== */
.chart-container,
.chart,
.graph,
.chart-wrapper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

/* Les canvas/chart images */
.chart-container img,
.chart img,
.graph img {
    border-radius: var(--radius) !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Texte dans les charts (labels des axes) */
.chart-container .label,
.chart .axis-label {
    color: var(--fg-dim) !important;
    font-size: 11px !important;
}

/* ===== PAGINATION ===== */
.pagination,
.paging,
.page-nav,
.nav-pages {
    display: flex !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    list-style: none !important;
}

.pagination li,
.paging a,
.page-nav a,
.nav-pages a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    background: var(--bg-card) !important;
    color: var(--fg-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.pagination li:hover,
.paging a:hover,
.page-nav a:hover {
    background: var(--bg-card-hover) !important;
    color: var(--fg) !important;
    text-decoration: none !important;
}

.pagination li.active,
.paging a.active,
.page-nav a.active,
.nav-pages a.active {
    background: var(--accent-glow-strong) !important;
    color: var(--accent) !important;
    border-color: rgba(201, 168, 76, 0.2) !important;
}

.pagination li.disabled,
.paging a.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

/* ===== FOOTER HLSTATSX ===== */
.footer,
#footer,
.hlstats-footer {
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
    padding: 20px 0 !important;
    margin-top: 30px !important;
    color: var(--fg-dim) !important;
    font-size: 11px !important;
    text-align: center !important;
}

.footer a,
#footer a,
.hlstats-footer a {
    color: var(--fg-dim) !important;
}

.footer a:hover,
#footer a:hover {
    color: var(--accent) !important;
}

/* ===== IMAGES / AVATARS ===== */
img.player-avatar,
img.avatar,
.flag {
    border-radius: 50% !important;
    border: 1px solid var(--border) !important;
}

/* ===== BADGES / RANKS ===== */
.rank-icon,
.skill-badge,
.medal {
    filter: saturate(0.8) !important;
}

/* ===== COULEURS SPÉCIFIQUES ===== */
/* Kills - vert */
.kills,
.kill-count,
.col-kills {
    color: var(--success) !important;
}

/* Deaths - rouge */
.deaths,
.death-count,
.col-deaths {
    color: var(--danger) !important;
}

/* K/D ratio bon */
.kd-good,
.ratio-high {
    color: var(--success) !important;
}

/* K/D ratio mauvais */
.kd-bad,
.ratio-low {
    color: var(--danger) !important;
}

/* Headshots */
.headshot,
.hs-count,
.col-headshots {
    color: var(--accent) !important;
}

/* Skill / Points */
.skill,
.points,
.col-skill {
    color: var(--accent) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
}

/* ===== BARRES DE PROGRESSION ===== */
.bar,
.progress-bar,
.skill-bar {
    background: var(--border) !important;
    border-radius: 3px !important;
    height: 6px !important;
    overflow: hidden !important;
}

.bar-fill,
.progress-fill,
.skill-fill {
    background: linear-gradient(90deg, var(--accent-dim), var(--accent)) !important;
    border-radius: 3px !important;
    height: 100% !important;
}

/* ===== INFO BULLES / TOOLTIPS ===== */
.tooltip,
.tip {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--fg) !important;
    border-radius: var(--radius) !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* ===== ALERTES / MESSAGES ===== */
.message,
.alert,
.notice,
.warning {
    padding: 12px 16px !important;
    border-radius: var(--radius) !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    border: 1px solid !important;
}

.message.success,
.alert.success,
.notice {
    background: rgba(64, 160, 96, 0.08) !important;
    border-color: rgba(64, 160, 96, 0.2) !important;
    color: var(--success) !important;
}

.message.error,
.alert.error,
.alert-danger,
.warning {
    background: rgba(192, 64, 64, 0.08) !important;
    border-color: rgba(192, 64, 64, 0.2) !important;
    color: var(--danger) !important;
}

.message.info,
.alert.info {
    background: var(--accent-glow) !important;
    border-color: rgba(201, 168, 76, 0.15) !important;
    color: var(--accent) !important;
}

/* ===== SECTION INFOS SERVEUR (le bloc du bas) ===== */
.server-info,
.server-details,
.server-block {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.server-info h3,
.server-details h3,
.server-block h3 {
    background: rgba(201, 168, 76, 0.04) !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--accent) !important;
}

.server-info table,
.server-details table,
.server-block table {
    border: none !important;
    border-radius: 0 !important;
}

/* ===== SÉPARATEURS / HR ===== */
hr,
.separator {
    border: none !important;
    border-top: 1px solid var(--border) !important;
    margin: 20px 0 !important;
}

/* ===== LISTES ===== */
ul, ol {
    padding-left: 20px !important;
    color: var(--fg-muted) !important;
}

li {
    margin-bottom: 4px !important;
}

/* ===== CODE / MONOSPACE ===== */
code, pre {
    background: var(--bg-void) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    color: var(--accent) !important;
}

pre {
    padding: 12px 16px !important;
    overflow-x: auto !important;
}

/* ===== SMALL / MISC ===== */
small {
    color: var(--fg-dim) !important;
    font-size: 11px !important;
}

strong, b {
    color: var(--fg) !important;
    font-weight: 600 !important;
}

em, i:not(.fa, .fas, .far, .fab, .fal) {
    color: var(--fg-muted) !important;
}

/* ===== SPAN UTILITAIRES HLSTATSX ===== */
span.clr-green,
span.clr-green,
.font-green { color: var(--success) !important; }
span.clr-red,
span.clr-red,
.font-red { color: var(--danger) !important; }
span.clr-orange,
span.clr-orange,
.font-orange { color: var(--accent) !important; }
span.clr-blue,
span.clr-blue,
.font-blue { color: var(--info) !important; }

/* ===== IMAGES DE FOND / DÉCORATIONS HLSTATSX par défaut ===== */
body::before,
body::after,
.hlstats::before,
.hlstats::after {
    display: none !important;
    content: none !important;
}

/* Supprimer les éventuels fonds d'images par défaut */
.header-bg,
.bg-header,
.top-bg {
    background-image: none !important;
}

/* ===== LAYOUT 2 COLONNES HLSTATSX ===== */
.main-content,
.content-wrapper,
.page-content {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 24px !important;
    align-items: start !important;
}

.main-content .primary,
.content-wrapper .main,
.page-content .left {
    grid-column: 1 !important;
}

.main-content .secondary,
.content-wrapper .sidebar,
.page-content .right {
    grid-column: 2 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .main-content,
    .content-wrapper,
    .page-content {
        grid-template-columns: 1fr !important;
    }

    .summary,
    .stats-summary,
    .stat-bar,
    .overview {
        flex-direction: column !important;
    }

    .tabs,
    .tab-nav,
    ul.tabs {
        flex-wrap: wrap !important;
    }

    table {
        display: block !important;
        overflow-x: auto !important;
    }
}