/* Minecraft modpacks — lecture aérée, DA Racine. Chargé après synkrone.css. */

html, body {
    background: var(--sk-bg) !important;
    color: var(--sk-text) !important;
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
}

body {
    padding: 28px 24px 56px !important;
}

.shell,
.wrap {
    gap: 20px !important;
    max-width: 1040px !important;
}

.hero,
.panel,
.compare-panel {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-border) !important;
    border-radius: 6px !important;
    padding: 24px 24px 22px !important;
}

.hero h1,
h1,
h2,
.compare-title,
.section-title {
    font-family: "Zilla Slab", Georgia, serif !important;
    color: var(--sk-text) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.hero h1,
h1 {
    font-size: 1.85rem !important;
    margin-bottom: 12px !important;
}

.hero p,
.panel p,
.text-block p,
.legend,
li,
td {
    color: var(--sk-text-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.text-block p {
    margin-bottom: 14px !important;
    max-width: 68ch;
}

.chip {
    background: var(--sk-surface-2) !important;
    border-color: #5c6a6640 !important;
    color: var(--sk-text) !important;
    font-weight: 500 !important;
}

table {
    background: var(--sk-surface) !important;
    min-width: 760px;
}

th {
    background: var(--sk-surface-2) !important;
    color: var(--sk-text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.pack-cell {
    color: var(--sk-text) !important;
}

.btn {
    min-height: 36px !important;
    border-radius: 4px !important;
    border: 1px solid var(--sk-border-strong) !important;
    background: var(--sk-surface) !important;
    color: var(--sk-text) !important;
    font-weight: 600 !important;
}

.btn:hover {
    background: var(--sk-surface-2) !important;
    border-color: var(--sk-text) !important;
}

.btn.primary {
    background: #3f6b52 !important;
    border-color: #3f6b52 !important;
    color: #fff !important;
}

.btn.primary:hover {
    background: #2e5039 !important;
    border-color: #2e5039 !important;
}

.cta-row {
    gap: 12px !important;
    margin-top: 16px !important;
}

.summary {
    gap: 8px !important;
    margin-top: 14px !important;
}

.pack-head img {
    border-radius: 4px !important;
    border-color: var(--sk-border) !important;
}

nav.tabs {
    background: var(--sk-bg) !important;
    border-bottom: 1px solid var(--sk-border) !important;
    padding: 8px 16px !important;
    min-height: 56px !important;
    height: auto !important;
    overflow-y: visible !important;
}

button.tab-btn {
    min-height: 36px !important;
    background: transparent !important;
    color: var(--sk-text-muted) !important;
    border: 0 !important;
    font-weight: 500 !important;
}

button.tab-btn.active {
    color: var(--sk-text) !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 #3f6b52 !important;
    border: 0 !important;
}