/*
 * style.v2.css -- GENERATED - do not edit by hand.
 * Source: assets/css/parts/*.css (sorted 00-, 01-, ...).
 * Rebuild: bash tools/build-style-v2.sh
 */

/* Anomalya.cc — Design System v2 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg: #050510;
    --bg-2: #0a0a1a;
    --bg-3: #10102a;
    --bg-card: #0d0d20;
    --bg-card-hover: #151535;
    --surface: rgba(255,255,255,0.03);
    --border: rgba(255,255,255,0.06);
    --border-bright: rgba(255,255,255,0.12);
    --text: #f0f0ff;
    --text-2: #8888aa;
    --text-3: #7474a2;
    --accent: #00ffaa;
    --accent-2: #00ccff;
    --accent-glow: rgba(0,255,170,0.08);
    --gradient: linear-gradient(135deg, #00ffaa, #00ccff);
    --gradient-2: linear-gradient(135deg, #00ffaa, #8855ff);
    --danger: #ff3366;
    --warning: #ffaa00;
    --success: #00ff88;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow: 0 8px 40px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 60px rgba(0,255,170,0.08);
    --font: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ═══ LIGHT THEME ═══ */
[data-theme="light"] {
    --bg: #f4f6fb;
    --bg-2: #eaecf4;
    --bg-3: #dde0ee;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f2fa;
    --surface: rgba(0,0,0,0.03);
    --border: rgba(0,0,0,0.09);
    --border-bright: rgba(0,0,0,0.16);
    --text: #111126;
    --text-2: #5a5a7a;
    --text-3: #9898b8;
    --accent: #007a55;
    --accent-2: #006daa;
    --accent-glow: rgba(0,170,100,0.08);
    --gradient: linear-gradient(135deg, #007a55, #006daa);
    --gradient-2: linear-gradient(135deg, #007a55, #6633cc);
    --shadow: 0 4px 24px rgba(0,0,0,0.10);
    --shadow-glow: 0 0 40px rgba(0,122,85,0.06);
}
[data-theme="light"] body::before { opacity: 0.3; filter: invert(1); }
[data-theme="light"] .card { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--border-bright);
}
[data-theme="light"] .navbar { background: rgba(244,246,251,0.92); border-bottom-color: var(--border); }
[data-theme="light"] .user-avatar { filter: brightness(0.85) saturate(1.3); }

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* === GRID BG === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

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

/* === NAVBAR === */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 16px 0;
    background: rgba(5,5,16,0.7);
    backdrop-filter: blur(30px) saturate(1.5);
    border-bottom: 1px solid var(--border);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background: rgba(5,5,16,0.95);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.5px;
}

.logo-icon {
    width: 36px;
    height: 36px;

    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(0,255,170,0.4));
    transition: filter 0.2s;
}
.logo:hover .logo-icon {
    filter: drop-shadow(0 0 12px rgba(0,255,170,0.7));
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a:not(.btn) {
    color: var(--text-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: var(--radius-xs);
    transition: all 0.2s;
}

.nav-links a:not(.btn):hover {
    color: var(--text);
    background: var(--surface);
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient);
    color: #000;
    box-shadow: 0 0 20px rgba(0,255,170,0.15);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,255,170,0.25);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-bright);
}

.btn-outline:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--border-bright);
    background: rgba(255,255,255,0.05);
}

.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-xl { padding: 16px 40px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* === HERO === */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0,255,170,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content h1 {
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.hero-content h1 .gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--text-2);
    max-width: 500px;
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.terminal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow), var(--shadow-glow);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border);
}

.terminal-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}

.terminal-dot:nth-child(1) { background: #ff5f57; }
.terminal-dot:nth-child(2) { background: #febc2e; }
.terminal-dot:nth-child(3) { background: #28c840; }

.terminal-title {
    margin-left: 12px;
    font-size: 0.8rem;
    color: var(--text-3);
    font-family: var(--font-mono);
}

.terminal-body {
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--text-2);
}

.terminal-body .prompt { color: var(--accent); }
.terminal-body .cmd { color: var(--text); }
.terminal-body .output { color: var(--text-3); }
.terminal-body .ok { color: var(--success); }
.terminal-body .blink {
    display: inline-block;
    width: 8px; height: 16px;
    background: var(--accent);
    animation: blink 1s infinite;
    vertical-align: middle;
    margin-left: 2px;
}

/* --- Terminal hero interactif --- */
.terminal--interactive {
    max-width: 520px;
    box-shadow: var(--shadow), var(--shadow-glow), 0 0 0 1px rgba(0, 255, 170, 0.06);
}

.terminal--interactive .terminal-bar {
    justify-content: flex-start;
}

.terminal-live {
    margin-left: auto;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
}

.terminal-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
    animation: terminal-pulse 1.4s ease-in-out infinite;
}

@keyframes terminal-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.terminal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border);
}

.terminal-pill {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

.terminal-pill:hover {
    border-color: rgba(0, 255, 170, 0.35);
    color: var(--text);
}

.terminal-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.terminal-pill.active {
    background: rgba(0, 255, 170, 0.1);
    border-color: rgba(0, 255, 170, 0.45);
    color: var(--accent);
    font-weight: 600;
}

.terminal--interactive .terminal-body {
    padding: 16px 18px 12px;
    min-height: 0;
}

.terminal-screen {
    min-height: 200px;
    font-size: 0.8rem;
    line-height: 1.75;
}

/* Lignes animées au fade (hors mode typewriter géré en JS) */
.terminal-screen .terminal-line {
    margin-bottom: 2px;
}

.terminal-screen .terminal-line--fade {
    opacity: 0;
    transform: translateY(4px);
    animation: terminal-line-in 0.35s ease forwards;
}

.terminal-screen .terminal-line.typewriter-line {
    opacity: 1;
    transform: none;
}

@keyframes terminal-line-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.terminal-screen .terminal-line--cmd .cmd-type {
    color: var(--text);
}

.terminal-screen .terminal-line--cursor {
    margin-top: 10px;
}

.terminal-prompt {
    color: var(--accent);
    font-weight: 600;
    margin-right: 6px;
}

.terminal-screen .output-line {
    color: var(--text-3);
    padding-left: 0.5ch;
}

.terminal-screen .output-line::before {
    content: '→ ';
    color: rgba(0, 255, 170, 0.45);
}

.terminal-screen .output-line .output-text {
    display: inline;
}

.terminal-screen .output-line.output-dim {
    opacity: 0.55;
}

.terminal-screen .ok-line {
    color: var(--success);
    margin-top: 6px;
    font-weight: 500;
}

.terminal-screen .ok-line a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 255, 170, 0.35);
}

.terminal-screen .ok-line a:hover {
    border-bottom-style: solid;
}

.terminal-screen .blink {
    animation: blink 1s infinite;
}

.terminal-progress-wrap {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    margin-top: 14px;
    overflow: hidden;
}

.terminal-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #00ff88);
    transition: width 0.08s linear;
}

.terminal-footer {
    padding: 10px 18px 14px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: flex-end;
}

.btn-terminal-replay {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-terminal-replay:hover {
    border-color: rgba(0, 255, 170, 0.35);
    color: var(--accent);
    background: rgba(0, 255, 170, 0.06);
}

.btn-terminal-replay:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.terminal--interactive.is-busy .terminal-pill {
    pointer-events: none;
    opacity: 0.55;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* === STATS BAR === */
.stats-bar {
    display: flex;
    gap: 40px;
    padding-top: 20px;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === MARQUEE === */
/* ── Trust bar ─────────────────────────────────────────────────────────── */
.trust-bar {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 24px;
}
.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    padding: 4px 20px;
    white-space: nowrap;
}
.trust-icon { font-size: 1rem; }
.trust-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .trust-bar-inner { gap: 0; }
    .trust-item { font-size: .78rem; padding: 4px 12px; }
    .trust-sep { display: none; }
}
@media (max-width: 400px) {
    .trust-bar-inner { justify-content: flex-start; }
    .trust-item { padding: 4px 8px; }
}

.marquee-section {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}

.marquee {
    display: flex;
    overflow: hidden;
    position: relative;
}

.marquee::before,
.marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
}

.marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
}

.marquee-track {
    display: flex;
    gap: 60px;
    animation: scroll-left 120s linear infinite;
    white-space: nowrap;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-3);
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
}

.marquee-item span {
    font-size: 1.3rem;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === SECTION === */
.section {
    padding: 72px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--accent-glow);
    border: 1px solid rgba(0,255,170,0.15);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-2);
    max-width: 500px;
    margin: 0 auto;
}

/* === PLANS === */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    position: relative;
    transition: all 0.35s var(--ease);
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    border-color: rgba(0,255,170,0.3);
    transform: translateY(-6px);
    box-shadow: var(--shadow), 0 0 40px rgba(0,255,170,0.05);
}

.plan-popular {
    border-color: rgba(0,255,170,0.3);
    background: linear-gradient(180deg, rgba(0,255,170,0.03) 0%, var(--bg-card) 100%);
}

.plan-popular::before {
    content: '⭐ Populaire';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: var(--gradient);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
}

.plan-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.plan-desc {
    font-size: 0.85rem;
    color: var(--text-3);
    margin-bottom: 24px;
}

.plan-price {
    margin-bottom: 28px;
}

.plan-price .amount {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -2px;
}

.plan-price .currency {
    font-size: 1.2rem;
    color: var(--text-3);
    font-weight: 500;
}

.plan-price .period {
    font-size: 0.85rem;
    color: var(--text-3);
}

.plan-specs {
    list-style: none;
    margin-bottom: 28px;
    flex-grow: 1;
}

.plan-specs li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-specs li:last-child { border-bottom: none; }

.plan-specs li .icon { font-size: 1.1rem; }

/* === FEATURES === */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 28px;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-4px);
}

.feature-card:hover::before { opacity: 1; }

.feature-icon {
    width: 52px; height: 52px;
    background: var(--accent-glow);
    border: 1px solid rgba(0,255,170,0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.6;
}

/* === TECH STACK === */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.tech-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    transition: all 0.25s var(--ease);
}

.tech-item:hover {
    border-color: var(--border-bright);
    transform: translateY(-3px);
}

.tech-item .icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.tech-item .name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === CTA === */
.cta-section {
    text-align: center;
    padding: 80px 0;
    position: relative;
}

.cta-section::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,255,170,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.cta-section h2 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.cta-section p {
    font-size: 1.1rem;
    color: var(--text-2);
    margin-bottom: 32px;
}
.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cta-sub {
    font-size: .82rem !important;
    color: var(--text-3) !important;
    margin-bottom: 0 !important;
    opacity: .7;
}

/* === FOOTER === */
.footer {
    padding: 40px 0;
    border-top: 1px solid var(--border);
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer p {
    color: var(--text-3);
    font-size: 0.85rem;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: var(--text-3);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--text); }

/* === FORMS === */
.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--font);
    transition: all 0.2s;
}

input.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,255,170,0.1);
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: var(--text-3);
    font-size: 0.8rem;
}

/* === AUTH === */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

.auth-page::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,255,170,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 40px;
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
}

.auth-card h2 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.auth-card .subtitle {
    color: var(--text-3);
    margin-bottom: 32px;
    font-size: 0.95rem;
}

.auth-links {
    text-align: center;
    margin-top: 24px;
    color: var(--text-3);
    font-size: 0.9rem;
}

.auth-links a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

/* === DASHBOARD === */
.dashboard {
    padding: 120px 0 60px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.dashboard-header h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.server-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s var(--ease);
}

.server-card:hover {
    border-color: var(--border-bright);
}

.server-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.server-info p {
    color: var(--text-3);
    font-size: 0.85rem;
}

.status-badge {
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: rgba(0,255,136,0.1);
    color: var(--success);
    border: 1px solid rgba(0,255,136,0.2);
}

.status-pending {
    background: rgba(255,170,0,0.1);
    color: var(--warning);
    border: 1px solid rgba(255,170,0,0.2);
}

.status-suspended {
    background: rgba(255,51,102,0.1);
    color: var(--danger);
    border: 1px solid rgba(255,51,102,0.2);
}

/* === ALERTS === */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-success {
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.15);
    color: var(--success);
}

.alert-error {
    background: rgba(255,51,102,0.06);
    border: 1px solid rgba(255,51,102,0.15);
    color: var(--danger);
}

/* === ANIMATIONS === */
/* Supprimé — évite la page blanche si JS ne charge pas */
.fade-up {
    opacity: 1 !important;
    transform: none !important;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .hero .container { grid-template-columns: 1fr; }
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-content h1 { font-size: 2.8rem; }
}

/* Hide terminal on all mobile/tablet */
@media (max-width: 1200px) {
    .hero-visual {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    body::before { background-size: 30px 30px; }

    .container { padding: 0 16px; }

    /* Nav */
    .navbar { padding: 12px 0; }
    .nav-links a:not(.btn) { display: none; }
    .nav-links { gap: 6px; }

    /* Hero */
    .hero { padding: 100px 0 40px; min-height: auto; }
    .hero::before { display: none; }
    .hero-content h1 { font-size: 2rem; letter-spacing: -1px; line-height: 1.15; }
    .hero-content p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; }
    .hero-actions { flex-direction: column; gap: 10px; }
    .hero-actions .btn { width: 100%; }
    .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .stat-value { font-size: 1.1rem; }
    .stat-label { font-size: 0.7rem; }

    /* Marquee */
    /* ── Trust bar ─────────────────────────────────────────────────────────── */
.trust-bar {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 24px;
}
.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    padding: 4px 20px;
    white-space: nowrap;
}
.trust-icon { font-size: 1rem; }
.trust-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .trust-bar-inner { gap: 0; }
    .trust-item { font-size: .78rem; padding: 4px 12px; }
    .trust-sep { display: none; }
}
@media (max-width: 400px) {
    .trust-bar-inner { justify-content: flex-start; }
    .trust-item { padding: 4px 8px; }
}

.marquee-section { padding: 16px 0; overflow: hidden; }
    .marquee { gap: 30px; animation-duration: 20s; }
    .marquee-item { font-size: 0.75rem; gap: 6px; }
    .marquee-item span { font-size: 1rem; }

    /* Section */
    .section { padding: 32px 0; }
    .section-title { font-size: 1.6rem; letter-spacing: -0.5px; }
    .section-subtitle { font-size: 0.9rem; }
    .section-header { margin-bottom: 32px; }
    .section-badge { font-size: 0.7rem; padding: 4px 10px; }

    /* Plans */
    .plans-grid { grid-template-columns: 1fr; gap: 12px; }
    .plan-card { padding: 20px; }
    .plan-name { font-size: 1rem; }
    .plan-desc { font-size: 0.8rem; margin-bottom: 16px; }
    .plan-price { margin-bottom: 20px; }
    .plan-price .amount { font-size: 2rem; }
    .plan-specs li { font-size: 0.85rem; padding: 8px 0; }

    /* Features */
    .features-grid { grid-template-columns: 1fr; gap: 10px; }
    .feature-card { padding: 20px; }
    .feature-icon { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 14px; border-radius: 10px; }
    .feature-card h3 { font-size: 0.95rem; }
    .feature-card p { font-size: 0.85rem; }

    /* Tech */
    .tech-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .tech-item { padding: 16px; }
    .tech-item .icon { font-size: 1.5rem; }
    .tech-item .name { font-size: 0.7rem; }

    /* CTA */
    .cta-section { padding: 50px 0; }
    .cta-section::before { display: none; }
    .cta-section h2 { font-size: 1.5rem; }
    .cta-section p { font-size: 0.9rem; margin-bottom: 24px; }
    .cta-buttons { flex-direction: column; gap: 10px; }
    .cta-buttons .btn { width: 100%; }

    /* Marquee */
    /* ── Trust bar ─────────────────────────────────────────────────────────── */
.trust-bar {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 24px;
}
.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    padding: 4px 20px;
    white-space: nowrap;
}
.trust-icon { font-size: 1rem; }
.trust-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .trust-bar-inner { gap: 0; }
    .trust-item { font-size: .78rem; padding: 4px 12px; }
    .trust-sep { display: none; }
}
@media (max-width: 400px) {
    .trust-bar-inner { justify-content: flex-start; }
    .trust-item { padding: 4px 8px; }
}

.marquee-section { padding: 24px 0; }
    .marquee-item { font-size: 0.8rem; }

    /* Footer */
    .footer .container { flex-direction: column; gap: 12px; text-align: center; }
    .footer-links { gap: 12px 16px; flex-wrap: wrap; justify-content: center; }

    /* Auth */
    .auth-card { padding: 32px 24px; }
    .auth-card h2 { font-size: 1.5rem; }

    /* Dashboard */
    .dashboard { padding: 80px 0 40px; }
    .dashboard-header { flex-direction: column; gap: 16px; align-items: flex-start; }
    .dashboard-header h1 { font-size: 1.5rem; }
    .server-card { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Order page */
@media (max-width: 900px) {
    .order-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .hero { padding: 90px 0 30px; }
    .hero-content h1 { font-size: 1.6rem; }
    .hero-content p { font-size: 0.9rem; }
    .stats-bar { gap: 12px; }
    .stat-value { font-size: 1rem; }
    .section { padding: 40px 0; }
    .section-title { font-size: 1.4rem; }
    .plan-price .amount { font-size: 1.8rem; }
    .plan-card { padding: 18px; }
    .feature-card { padding: 18px; }
    .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .tech-item { padding: 14px; }
    .cta-section h2 { font-size: 1.3rem; }
}

/* ========== MOBILE NAV BAR (client) ========== */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}

.mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-3);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-xs);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 56px;
}

.mobile-nav-item .mn-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--accent);
}

.mobile-nav-item.active .mn-icon {
    filter: drop-shadow(0 0 6px var(--accent));
}

@media (max-width: 768px) {
    .mobile-nav { display: block; }
    .dash-main { padding-bottom: 80px !important; }
    .admin-main { padding-bottom: 80px !important; }
}

/* ========== ADMIN MOBILE ========== */
/* Layout sidebar + zone principale (ex admin-layout.php inline) */
.admin-layout {
    min-width: 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 65px);
}
.admin-sidebar {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: sticky;
    top: 10px;
    height: calc(100vh - 20px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 10px 0 10px 10px;
}
.admin-brand {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-brand-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--admin-badge-bg, rgba(240, 165, 0, 0.15));
    border: 1px solid var(--admin-badge-border, rgba(240, 165, 0, 0.25));
    color: var(--admin-badge-color, #f0a500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.admin-brand-name {
    font-weight: 700;
    font-size: 0.85rem;
}
.admin-brand-role {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--admin-nav-active, var(--accent));
}
.admin-nav-group {
    padding: 16px 12px 8px;
    font-size: 0.68rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--text-3);
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 500;
    border-radius: var(--radius-xs);
    margin: 1px 8px;
    transition: color 0.2s, background 0.2s;
}
.admin-nav a:hover {
    color: var(--text);
    background: var(--surface);
}
.admin-nav a.active {
    color: var(--admin-nav-active, var(--accent));
    background: var(--admin-nav-active-bg, var(--accent-glow));
}
.admin-nav a .icon {
    width: 18px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}
/* Tableaux admin : scroll horizontal (toutes largeurs / PWA) */
.admin-main {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 28px;
    overflow: auto;
}
.admin-table-wrap {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.admin-table-wrap > .admin-table { min-width: 720px; }
.admin-table-wrap > .admin-table-sm { min-width: 520px; }
/* Pages admin avec <table> sans classe .admin-table (ex. users.php) */
.admin-main .admin-table-wrap > table { min-width: 720px; }

@media (max-width: 900px) {
    .admin-layout { grid-template-columns: 1fr !important; }
    .admin-sidebar { display: none !important; }
    .admin-main { padding: 16px !important; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }

    /* KPIs 2 colonnes */
    .admin-kpi-grid { grid-template-columns: 1fr 1fr !important; }

    /* Quick actions wrap */
    .admin-actions { flex-wrap: wrap; gap: 8px !important; }
    .admin-actions .btn { font-size: .78rem !important; padding: 7px 12px !important; }

    /* Tables → cards sur mobile */
    /* Serveurs en cards sur mobile */
    .srv-mobile-card { display: block !important; }
    .srv-desktop-row { display: none !important; }
}

@media (min-width: 901px) {
    .srv-mobile-card { display: none !important; }
}

/* Admin mobile : menu hamburger + drawer (comme le site client) */
#admin-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.admin-navbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}
.admin-navbar-inner .logo {
    flex: 1 1 auto;
    min-width: 0;
}
/* Hamburger admin : uniquement ≤900px (évite doublon avec sidebar 901–1280) */
body:has(.admin-layout) .hamburger.admin-hamburger {
    display: none !important;
    flex-shrink: 0;
    margin-left: auto;
}
@media (max-width: 900px) {
    body:has(.admin-layout) .hamburger.admin-hamburger {
        display: flex !important;
    }
}
.mobile-drawer-links .admin-drawer-link.admin-drawer-link--active {
    color: var(--accent);
    font-weight: 600;
    background: var(--surface);
}

/* Navbar mobile : cacher les items secondaires */
@media (max-width: 600px) {
    .navbar .nav-links a:not(.btn) { display: none; }
    .navbar .nav-links .btn-ghost { display: none; }
    .navbar .nav-links { gap: 6px; }
}

/* ========== HAMBURGER + MOBILE DRAWER ========== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-xs);
    transition: background .2s;
}
.hamburger:hover { background: var(--surface); }
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all .3s var(--ease);
    transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
    position: fixed;
    top: 65px;
    right: -280px;
    width: 280px;
    height: calc(100dvh - 65px);
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    z-index: 300;
    transition: right .3s var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.mobile-drawer.open { right: 0; }

.mobile-drawer-links { padding: 14px 14px 16px; }
.mobile-drawer-links a {
    display: block;
    padding: 10px 16px;
    color: var(--text-2);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 450;
    letter-spacing: .01em;
    border-radius: var(--radius-xs);
    margin-bottom: 1px;
    transition: background .18s ease, color .18s ease;
}
.mobile-drawer-links a:hover { background: var(--surface); color: var(--text); }

.mobile-drawer-group { margin-bottom: 4px; border-radius: var(--radius-xs); }
.mobile-drawer-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 16px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    border-radius: var(--radius-xs);
    user-select: none;
    letter-spacing: .01em;
}
.mobile-drawer-summary::-webkit-details-marker { display: none; }
.mobile-drawer-group .mobile-drawer-summary::after {
    content: '▾';
    float: right;
    color: var(--text-3);
    font-weight: 700;
    transition: transform .2s ease;
}
.mobile-drawer-group[open] .mobile-drawer-summary::after { transform: rotate(-180deg); }
.mobile-drawer-sub {
    padding: 2px 8px 10px 12px;
    margin: 0 0 6px 10px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-drawer-sub a {
    padding: 7px 12px;
    font-size: .8125rem;
    font-weight: 450;
    color: var(--text-2);
}

/* Mobile drawer — sections (menu restructuré) */
.mobile-drawer-section {
    margin-bottom: 14px;
}
.mobile-drawer-section--staff {
    margin-top: 4px;
}
.mobile-drawer-section-label {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-3);
    padding: 6px 16px 7px;
    font-weight: 600;
}
.mobile-drawer-links .mobile-drawer-section:first-child .mobile-drawer-section-label {
    padding-top: 0;
}
.mobile-drawer-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0 14px;
}
.mobile-drawer-theme {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-2);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 450;
    border-radius: var(--radius-xs);
    margin-bottom: 1px;
    transition: background .18s ease, color .18s ease;
}
.mobile-drawer-theme:hover {
    background: var(--surface);
    color: var(--text);
}
.mobile-drawer-register {
    display: block;
    text-align: center;
    margin: 6px 16px 8px;
}
.mobile-drawer-admin {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-xs);
    text-decoration: none;
    font-weight: 600;
    border-left: 3px solid var(--border);
}
.mobile-drawer-admin--admin {
    color: #f0a500;
    border-left-color: rgba(240, 165, 0, 0.5);
    background: rgba(240, 165, 0, 0.06);
}
.mobile-drawer-admin--support {
    color: #00ccff;
    border-left-color: rgba(0, 204, 255, 0.45);
    background: rgba(0, 204, 255, 0.06);
}
.mobile-drawer-admin--developer {
    color: #a78bfa;
    border-left-color: rgba(167, 139, 250, 0.45);
    background: rgba(167, 139, 250, 0.08);
}
.mobile-drawer-admin:hover {
    filter: brightness(1.08);
}

.dash-mobile-sheet-nav .mobile-drawer-section {
    margin-bottom: 12px;
}
.dash-mobile-sheet-nav .mobile-drawer-section-label {
    padding-left: 20px;
    padding-right: 20px;
}

.dash-mobile-sheet-nav .mobile-drawer-summary {
    padding: 11px 20px;
    font-size: .88rem;
}
.dash-mobile-sheet-nav .mobile-drawer-sub {
    margin-left: 8px;
    margin-bottom: 4px;
}
.dash-mobile-sheet-nav .mobile-drawer-sub a {
    padding: 9px 16px 9px 22px;
    font-size: .84rem;
    color: var(--text-3);
}

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 299;
    backdrop-filter: blur(2px);
}
.mobile-overlay.open { display: block; }

/* Site header : bandeau + navbar empilés normalement (pas fixed séparé) */
#site-header { position: sticky; top: 0; z-index: 100; }
#site-announcement { position: relative; z-index: 101; }
#main-navbar { position: relative !important; top: auto !important; }
.navbar { position: relative !important; }

/* Hero padding dynamique */
.hero { padding-top: 80px !important; }

@media (max-width: 1280px) {
    .hamburger { display: flex !important; }
    .nav-desktop { display: none !important; }
    #site-announcement { font-size: .75rem; padding: 8px 36px 8px 12px; }
}

/* Admin navbar mobile fix */
.admin-navbar-btns .btn-ghost { display: none; }
@media (max-width: 700px) {
    .admin-navbar-btns .btn-ghost { display: none !important; }
}

/* === UPTIME BARS FIX === */
.uptime-bars {
    display: flex;
    gap: 1px;
    align-items: flex-end;
    height: 32px;
    width: 100%;
    overflow-x: auto;
}
.uptime-bar {
    flex: 1 0 3px;
    min-width: 3px;
    max-width: 8px;
    border-radius: 2px;
    min-height: 8px;
    cursor: pointer;
    transition: opacity .15s;
    position: relative;
}

/* Tech section : padding réduit avant la section news */
.tech-section {
    padding-bottom: 30px;
}

/* Section news : padding réduit en haut */
.news-section {
    padding: 24px 0 64px;
    background: var(--bg-2);
}

/* === LEGAL PAGES === */
.legal { max-width: 800px; margin: 0 auto; padding: 100px 24px 60px; }
.legal h1 { font-size: 2rem; font-weight: 700; letter-spacing: -1px; margin-bottom: 8px; }
.legal h2 { color: var(--accent); margin: 32px 0 12px; text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; font-weight: 700; }
.legal p, .legal li { color: var(--text-2); font-size: .95rem; line-height: 1.8; margin-bottom: 8px; }
.legal ul { margin-left: 20px; margin-bottom: 12px; }
.legal .updated { color: var(--text-3); font-size: .82rem; margin-bottom: 40px; }
.legal a { color: var(--accent); text-decoration: none; }
.legal strong { color: var(--text); }

/* === NEWS ARTICLE === */
.article-content { color: var(--text-2); line-height: 1.8; font-size: 1rem; }
.article-content h1, .article-content h2, .article-content h3 { color: var(--text); margin: 24px 0 12px; font-weight: 700; }
.article-content p { margin-bottom: 16px; }
.article-content code { background: var(--bg-2); padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: .88rem; color: var(--accent); }
.article-content pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; margin: 16px 0; }
.article-content a { color: var(--accent); }
.article-content ul, .article-content ol { margin: 12px 0 16px 20px; }
.article-content li { margin-bottom: 6px; }

/* === FAQ === */
.faq-wrap { max-width: 820px; margin: 0 auto; padding: 100px 24px 80px; }
.faq-hero { text-align: center; margin-bottom: 48px; }
.faq-hero h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -1px; margin-bottom: 10px; }
.faq-hero p { color: var(--text-3); font-size: 1rem; }
.faq-search { position: relative; max-width: 480px; margin: 0 auto 40px; }
.faq-search input { width: 100%; padding: 14px 20px 14px 48px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .95rem; font-family: var(--font); transition: border-color .2s; }
.faq-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,255,170,.08); }
.faq-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; pointer-events: none; }
.faq-category { margin-bottom: 32px; }
.faq-cat-title { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); font-weight: 700; margin-bottom: 12px; padding-left: 4px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; transition: border-color .2s; }
.faq-item:hover { border-color: var(--border-bright); }
.faq-item.active { border-color: rgba(0,255,170,.3); }
.faq-question { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; }
.faq-question span { font-weight: 600; font-size: .92rem; color: var(--text); line-height: 1.4; }
.faq-chevron { font-size: .8rem; color: var(--text-3); transition: transform .25s; flex-shrink: 0; }
.faq-item.active .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer-inner { padding: 0 20px 16px; color: var(--text-2); font-size: .9rem; line-height: 1.75; border-top: 1px solid var(--border); padding-top: 14px; }
.faq-cta { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; margin-top: 40px; }
.faq-cta h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.faq-cta p { color: var(--text-3); margin-bottom: 20px; font-size: .9rem; }
.faq-item.hidden { display: none; }
@media (max-width: 600px) { .faq-hero h1 { font-size: 1.6rem; } }

/* === GAMES === */
.game-hero { max-width: 800px; margin: 0 auto; padding: 100px 24px 48px; }
.game-hero h1 { font-size: clamp(1.5rem,4vw,2rem); font-weight: 800; margin-bottom: 16px; letter-spacing: -.02em; }
.game-hero p.lead { color: var(--text-2); line-height: 1.75; margin-bottom: 24px; font-size: 1.05rem; }
.game-list { margin: 0 0 28px; padding-left: 20px; color: var(--text-2); line-height: 1.7; }
.game-list li { margin-bottom: 8px; }
.game-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; }
.cat-wrap { max-width: 1000px; margin: 0 auto; padding: 100px 24px 80px; }
.cat-hero { margin-bottom: 40px; }
.cat-hero h1 { font-size: clamp(1.6rem,4vw,2.1rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.cat-hero p { color: var(--text-2); line-height: 1.75; max-width: 720px; font-size: 1rem; }
.cat-meta { font-size: 0.85rem; color: var(--text-3); margin-top: 16px; }
.cat-nest { margin-bottom: 36px; }
.cat-nest-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); font-weight: 700; margin-bottom: 14px; padding-left: 2px; }
.cat-wrap .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; transition: border-color 0.2s; }
.cat-card:hover { border-color: rgba(0,255,170,0.25); }
.cat-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 10px; line-height: 1.35; }
.cat-alert { background: rgba(255,170,0,0.08); border: 1px solid rgba(255,170,0,0.25); color: var(--text-2); padding: 16px 20px; border-radius: var(--radius); margin-bottom: 28px; font-size: 0.92rem; }
.cat-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }

/* === CLIENT SHARED LAYOUT === */
.dash-wrap { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 65px); align-items: start; padding: 10px 0 10px 10px; gap: 0; min-width: 0; }
.dash-side { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 0; overflow: hidden; }
.user-info { padding: 20px; border-bottom: 1px solid var(--border); }
.user-avatar { width: 44px; height: 44px; border-radius: 10px; background: var(--gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #000; margin-bottom: 10px; }
.user-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.user-email { color: var(--text-3); font-size: 0.75rem; word-break: break-all; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--text-3); text-decoration: none; font-size: 0.85rem; font-weight: 450; letter-spacing: 0.01em; border-left: 3px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.side-nav a:hover { color: var(--text); background: var(--surface); }
.side-nav a.active { color: var(--accent); background: var(--accent-glow); border-left-color: var(--accent); }
.side-nav-group { margin-top: 2px; margin-bottom: 4px; }
.side-nav-group-label {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-3);
    padding: 10px 20px 6px;
    font-weight: 600;
}
.side-nav a.side-nav-sub {
    padding-left: 28px;
    font-size: .8125rem;
    font-weight: 450;
}
.side-nav .sep { height: 1px; background: var(--border); margin: 8px 0; }
.dash-main { padding: 28px; overflow: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
.dash-mnav-trigger { display: none; }
.dash-legal-notice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--radius); border: 1px solid rgba(0, 204, 255, 0.22); background: rgba(0, 204, 255, 0.06); font-size: 0.86rem; line-height: 1.45; color: var(--text-2); }
.dash-legal-notice--hidden { display: none !important; }
.dash-legal-notice-text { margin: 0; flex: 1 1 220px; }
.dash-legal-notice-text a { color: var(--accent); text-decoration: underline; }
.dash-legal-notice .btn { flex-shrink: 0; align-self: center; }

.dash-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(5,5,16,.72); z-index: 180; backdrop-filter: blur(4px); }
.dash-mobile-backdrop.open { display: block; }
.dash-mobile-sheet { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: min(300px,92vw); z-index: 190; background: var(--bg-2); border-right: 1px solid var(--border); box-shadow: 8px 0 32px rgba(0,0,0,.35); overflow-y: auto; padding: 72px 0 24px; transform: translateX(-100%); transition: transform .25s ease; }
.dash-mobile-sheet.open { transform: translateX(0); }
@media (max-width: 768px) {
    .dash-wrap { grid-template-columns: 1fr; }
    .dash-side { display: none; }
    .dash-mnav-trigger { display: block; margin-bottom: 18px; }
    .dash-mobile-sheet { display: block; }
}

/* === CLIENT DASHBOARD === */
.dash-main .stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 28px; }
.stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat-box .s-val { font-size: 1.6rem; font-weight: 700; margin-bottom: 2px; }
.stat-box .s-lbl { color: var(--text-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; }
.dash-main .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.dash-main .card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.dash-main .card-head h3 { font-size: 0.95rem; font-weight: 700; }
.dash-main .srv-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dash-main .srv-row:last-child { border-bottom: none; }
.srv-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.srv-meta-small { color: var(--text-3); font-size: 0.78rem; }
@media (max-width: 768px) { .dash-main .stats-row { grid-template-columns: 1fr 1fr; } }

/* === CLIENT SERVERS === */
.dash-main .srv-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; transition: border-color 0.2s; }
.dash-main .srv-card:hover { border-color: var(--border-bright); }
.dash-main .srv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.srv-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srv-tag { position: relative; display: inline-flex; align-items: center; font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; color: var(--tag-color, #888); border: 1px solid var(--tag-color, #888); letter-spacing: .3px; white-space: nowrap; overflow: hidden; }
.srv-tag::before { content: ''; position: absolute; inset: 0; background: var(--tag-color, #888); opacity: .15; pointer-events: none; }
.srv-subtitle { color: var(--text-3); font-size: 0.8rem; }
.srv-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.srv-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.srv-stat .label { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.srv-stat .value { font-size: 0.95rem; font-weight: 600; }
.srv-stat .bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.srv-stat .bar-fill { height: 100%; border-radius: 2px; background: var(--gradient); }
.srv-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.status-online { color: #00ff88; background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.15); }
.status-offline { color: #ff4466; background: rgba(255,68,102,0.08); border: 1px solid rgba(255,68,102,0.15); }
.status-starting { color: #ffaa00; background: rgba(255,170,0,0.08); border: 1px solid rgba(255,170,0,0.15); }
@media (max-width: 768px) { .srv-stats { grid-template-columns: 1fr 1fr; } }

/* === CLIENT INVOICES === */
.dash-main table { width: 100%; border-collapse: collapse; }
.dash-main th { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.dash-main td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text-2); }
.dash-main tr:last-child td { border-bottom: none; }
.dash-main tr:hover td { background: var(--surface); }

/* Scroll horizontal — tableaux client (mobile / PWA), sans élargir la page */
.dash-table-scroll,
.dash-main .table-wrap {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.dash-table-scroll table,
.dash-main .table-wrap table {
    min-width: 520px;
}

/* Dashboard client — scroll horizontal uniquement dans la carte (ne pas élargir la page) */
.dash-main .grid-2 > .card,
.dash-main > .card {
    min-width: 0;
    max-width: 100%;
}
.dash-main .dash-list-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.dash-main .dash-list-scroll-inner {
    min-width: 520px;
}


/* === CLIENT INVOICE VIEW === */
.invoice-wrap { max-width: 820px; margin: 0 auto; padding: 100px 24px 60px; }
.invoice-back-link { color: var(--text-3); text-decoration: none; font-size: 0.85rem; }
.invoice-back-link:hover { color: var(--text); text-decoration: underline; }
.invoice-actions-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.invoice-doc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.invoice-top { padding: 32px 36px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--border); gap: 20px; flex-wrap: wrap; }
.invoice-logo { font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg,#00ffaa,#00ccff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.invoice-num { text-align: right; }
.invoice-num .num { font-size: 1.2rem; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
.invoice-num .date { color: var(--text-3); font-size: .82rem; margin-top: 4px; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 36px; border-bottom: 1px solid var(--border); }
.party-label { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); margin-bottom: 8px; }
.party-name { font-weight: 700; color: var(--text); font-size: 1rem; margin-bottom: 4px; }
.party-info { color: var(--text-3); font-size: .85rem; line-height: 1.7; }
.invoice-table { padding: 0 36px 20px; }
.inv-head { display: grid; grid-template-columns: 1fr 100px 100px 110px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); }
.inv-row { display: grid; grid-template-columns: 1fr 100px 100px 110px; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); align-items: center; }
.inv-row:last-of-type { border-bottom: none; }
.inv-desc strong { color: var(--text); font-size: .95rem; display: block; }
.inv-desc small { color: var(--text-3); font-size: .78rem; }
.inv-total-block { background: var(--bg-2); border-top: 1px solid var(--border); padding: 20px 36px; }
.total-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .9rem; color: var(--text-2); }
.total-row.grand { font-size: 1.1rem; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; }
.status-paid { background: rgba(0,255,136,.1); color: var(--success); border: 1px solid rgba(0,255,136,.2); padding: 4px 14px; border-radius: 4px; font-size: .75rem; font-weight: 700; }
.status-unpaid { background: rgba(255,170,0,.1); color: var(--warning); border: 1px solid rgba(255,170,0,.2); padding: 4px 14px; border-radius: 4px; font-size: .75rem; font-weight: 700; }
.invoice-footer-note { padding: 20px 36px; text-align: center; color: var(--text-3); font-size: .78rem; line-height: 1.7; }
.invoice-legal { padding: 16px 36px 22px; border-top: 1px solid var(--border); background: var(--bg-2); }
.invoice-legal-p { color: var(--text-3); font-size: 0.72rem; line-height: 1.65; margin: 0 0 10px; text-align: left; }
.invoice-legal-p:last-child { margin-bottom: 0; }
.invoice-legal-strong { color: var(--text-2); font-weight: 600; }
.invoice-legal a, .invoice-parties .party-info a { color: var(--accent); text-decoration: underline; }
@media print {
    .invoice-legal { background: #f8f8fc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media print {
    body { background: #fff !important; color: #000 !important; }
    .invoice-doc { border: none; }
    .invoice-logo { color: #000 !important; -webkit-text-fill-color: #000 !important; }
    .no-print { display: none !important; }
}
@media (max-width: 600px) {
    .invoice-top { flex-direction: column; }
    .invoice-parties { grid-template-columns: 1fr; }
    .invoice-num { text-align: left; }
    .inv-head, .inv-row { grid-template-columns: 1fr 80px 80px; }
    .inv-head > *:nth-child(3), .inv-row > *:nth-child(3) { display: none; }
}

/* === CLIENT BILLING === */
.billing-wrap { max-width: 900px; margin: 0 auto; padding: 100px 24px 80px; min-width: 0; box-sizing: border-box; }
.section-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.billing-wrap .card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.billing-wrap .card-head h2 { font-size: .95rem; font-weight: 700; }
.billing-card-hint { font-size: .78rem; font-weight: 500; color: var(--text-3); }
#factures { scroll-margin-top: 96px; }
.billing-wrap .srv-row { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.billing-wrap .srv-row:last-child { border-bottom: none; }
.days-bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; width: 150px; }
.days-fill { height: 100%; border-radius: 2px; background: var(--gradient); }
.billing-wrap table { width: 100%; border-collapse: collapse; }
.billing-wrap th { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.billing-wrap td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text-2); }
.billing-wrap tr:last-child td { border-bottom: none; }
.billing-wrap tr:hover td { background: var(--surface); }

/* === CLIENT SECURITY === */
.sec-wrap { max-width: 860px; margin: 0 auto; padding: 100px 24px 80px; }
.sec-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.sec-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.sec-card-head h2 { font-size: .95rem; font-weight: 700; }
.sec-card-body { padding: 20px; }
.method-status { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.dot-on { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.dot-off { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.backup-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 16px 0; }
.backup-code { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px; text-align: center; font-family: var(--font-mono); font-size: .88rem; font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.fido-item { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fido-item:last-child { border-bottom: none; }
@media (max-width: 768px) { .backup-grid { grid-template-columns: repeat(2,1fr); } }

/* === SUPPORT === */
.support-wrap { max-width: 860px; margin: 0 auto; padding: 100px 24px 80px; }
.support-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.support-hero-text h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.support-hero-text p { color: var(--text-3); font-size: .88rem; }
.stats-row { display: flex; gap: 20px; margin-top: 16px; }
.stat-pill { background: var(--bg-2); border: 1px solid var(--border); border-radius: 100px; padding: 6px 16px; font-size: .82rem; color: var(--text-2); }
.stat-pill strong { color: var(--accent); }
.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; text-decoration: none; overflow: hidden; transition: all .2s; display: block; }
.ticket-item:hover { border-color: rgba(0,255,170,.3); transform: translateX(3px); }
.ticket-item-inner { padding: 16px 20px; display: flex; gap: 14px; align-items: center; }
.ticket-cat-icon { width: 42px; height: 42px; background: var(--accent-glow); border: 1px solid rgba(0,255,170,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ticket-body { flex: 1; min-width: 0; }
.ticket-ref { font-size: .68rem; color: var(--text-3); font-family: var(--font-mono); margin-bottom: 2px; }
.ticket-subject { font-weight: 700; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-meta { font-size: .75rem; color: var(--text-3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ticket-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.new-badge { background: var(--accent); color: #000; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-btn { padding: 6px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-3); transition: all .2s; text-decoration: none; }
.filter-btn.active, .filter-btn:hover { background: var(--accent-glow); border-color: rgba(0,255,170,.3); color: var(--accent); }
.empty { text-align: center; padding: 52px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.support-wrap .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.svc-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 8px; }
.svc-cat-btn { background: var(--bg-2); border: 2px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; transition: all .2s; }
.svc-cat-btn:hover, .svc-cat-btn.selected { border-color: var(--accent); background: var(--accent-glow); }
.cat-icon { font-size: 1.5rem; margin-bottom: 6px; }
.cat-name { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.ticket-wrap { max-width: 820px; margin: 0 auto; padding: 100px 24px 80px; }
.ticket-header { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.ticket-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.ticket-meta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.meta-pill { background: var(--bg-2); border: 1px solid var(--border); padding: 4px 12px; border-radius: 100px; font-size: .75rem; color: var(--text-2); }
.messages { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.msg-bubble { border-radius: var(--radius); overflow: hidden; }
.msg-bubble.user { background: var(--bg-card); border: 1px solid var(--border); }
.msg-bubble.staff { background: rgba(0,204,255,0.04); border: 1px solid rgba(0,204,255,0.2); }
.msg-top { padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; justify-content: space-between; align-items: center; }
.msg-author { font-size: .82rem; font-weight: 700; }
.msg-date { font-size: .72rem; color: var(--text-3); }
.msg-content { padding: 14px 18px; color: var(--text-2); font-size: .9rem; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.staff-tag { background: rgba(0,204,255,.12); color: #00ccff; border: 1px solid rgba(0,204,255,.2); padding: 1px 8px; border-radius: 3px; font-size: .65rem; font-weight: 700; margin-left: 6px; }
.reply-area { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.reply-area-header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .9rem; }
.reply-area-body { padding: 18px; }
textarea.reply-input { width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; resize: vertical; font-family: var(--font); line-height: 1.6; transition: border-color .2s; }
textarea.reply-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,255,170,.08); }
.reply-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.rating-stars { display: flex; gap: 4px; }
.star { font-size: 1.5rem; cursor: pointer; opacity: .4; transition: all .15s; }
.star.active, .star:hover { opacity: 1; }
.closed-banner { background: rgba(85,85,119,.1); border: 1px solid rgba(85,85,119,.2); border-radius: var(--radius-sm); padding: 14px 18px; text-align: center; margin-bottom: 16px; }
@media (max-width: 600px) {
    .support-hero { flex-direction: column; }
    .ticket-item-inner { flex-wrap: wrap; }
    .ticket-right { flex-direction: row; align-items: center; }
    .ticket-meta-row { gap: 8px; }
    .reply-actions { flex-direction: column; align-items: flex-start; }
}

/* === STATUS PAGE === */
.status-page {
    max-width: 1000px; margin: 0 auto; padding: 80px 20px 100px;
    font-family: 'Space Grotesk', sans-serif; position: relative;
}
.status-page::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px; z-index: -1;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.status-hero { display: flex; align-items: center; justify-content: space-between; padding: 40px; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, rgba(20,20,35,0.8) 0%, rgba(10,10,20,0.9) 100%); border: 1px solid var(--border); border-bottom: none; position: relative; overflow: hidden; }
.status-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--status-color); box-shadow: 0 0 20px var(--status-color); }
.hero-main { display: flex; align-items: center; gap: 24px; }
.status-orb { width: 32px; height: 32px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 40px var(--status-color); animation: pulse-orb 2.5s infinite ease-in-out; border: 4px solid rgba(255,255,255,0.1); }
@keyframes pulse-orb {
    0%   { transform: scale(0.95); box-shadow: 0 0 20px var(--status-color); }
    50%  { transform: scale(1.05); box-shadow: 0 0 50px var(--status-color); }
    100% { transform: scale(0.95); box-shadow: 0 0 20px var(--status-color); }
}
.hero-text h1 { font-size: 2.2rem; font-weight: 700; margin: 0 0 4px; color: #fff; letter-spacing: -0.5px; }
.hero-text p { font-size: 1.1rem; color: var(--text-2); margin: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 0 0 20px 20px; overflow: hidden; margin-bottom: 60px; }
.kpi-card { background: rgba(15,15,30,0.9); padding: 24px; text-align: center; }
.kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.kpi-label { font-size: 0.8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.cat-title { font-size: 1.2rem; font-weight: 600; margin: 0 0 24px; color: #fff; display: flex; align-items: center; gap: 16px; }
.cat-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border) 0%, transparent 100%); }
.status-page .srv-card { background: rgba(20,20,35,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 16px; transition: all 0.3s ease; position: relative; overflow: visible; }
.status-page .srv-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(20,20,35,0.7); }
.status-page .srv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.srv-info h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; color: #fff; display: flex; align-items: center; gap: 10px; }
.srv-meta { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.srv-meta span { display: flex; align-items: center; gap: 4px; }
.srv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.srv-ping { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 8px; color: var(--text-2); }
.srv-ping.offline { color: var(--text-3); opacity: 0.6; }
.srv-ping svg { width: 14px; height: 14px; opacity: 0.7; }
.srv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.5px; }
.srv-badge svg { width: 14px; height: 14px; }
.badge-operational { color: #00ffaa; background: rgba(0,255,170,0.05); border-color: rgba(0,255,170,0.15); }
.badge-degraded { color: #ffaa00; background: rgba(255,170,0,0.05); border-color: rgba(255,170,0,0.15); }
.badge-outage { color: #ff4466; background: rgba(255,68,102,0.05); border-color: rgba(255,68,102,0.15); }
.badge-maintenance { color: #00ccff; background: rgba(0,204,255,0.05); border-color: rgba(0,204,255,0.15); }
.uptime-chart { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 4px; width: 100%; box-sizing: border-box; }
.u-bar { flex: 1; min-width: 4px; border-radius: 2px; transition: all 0.2s; cursor: pointer; position: relative; }
.u-bar:hover { opacity: 0.8; transform: scaleY(1.1); transform-origin: bottom; }
.uptime-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-3); font-weight: 500; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.05); }
.uptime-val { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; }
.alert-card { background: rgba(20,20,35,0.6); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.alert-card.major { border-left-color: #ffaa00; }
.alert-card.critical { border-left-color: #ff4466; }
.alert-card.maintenance { border-left-color: #00ccff; }
.alert-card.resolved { border-left-color: #00ffaa; opacity: 0.7; background: rgba(0,0,0,0.2); }
.alert-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.alert-title { font-size: 1.15rem; font-weight: 600; color: #fff; margin: 0; }
.alert-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 4px 10px; background: rgba(255,255,255,0.05); border-radius: 6px; }
.alert-body { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
.alert-date { font-size: 0.85rem; color: var(--text-3); font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; gap: 8px; }
.status-legend { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 60px; padding: 24px; background: rgba(0,0,0,0.2); border-radius: 16px; border: 1px solid var(--border); justify-content: center; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-2); font-family: 'JetBrains Mono', monospace; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.uptime-period-btns { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.uptime-period-btn { font-size: 0.68rem; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-3); cursor: pointer; font-family: 'JetBrains Mono', monospace; transition: all 0.15s; }
.uptime-period-btn.active, .uptime-period-btn:hover { border-color: var(--accent); background: rgba(0,255,170,0.1); color: var(--accent); }
.cat-filter-bar { display: flex; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; }
.cat-filter-btn { font-size: 0.82rem; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-3); cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-weight: 600; transition: all 0.15s; }
.cat-filter-btn.active, .cat-filter-btn:hover { border-color: var(--accent); background: rgba(0,255,170,0.08); color: var(--accent); }
.incident-anchor-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-3); text-decoration: none; transition: all 0.15s; cursor: pointer; }
.incident-anchor-btn:hover, .incident-anchor-btn.copied { border-color: rgba(0,255,170,0.4); color: var(--accent); background: rgba(0,255,170,0.08); }
.cat-section-wrap.hidden { display: none; }
#bar-tooltip { position: fixed; background: rgba(10,10,25,0.95); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 0.82rem; font-family: 'JetBrains Mono', monospace; pointer-events: none; z-index: 9999; display: none; max-width: 200px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); line-height: 1.4; white-space: pre; }
@media (max-width: 768px) {
    .status-hero { flex-direction: column; text-align: center; gap: 20px; padding: 30px 20px; }
    .hero-main { flex-direction: column; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .status-page .srv-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .srv-right { width: 100%; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
    .status-page .srv-card { padding: 16px; }
    .uptime-chart { -webkit-overflow-scrolling: touch; }
    .u-bar { min-width: 3px; flex: 1 0 3px; }
}

/* =============================================
   HOMEPAGE — COMMENT ÇA MARCHE
   ============================================= */
/* ── How section — toggle gaming/VPS ──────────────────────────────────── */
.how-toggle {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.how-toggle-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 8px 20px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    transition: all .2s;
}
.how-toggle-btn:hover { border-color: var(--accent); color: var(--text); }
.how-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }
@media (max-width: 480px) {
    .how-toggle { flex-direction: column; align-items: stretch; padding: 0 24px; }
    .how-toggle-btn { text-align: center; }
}

.how-section {
    padding: 64px 0;
    background: var(--bg);
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    margin-top: 48px;
}
.how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 32px;
    position: relative;
}
.how-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -12px;
    top: 28px;
    font-size: 1.4rem;
    color: var(--accent);
    opacity: .5;
}
.how-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,255,170,.15), rgba(0,204,255,.1));
    border: 1px solid rgba(0,255,170,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.how-step h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.how-step p {
    font-size: .83rem;
    color: var(--text-3);
    line-height: 1.6;
}
@media (max-width: 700px) {
    .how-grid { grid-template-columns: 1fr; gap: 32px; }
    .how-step:not(:last-child)::after { content: '↓'; right: auto; top: auto; bottom: -20px; left: 50%; transform: translateX(-50%); }
    .how-step { padding: 0 16px; }
}

/* =============================================
   HOMEPAGE — PLAN "RECOMMANDÉ POUR"
   ============================================= */
.plan-for {
    font-size: .75rem;
    color: var(--text-3);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 10px;
    margin-bottom: 20px;
    line-height: 1.4;
}
.plan-popular .plan-for {
    background: rgba(0,255,170,.06);
    border-color: rgba(0,255,170,.2);
}

/* =============================================
   HOMEPAGE — TÉMOIGNAGES
   ============================================= */
.testimonials-section {
    padding: 64px 0;
    background: var(--bg);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 48px;
}
.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color .25s, transform .25s;
}
.testimonial-card:hover {
    border-color: rgba(0,255,170,.25);
    transform: translateY(-2px);
}
.testimonial-stars {
    color: #ffaa00;
    font-size: .9rem;
    letter-spacing: 2px;
}
.testimonial-text {
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.7;
    flex: 1;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,255,170,.2), rgba(0,204,255,.15));
    border: 1px solid rgba(0,255,170,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.testimonial-name {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text);
}
.testimonial-role {
    font-size: .75rem;
    color: var(--text-3);
}

/* =============================================
   HOMEPAGE — NEWS CARDS
   ============================================= */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.news-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-top: 3px solid var(--accent);
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    transition-delay: var(--stagger, 0s);
}
.news-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,255,170,.08);
}
.news-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.news-card-date {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.news-card-badge {
    background: rgba(0,255,170,.15);
    color: var(--accent);
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3;
}
.news-card-excerpt {
    font-size: .85rem;
    color: var(--text-3);
    line-height: 1.5;
    flex: 1;
}
.news-card-cta {
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    margin-top: 14px;
}

/* =============================================
   HOMEPAGE — MINI FAQ
   ============================================= */
.home-faq-section {
    padding: 64px 0;
    background: var(--bg-2);
}
.home-faq-list {
    max-width: 720px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .2s;
}
.home-faq-item:hover { border-color: var(--border-bright); }
.home-faq-item.active { border-color: rgba(0,255,170,.3); }
.home-faq-q {
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    user-select: none;
    font-weight: 600;
    font-size: .92rem;
    color: var(--text);
}
.home-faq-chevron {
    font-size: .8rem;
    color: var(--text-3);
    transition: transform .25s;
    flex-shrink: 0;
}
.home-faq-item.active .home-faq-chevron { transform: rotate(180deg); color: var(--accent); }
.home-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.home-faq-a-inner {
    padding: 0 20px 16px;
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.75;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
.home-faq-a-inner a { color: var(--accent); text-decoration: none; }

/* =============================================
   HOMEPAGE — FORMULAIRE AVIS CLIENTS
   ============================================= */
.review-form-wrap {
    max-width: 580px;
    margin: 40px auto 0;
}
.review-login-hint {
    text-align: center;
    color: var(--text-3);
    font-size: .88rem;
}
.review-login-hint a { color: var(--accent); text-decoration: none; }
.review-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.review-form-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    margin-bottom: 16px;
}
.review-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Star picker — ordre inversé CSS (5 à gauche, 1 à droite) */
.review-star-picker {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.review-star-picker input[type="radio"] {
    display: none;
}
.review-star-picker label {
    font-size: 1.8rem;
    color: var(--border);
    cursor: pointer;
    transition: color .15s, transform .15s;
    line-height: 1;
}
.review-star-picker input:checked ~ label,
.review-star-picker label:hover,
.review-star-picker label:hover ~ label {
    color: #ffaa00;
    transform: scale(1.15);
}

/* =============================================
   CHANGELOG
   ============================================= */
.changelog-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 100px 24px 80px;
}
.changelog-hero {
    text-align: center;
    margin-bottom: 60px;
}
.changelog-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 12px 0 10px;
}
.changelog-hero p {
    color: var(--text-3);
    font-size: 1rem;
}
.changelog-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.changelog-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    opacity: .25;
}
.cl-entry {
    display: flex;
    gap: 28px;
    padding-bottom: 40px;
    position: relative;
}
.cl-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    flex-shrink: 0;
    margin-top: 4px;
    box-shadow: 0 0 12px rgba(0,255,170,.15);
    position: relative;
    z-index: 1;
}
.cl-card {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s;
}
.cl-card:hover {
    border-color: rgba(0,255,170,.2);
}
.cl-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.cl-version {
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--accent);
}
.cl-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text);
    flex: 1;
}
.cl-date {
    font-size: .75rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cl-list {
    list-style: none;
    padding: 16px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.5;
}
.cl-tag {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid;
    margin-top: 1px;
    white-space: nowrap;
}
.cl-text {
    color: var(--text-2);
}
@media (max-width: 600px) {
    .changelog-timeline::before { display: none; }
    .cl-entry { gap: 0; }
    .cl-marker { display: none; }
    .changelog-hero h1 { font-size: 1.6rem; }
    .cl-header { gap: 8px; }
}

/* =============================================
   V1.4.0 — COMPOSANTS PROFIL
   ============================================= */
.dash-page-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }

/* Résumé du compte — grille stats */
.profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 28px; }
.profile-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.profile-stat-val { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.profile-stat-val--neutral { color: var(--text-2); }
.profile-stat-val--warning { color: var(--warning); }
.profile-stat-unit { font-size: .85rem; }
.profile-stat-lbl { font-size: .75rem; color: var(--text-3); margin-top: 4px; }

/* Sections de profil */
.profile-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; max-width: 560px; margin-bottom: 24px; }
.profile-section-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; }
.profile-section-title-sm { font-size: .95rem; font-weight: 600; margin-bottom: 12px; color: var(--text-2); }
.profile-hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.profile-hint { color: var(--text-3); font-size: .82rem; margin-bottom: 12px; }
.profile-hint--compact { font-size: .78rem; line-height: 1.45; margin-top: -4px; margin-bottom: 18px; opacity: .95; }
.profile-hint-lg { color: var(--text-3); font-size: .82rem; margin-bottom: 16px; }
.form-hint { font-size: .75rem; color: var(--text-3); margin-top: 6px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.label-optional { color: var(--text-3); font-weight: 400; }
.input-disabled { opacity: .5; }

/* Checkboxes notifications */
.notif-label { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; cursor: pointer; font-size: .9rem; }
.notif-label-last { margin-bottom: 20px; }
.notif-check { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

/* Section RGPD */
.gdpr-section { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--border); max-width: 560px; }
.gdpr-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.gdpr-desc { color: var(--text-3); font-size: .9rem; margin-bottom: 20px; line-height: 1.6; }
.gdpr-desc a { color: var(--accent); }
.gdpr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.gdpr-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.gdpr-card-danger { background: var(--bg-2); border: 1px solid rgba(255,68,102,.3); border-radius: 12px; padding: 20px; }
.gdpr-card-title { font-size: .95rem; font-weight: 700; margin-bottom: 8px; }
.gdpr-card-title-danger { font-size: .95rem; font-weight: 700; margin-bottom: 8px; color: #ff4466; }
.gdpr-card-desc { color: var(--text-3); font-size: .82rem; margin-bottom: 16px; line-height: 1.5; }
.btn-danger { background: rgba(255,68,102,.1); border: 1px solid rgba(255,68,102,.3); color: #ff4466; }
.btn-danger-solid { background: #ff4466; color: #fff; font-weight: 700; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 10000; align-items: center; justify-content: center; }
.modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; max-width: 460px; width: 90%; margin: 20px; }
.modal-title-danger { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: #ff4466; }
.modal-body { color: var(--text-2); font-size: .9rem; line-height: 1.6; margin-bottom: 20px; }
.modal-label { font-size: .85rem; color: var(--text-3); }
.modal-input-mb { margin-bottom: 16px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* Admin restore banner */
.admin-restore-bar { text-align: center; padding: 16px; color: var(--text-3); font-size: .78rem; }
.admin-restore-bar a { color: var(--accent); text-decoration: none; }

/* =============================================
   V1.4.0 — COMPOSANTS DASHBOARD CLIENT
   ============================================= */
.dash-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.dash-status-widget { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius); margin-bottom: 20px; border: 1px solid var(--border); }
.dash-status-widget-ok { border-color: rgba(0,255,136,.2); }
.dash-status-widget-warn { border-color: rgba(255,170,0,.25); }
.dash-status-left { display: flex; align-items: center; gap: 10px; }
.dash-status-text { font-size: .88rem; font-weight: 600; }
.dash-status-text-ok { color: var(--success); }
.dash-status-text-warn { color: var(--warning); }
.dash-status-link { font-size: .78rem; color: var(--accent); text-decoration: none; white-space: nowrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }

.activity-row { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.activity-row-title { font-size: .82rem; font-weight: 500; color: var(--text); }
.activity-row-date { font-size: .72rem; color: var(--text-3); }
.activity-row-right { display: flex; gap: 8px; align-items: center; }
.activity-amount { font-size: .82rem; font-weight: 600; color: var(--accent); }
.badge-paid { font-size: .7rem; padding: 2px 7px; border-radius: 4px; background: rgba(0,255,136,.1); color: var(--success); }
.badge-pending-inv { font-size: .7rem; padding: 2px 7px; border-radius: 4px; background: rgba(255,170,0,.1); color: var(--warning); }
.badge-ticket-status { font-size: .7rem; padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,.2); border: 1px solid; }
.activity-empty { padding: 32px; text-align: center; color: var(--text-3); font-size: .88rem; }

/* =============================================
   V1.4.0 — COMPOSANTS ADMIN DASHBOARD
   ============================================= */
.admin-kpi-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; margin-bottom: 20px; }
.admin-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.admin-kpi-icon { font-size: 1.3rem; margin-bottom: 6px; }
.admin-kpi-label { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); margin-bottom: 2px; }
.admin-kpi-val { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--kpi-color, var(--text)); }
.admin-kpi-sub { font-size: .72rem; color: var(--text-3); margin-top: 2px; }

.admin-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.admin-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.admin-panel-title { font-weight: 700; font-size: .9rem; }
.admin-panel-link { color: var(--accent); font-size: .78rem; text-decoration: none; }

.admin-user-row { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.admin-user-email { font-size: .82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.admin-user-meta { font-size: .7rem; color: var(--text-3); }
.admin-role-badge { background: rgba(240,165,0,.12); color: #f0a500; padding: 1px 7px; border-radius: 3px; font-size: .67rem; font-weight: 700; }

.admin-svc-row { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.admin-svc-name { font-size: .82rem; color: var(--text-2); font-family: var(--font-mono); }
.admin-svc-up { font-size: .72rem; font-weight: 700; color: var(--success); }
.admin-svc-down { font-size: .72rem; font-weight: 700; color: var(--danger); }

.revenue-chart-wrap { padding: 16px; }
.revenue-empty { text-align: center; color: var(--text-3); font-size: .85rem; padding: 20px 0; }
.revenue-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.revenue-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.revenue-bar-amount { font-size: .6rem; color: var(--accent); font-weight: 700; white-space: nowrap; }
.revenue-bar-fill { width: 100%; height: var(--bar-h, 4px); background: var(--gradient); border-radius: 4px 4px 2px 2px; min-height: 4px; }
.revenue-bar-label { font-size: .58rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }
.revenue-total { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-3); text-align: right; }
.revenue-total strong { color: var(--accent); }

.admin-ticket-row { padding: 9px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.admin-ticket-content { min-width: 0; }
.admin-ticket-subject { font-size: .82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-ticket-meta { font-size: .7rem; color: var(--text-3); margin-top: 1px; }
.admin-ticket-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.priority-badge-high { font-size: .65rem; padding: 1px 6px; border-radius: 3px; font-weight: 700; color: #ff4466; background: rgba(255,68,102,.1); }
.priority-badge-medium { font-size: .65rem; padding: 1px 6px; border-radius: 3px; font-weight: 700; color: var(--warning); background: rgba(255,170,0,.1); }
.priority-badge-urgent { font-size: .65rem; padding: 1px 6px; border-radius: 3px; font-weight: 700; color: #ff4466; background: rgba(255,68,102,.15); }
.admin-ticket-link { font-size: .72rem; color: var(--accent); text-decoration: none; }

.admin-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.admin-th { padding: 9px 12px; text-align: left; font-size: .67rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.admin-td-name { padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); font-size: .84rem; }
.admin-td-truncate { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .76rem; color: var(--text-3); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-td-type { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .78rem; color: var(--text-2); }
.admin-td-plan { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .76rem; color: var(--text-3); }
.admin-table tr:hover .admin-td,
.admin-table tr:hover .admin-td-name,
.admin-table tr:hover .admin-td-truncate,
.admin-table tr:hover .admin-td-type,
.admin-table tr:hover .admin-td-plan { background: var(--surface); }
.admin-btn-group { display: flex; gap: 4px; }
.admin-form-inline { display: inline; }
.btn-icon { padding: 3px 8px !important; font-size: .76rem !important; }
.btn-suspend { background: rgba(255,68,102,.1) !important; color: var(--danger) !important; border: 1px solid rgba(255,68,102,.2) !important; }
.btn-unsuspend { background: rgba(0,255,136,.1) !important; color: var(--success) !important; border: 1px solid rgba(0,255,136,.15) !important; }
.btn-stripe { background: rgba(240,165,0,.12) !important; color: #f0a500 !important; border: 1px solid rgba(240,165,0,.25) !important; }
.btn-delete-srv { background: rgba(180,60,80,.15) !important; color: #ff8899 !important; border: 1px solid rgba(255,68,102,.35) !important; }

.admin-mobile-card { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.admin-mobile-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.admin-mobile-card-name { font-weight: 700; font-size: .9rem; color: var(--text); }
.admin-mobile-card-email { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
.admin-mobile-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .76rem; color: var(--text-3); margin-bottom: 10px; }
.admin-mobile-card-ip { color: var(--accent); font-family: var(--font-mono); }
.admin-mobile-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.admin-cancelled { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 20px; opacity: .95; }
.admin-cancelled-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.admin-cancelled-title { font-weight: 700; font-size: .85rem; color: var(--text-3); }
.admin-cancelled-note { font-size: .72rem; color: var(--text-3); margin-left: 8px; }
.admin-table-sm { width: 100%; border-collapse: collapse; min-width: 520px; }
.admin-th-sm { padding: 8px 12px; text-align: left; font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); border-bottom: 1px solid var(--border); }
.admin-td-sm { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: .82rem; }
.admin-td-sm-muted { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: .75rem; color: var(--text-3); }
.admin-td-sm-xs { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: .72rem; color: var(--text-3); }
.overflow-x-auto { overflow-x: auto; }
.admin-panel-empty { padding: 24px; text-align: center; font-size: .88rem; color: var(--success); }
.admin-panel-alert { margin-bottom: 16px; }

/* =============================================
   V1.4.0 — RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
    .admin-kpi-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
    .admin-kpi-grid { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .profile-stats { grid-template-columns: 1fr 1fr; }
    .gdpr-grid { grid-template-columns: 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* =============================================
   V1.4.0 — CLASSES UTILITAIRES SUPPLÉMENTAIRES
   ============================================= */
/* Lien admin dans sidebar */
.side-nav .link-admin { color: #f0a500; }
.side-nav .link-admin:hover { color: #f0a500; background: rgba(240,165,0,.06); }

/* Stat val accentuée dans dashboard */
.s-val-accent { color: var(--accent); }

/* Code IP serveur */
.srv-ip { color: var(--accent); font-size: .75rem; font-family: var(--font-mono); }

/* Actions de la ligne serveur */
.srv-actions { display: flex; gap: 8px; align-items: center; }

/* État vide serveurs */
.srv-empty { padding: 32px; text-align: center; }
.srv-empty-icon { font-size: 2rem; margin-bottom: 12px; }
.srv-empty p { color: var(--text-3); margin-bottom: 16px; }

/* Body de card avec padding */
.card-body { padding: 20px; }

/* Champs avis */
.review-field-label { font-size: .78rem; color: var(--text-3); display: block; margin-bottom: 6px; }
.review-pending-hint { color: var(--text-3); font-size: .85rem; margin-top: 12px; }

/* Badge email non vérifié */
.badge-unverified { margin-top: 8px; padding: 6px 10px; background: rgba(255,170,0,.1); border: 1px solid rgba(255,170,0,.2); border-radius: 6px; font-size: .72rem; color: var(--warning); }

/* Alertes supplémentaires */
.alert-warning { background: rgba(255,170,0,.06); border: 1px solid rgba(255,170,0,.2); color: var(--warning); padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.alert-info { background: rgba(0,204,255,.06); border: 1px solid rgba(0,204,255,.15); color: #00ccff; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.alert-link { font-weight: 700; margin-left: 8px; color: inherit; }

/* Mobile sheet header */
.dash-mobile-sheet-title { padding: 0 20px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .9rem; }
.dash-mobile-sheet-nav { padding: 12px 0; }
.dash-mobile-sheet-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--text-3); text-decoration: none; font-size: .85rem; font-weight: 450; letter-spacing: .01em; }
.dash-mobile-sheet-nav a.active { color: var(--accent); background: var(--accent-glow); border-left: 3px solid var(--accent); }
.dash-mobile-sheet-nav .sep { height: 1px; background: var(--border); margin: 8px 0; }

/* Badge ticket status avec custom property */
.badge-ticket-status { color: var(--ticket-color, var(--text-3)); border-color: color-mix(in srgb, var(--ticket-color, var(--text-3)) 20%, transparent); }

/* Ancre panel admin avec offset nav */
.admin-panel-anchor { scroll-margin-top: 80px; }

/* =============================================
   CHANGELOG — REFONTE V1.4.0
   ============================================= */

/* Tags de type — classes par variant (remplace les styles inline) */
.cl-tag--feature  { color: #00ffaa; background: rgba(0,255,170,.1);   border-color: rgba(0,255,170,.2); }
.cl-tag--improve  { color: #00ccff; background: rgba(0,204,255,.1);   border-color: rgba(0,204,255,.2); }
.cl-tag--fix      { color: #ff9944; background: rgba(255,153,68,.1);  border-color: rgba(255,153,68,.2); }
.cl-tag--perf     { color: #aa88ff; background: rgba(170,136,255,.1); border-color: rgba(170,136,255,.2); }
.cl-tag--security { color: #ff4466; background: rgba(255,68,102,.1);  border-color: rgba(255,68,102,.2); }
.cl-tag--infra    { color: #88aacc; background: rgba(136,170,204,.1); border-color: rgba(136,170,204,.2); }

/* Hero stats */
.cl-hero-stats { display: flex; justify-content: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.cl-hero-stat { text-align: center; }
.cl-hero-stat-val { font-size: 2rem; font-weight: 800; color: var(--accent); letter-spacing: -1px; line-height: 1; }
.cl-hero-stat-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); margin-top: 4px; }
.cl-hero-sep { width: 1px; background: var(--border); align-self: stretch; }

/* Badge "Dernière version" */
.cl-latest-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 4px; background: rgba(0,255,170,.15); color: var(--accent); border: 1px solid rgba(0,255,170,.3); margin-left: 8px; }

/* Mini-pills résumé par version */
.cl-type-pills { display: flex; gap: 5px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }
.cl-type-pill { font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; border: 1px solid; opacity: .85; }
.cl-type-pill--feature  { color: #00ffaa; border-color: rgba(0,255,170,.25);   background: rgba(0,255,170,.07); }
.cl-type-pill--improve  { color: #00ccff; border-color: rgba(0,204,255,.25);   background: rgba(0,204,255,.07); }
.cl-type-pill--fix      { color: #ff9944; border-color: rgba(255,153,68,.25);  background: rgba(255,153,68,.07); }
.cl-type-pill--perf     { color: #aa88ff; border-color: rgba(170,136,255,.25); background: rgba(170,136,255,.07); }
.cl-type-pill--security { color: #ff4466; border-color: rgba(255,68,102,.25);  background: rgba(255,68,102,.07); }
.cl-type-pill--infra    { color: #88aacc; border-color: rgba(136,170,204,.25); background: rgba(136,170,204,.07); }

/* Barre de filtre */
.cl-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.cl-filter-btn { font-size: .78rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-3); cursor: pointer; transition: all .2s; font-family: var(--font); }
.cl-filter-btn:hover { border-color: var(--border-bright); color: var(--text); }
.cl-filter-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,255,170,.08); }

/* Entrée masquée par le filtre */
.cl-entry.hidden { display: none; }

/* Version majeure améliorée */
.cl-card.major-card { border-color: rgba(0,255,170,.15); }
.cl-card.major-card .cl-header { background: rgba(0,255,170,.03); }

/* Compteur total dans l'en-tête des versions majeures */
.cl-count { font-size: .7rem; color: var(--text-3); margin-left: auto; white-space: nowrap; }

/* Badge "Nouveau" total mises à jour */
.cl-hero-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .9rem; color: var(--accent); background: rgba(0,255,170,.1); padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(0,255,170,.2); }

/* Scroll top button — déplacé depuis <style> inline */
.scroll-top-btn { position: fixed; bottom: 30px; right: 30px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; opacity: 0; visibility: hidden; transition: .3s; z-index: 100; }
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { border-color: var(--accent); color: var(--accent); }

/* copy-link-btn — déplacé depuis <style> inline */
.copy-link-btn { display: inline-flex; align-items: center; opacity: .3; transition: opacity .2s, transform .2s; margin-left: 8px; color: var(--text-3); cursor: pointer; }
.cl-version-wrap { display: flex; align-items: center; font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--accent); }
.cl-version-wrap:hover .copy-link-btn, .copy-link-btn:focus, .copy-link-btn:active { opacity: 1; color: var(--text); }
.copy-link-btn:hover { color: var(--accent); transform: scale(1.1); }
.cl-marker.major-marker { width: 16px; height: 16px; background: var(--accent); box-shadow: 0 0 12px rgba(0,255,170,.4); margin-left: -2px; border-color: var(--accent); }
@media (hover: none) { .copy-link-btn { opacity: .7; } }

/* Message "aucun résultat" pour le filtre */
.cl-no-results { display: none; text-align: center; padding: 60px 20px; color: var(--text-3); font-size: .95rem; }
.cl-no-results.visible { display: block; }

/* ============================================================
   CHANGELOG v1.4.1 — contrôles sticky, recherche, progression
   ============================================================ */

/* Barre de progression de lecture */
.cl-reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #00ccff);
    z-index: 300;
    box-shadow: 0 0 8px rgba(0,255,170,.5);
    transition: width .1s linear;
    pointer-events: none;
}

/* Barre de contrôles sticky (filtre + recherche) */
.cl-controls {
    position: sticky;
    top: 64px;
    z-index: 90;
    background: rgba(5,5,16,.92);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin: 0 -20px 40px;
    transition: box-shadow .2s;
}
.cl-controls.stuck { box-shadow: 0 6px 24px rgba(0,0,0,.5); }

.cl-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* Champ de recherche */
.cl-search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
    min-width: 180px;
}
.cl-search-wrap .cl-search-icon {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
    display: flex;
}
.cl-search {
    width: 100%;
    padding: 7px 14px 7px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    font-size: .82rem;
    font-family: var(--font);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.cl-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,255,170,.06);
}
.cl-search::placeholder { color: var(--text-3); }

/* Saut rapide vers une version */
.cl-jump {
    padding: 7px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: .78rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: border-color .2s;
    white-space: nowrap;
}
.cl-jump:focus { outline: none; border-color: var(--accent); }
.cl-jump:hover { border-color: var(--border-bright); }

/* Compteur de résultats */
.cl-results-count {
    font-size: .72rem;
    color: var(--text-3);
    text-align: center;
    min-height: 1em;
    transition: opacity .2s;
}
.cl-results-count.hidden { opacity: 0; }

/* Filtrage au niveau des items individuels */
.cl-item.item-hidden { display: none; }

/* Version entière sans items visibles : collapse le card body */
.cl-card.all-items-hidden .cl-list { display: none; }
.cl-card.all-items-hidden { opacity: .45; }

/* Transition lors du filtrage */
.cl-entry { transition: opacity .25s; }
.cl-entry.fading { opacity: 0; }

/* Indicateur clavier (raccourci "/" sur la search) */
.cl-search-kbd {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    color: var(--text-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    pointer-events: none;
    font-family: var(--font-mono);
}
.cl-search:focus ~ .cl-search-kbd { display: none; }

@media (max-width: 600px) {
    .cl-controls { margin: 0 -16px 28px; padding: 10px 16px; }
    .cl-search-kbd { display: none; }
}

/* ════════════════════════════════════════════════════════════
   NOTIFICATIONS IN-APP — cloche navbar
   ════════════════════════════════════════════════════════════ */
.nav-notif-wrap {
    position: relative;
}
.nav-notif-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: border-color .2s, color .2s;
    position: relative;
}
.nav-notif-btn:hover { border-color: var(--border-bright); color: var(--text); }
.nav-notif-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: var(--accent);
    color: #000;
    font-size: .6rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
.nav-notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    z-index: 1000;
    overflow: hidden;
}
.nav-notif-dropdown.open { display: block; }
.nav-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
}
.nav-notif-mark-read {
    background: none;
    border: none;
    color: var(--accent);
    font-size: .75rem;
    cursor: pointer;
    padding: 0;
}
.nav-notif-mark-read:hover { text-decoration: underline; }
.nav-notif-list {
    max-height: 340px;
    overflow-y: auto;
}
.nav-notif-item {
    display: flex;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s;
}
.nav-notif-item:hover { background: var(--bg-2); }
.nav-notif-item.unread { background: rgba(0,255,170,0.04); }
.nav-notif-item.unread .nav-notif-title { color: var(--text); }
.nav-notif-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.nav-notif-body { flex: 1; min-width: 0; }
.nav-notif-title { font-size: .82rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-notif-desc { font-size: .75rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-notif-time { font-size: .7rem; color: var(--text-3); margin-top: 3px; }
.nav-notif-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: .82rem; }

/* ════════════════════════════════════════════════════════════
   PARRAINAGE — page /referral
   ════════════════════════════════════════════════════════════ */
.ref-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    background: linear-gradient(135deg, rgba(0,255,170,.06) 0%, rgba(0,204,255,.04) 100%);
    border: 1px solid rgba(0,255,170,.2);
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 24px;
    align-items: center;
}
.ref-hero-credit { text-align: center; padding-right: 32px; border-right: 1px solid var(--border); }
.ref-hero-amount { font-size: 2.4rem; font-weight: 800; color: var(--accent); line-height: 1; }
.ref-hero-label { font-size: .82rem; color: var(--text-2); margin-top: 4px; font-weight: 600; }
.ref-hero-hint { font-size: .72rem; color: var(--text-3); margin-top: 6px; max-width: 140px; }
.ref-hero-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.ref-stat { text-align: center; }
.ref-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--text); line-height: 1; }
.ref-stat-lbl { font-size: .75rem; color: var(--text-3); margin-top: 4px; }
.ref-link-wrap { display: flex; gap: 8px; align-items: center; }
.ref-link-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: var(--font-mono); font-size: .82rem; }
.ref-conditions { margin-top: 16px; font-size: .75rem; color: var(--text-3); line-height: 1.6; padding: 10px 14px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-success { background: rgba(0,255,136,.12); color: var(--success); }
.badge-info { background: rgba(0,204,255,.1); color: #00ccff; }
.badge-muted { background: var(--bg-2); color: var(--text-3); }
@media (max-width: 600px) {
    .ref-hero { grid-template-columns: 1fr; }
    .ref-hero-credit { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 20px; margin-bottom: 4px; }
    .ref-link-wrap { flex-direction: column; align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════
   MÉTRIQUES SERVEUR — graphes CPU / RAM
   ════════════════════════════════════════════════════════════ */
.srv-chart-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.srv-chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
    margin-bottom: 10px;
    align-items: center;
}
.srv-chart-range {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: .72rem;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.srv-chart-range.active, .srv-chart-range:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.srv-chart-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.srv-chart-tab {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: .72rem;
    color: var(--text-3);
    cursor: pointer;
    transition: all .2s;
}
.srv-chart-tab.active {
    background: rgba(0,255,170,.1);
    border-color: var(--accent);
    color: var(--accent);
}
.srv-chart-canvas-wrap { position: relative; height: 90px; }
.srv-chart-empty { text-align: center; color: var(--text-3); font-size: .78rem; padding: 20px 0; }

/* Cloche mobile — cachée sur desktop, visible sur mobile entre logo et hamburger */
.nav-notif-mobile { display: none; }
.nav-notif-wrap { display: none; }

@media (min-width: 769px) {
    .nav-notif-wrap { display: block; }
    .nav-notif-mobile { display: none !important; }
}
@media (max-width: 768px) {
    .nav-notif-mobile { display: block; }
    /* Sur mobile : dropdown en position fixe, toute la largeur */
    .nav-notif-dropdown-mobile {
        position: fixed;
        top: 60px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

/* ── Bouton refresh PWA standalone ────────────────────────────────────── */
#pwa-refresh-btn {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    transition: transform .2s, border-color .2s;
}
#pwa-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
#pwa-refresh-btn.spinning { animation: pwa-spin .6s linear; }
@keyframes pwa-spin { to { transform: rotate(360deg); } }

/* ── Page Community ────────────────────────────────────────────────────── */
.community-wrap { padding-top: 80px; }

.community-hero {
    text-align: center;
    padding: 80px 24px 60px;
    max-width: 700px;
    margin: 0 auto;
}
.community-hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.2;
    margin: 12px 0 16px;
}
.community-hero p {
    color: var(--text-3);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 32px;
}
.community-cta-btn { min-width: 220px; }

.community-section { padding: 72px 0; }

.community-steps {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.community-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}
.community-step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.community-step-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.community-step-body p {
    color: var(--text-3);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}
.community-step-body code {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.85rem;
    color: var(--accent);
    font-family: monospace;
}

.community-apps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.community-app-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-1);
    transition: border-color .2s, transform .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.community-app-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}
.community-app-icon { font-size: 2rem; }
.community-app-name { font-weight: 700; font-size: 1rem; }
.community-app-desc { color: var(--text-3); font-size: 0.82rem; }

@media (max-width: 768px) {
    .community-hero h1 { font-size: 1.9rem; }
    .community-apps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .community-apps { grid-template-columns: 1fr 1fr; gap: 12px; }
    .community-step { gap: 14px; padding: 18px; }
}
.community-space-id { margin-bottom: 20px; }
.community-space-id code { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; font-size: .9rem; color: var(--accent); font-family: monospace; }
.community-hero-hint { font-size: .82rem; color: var(--text-3); margin-top: 12px; }
.community-hero-hint a { color: var(--text-3); text-decoration: underline; }

/* ── Community — Matrix explanation ───────────────────────────────────── */
.community-matrix-intro {
    max-width: 740px;
    margin: 0 auto 48px;
    text-align: center;
    color: var(--text-2);
    line-height: 1.7;
    font-size: .97rem;
}
.community-matrix-intro p { margin-bottom: 14px; }
.community-matrix-intro code {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .85rem;
    color: var(--accent);
    font-family: monospace;
}

.community-compare {
    max-width: 780px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.community-compare-row {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    padding: 14px 20px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}
.community-compare-row:last-child { border-bottom: none; }
.community-compare-header {
    background: var(--bg-card);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
}
.compare-arrow { text-align: center; color: var(--accent); font-weight: 700; }
.compare-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    margin-right: 6px;
}
.compare-pill.discord { background: rgba(88,101,242,.15); color: #7289da; border: 1px solid rgba(88,101,242,.25); }
.compare-pill.matrix  { background: rgba(0,228,165,.12); color: var(--accent); border: 1px solid rgba(0,228,165,.25); }
.compare-example { font-size: .78rem; color: var(--text-3); font-family: monospace; }

@media (max-width: 600px) {
    .community-compare-row { grid-template-columns: 1fr 24px 1fr; padding: 12px; gap: 6px; }
    .compare-example { display: none; }
}

/* ── Community — Discord + Matrix hero platforms ──────────────────────── */
.community-hero { max-width: 900px; }
.community-hero > p { margin-bottom: 40px; }
.community-hero-platforms {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
    width: 100%;
}
.community-platform-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    max-width: 340px;
    min-width: 0;
    transition: border-color .2s;
    box-sizing: border-box;
}
.community-platform-card:hover { border-color: var(--accent); }
.community-platform-icon { font-size: 2.2rem; }
.community-platform-name { font-size: 1.15rem; font-weight: 800; }
.community-platform-desc { color: var(--text-3); font-size: .88rem; line-height: 1.5; margin-bottom: 6px; }
.community-platform-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: .9rem;
    font-style: italic;
    padding-top: 60px;
    flex-shrink: 0;
}
.community-cta-final {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
@media (max-width: 640px) {
    .community-hero { padding: 48px 16px 40px; }
    .community-hero h1 { font-size: 1.7rem; letter-spacing: -1px; }
    .community-hero > p { font-size: .95rem; margin-bottom: 24px; }
    .community-hero-platforms { flex-direction: column; align-items: stretch; gap: 12px; }
    .community-platform-sep { padding-top: 0; }
    .community-platform-card { max-width: 100%; width: 100%; padding: 22px 16px; }
    .community-cta-btn { min-width: 0; width: 100%; }
    .community-cta-final { flex-direction: column; }
    .community-cta-final .btn { width: 100%; text-align: center; }
    .community-space-id code { font-size: .8rem; word-break: break-all; }
}

/* ── Page Roadmap ──────────────────────────────────────────────────────── */
.rm-wrap { max-width: 860px; margin: 0 auto; padding: 100px 24px 80px; }

.rm-hero { text-align: center; margin-bottom: 40px; }
.rm-hero h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -1.5px; margin: 12px 0 14px; }
.rm-hero p { color: var(--text-3); font-size: 1rem; margin-bottom: 14px; }
.rm-meta { font-size: .85rem; color: var(--text-3); }
.rm-meta a { color: var(--accent); text-decoration: none; }
.rm-meta a:hover { text-decoration: underline; }

.rm-legend {
    display: flex; flex-wrap: wrap; gap: 10px 20px;
    align-items: center; margin-bottom: 36px;
    padding: 14px 20px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 12px;
    font-size: .82rem; color: var(--text-3);
}
.rm-legend-item { display: flex; align-items: center; gap: 6px; }
.rm-legend-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.rm-legend-done { color: var(--accent); }
.rm-done-check { font-weight: 700; }
.rm-status-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.rm-tag-sm { font-size: .75rem; padding: 2px 8px; border-radius: 20px; }

.rm-block {
    border: 1px solid var(--border); border-radius: 16px;
    margin-bottom: 24px; overflow: hidden;
    border-left-width: 3px;
}
.rm-block-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px 16px; gap: 12px; flex-wrap: wrap;
}
.rm-block-title { display: flex; align-items: center; gap: 12px; }
.rm-version {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 3px 10px;
    font-size: .8rem; font-weight: 700; font-family: monospace;
    color: var(--text-2);
}
.rm-block-label { font-weight: 700; font-size: 1rem; }
.rm-block-meta { display: flex; align-items: center; gap: 10px; }
.rm-progress-txt { font-size: .8rem; color: var(--text-3); }

.rm-status-badge {
    font-size: .75rem; font-weight: 600; padding: 3px 10px;
    border-radius: 20px;
}
.rm-progress-bar {
    height: 3px; background: var(--border); margin: 0 24px 16px;
    border-radius: 2px;
}
.rm-progress-fill {
    height: 100%; width: var(--pct); border-radius: 2px;
    background: var(--accent); transition: width .4s;
}

/* Status colors */
.rm-status-next    { background: rgba(0,228,165,.12); color: var(--accent); border-color: rgba(0,228,165,.4); }
.rm-status-planned { background: rgba(0,153,255,.1);  color: #0099ff;       border-color: rgba(0,153,255,.35); }
.rm-status-future  { background: rgba(140,85,255,.1); color: #8855ff;       border-color: rgba(140,85,255,.3); }
.rm-status-idea    { background: rgba(255,170,0,.08); color: #ffaa00;       border-color: rgba(255,170,0,.25); }

.rm-status-dot.rm-status-next    { background: var(--accent); }
.rm-status-dot.rm-status-planned { background: #0099ff; }
.rm-status-dot.rm-status-future  { background: #8855ff; }
.rm-status-dot.rm-status-idea    { background: #ffaa00; }

.rm-items { list-style: none; padding: 0 24px 20px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rm-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--bg-2); border: 1px solid var(--border);
    transition: border-color .15s;
}
.rm-item:hover { border-color: rgba(255,255,255,.12); }
.rm-item-done { opacity: .6; }
.rm-item-done .rm-item-text { text-decoration: line-through; }
.rm-item-check {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,228,165,.15); border: 1px solid rgba(0,228,165,.3);
    color: var(--accent); font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.rm-item-text { font-size: .9rem; color: var(--text-2); line-height: 1.5; }

.rm-tag { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; margin-top: 2px; }
.rm-tag-feature  { background: rgba(0,228,165,.1);  color: var(--accent); border: 1px solid rgba(0,228,165,.2); }
.rm-tag-improve  { background: rgba(0,153,255,.1);  color: #0099ff;       border: 1px solid rgba(0,153,255,.2); }
.rm-tag-security { background: rgba(255,68,102,.1); color: #ff4466;        border: 1px solid rgba(255,68,102,.2); }

.rm-cta {
    text-align: center; padding: 48px 24px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; margin-top: 16px;
}
.rm-cta-icon { font-size: 2.2rem; margin-bottom: 12px; }
.rm-cta h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.rm-cta p { color: var(--text-3); margin-bottom: 24px; }

@media (max-width: 600px) {
    .rm-hero h1 { font-size: 1.8rem; }
    .rm-block-header { flex-direction: column; align-items: flex-start; }
    .rm-legend { gap: 8px 14px; }
    .rm-legend-sep { display: none; }
}

/* ── Recherche globale ────────────────────────────────────────────────── */
.gs-trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin: 12px 0 4px;
    padding: 8px 12px;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--text-3); font-size: .82rem;
    transition: border-color .15s, color .15s;
}
.gs-trigger:hover { border-color: var(--accent); color: var(--text); }
.gs-trigger-icon { font-size: .9rem; flex-shrink: 0; }
.gs-trigger-text { flex: 1; text-align: left; }
.gs-trigger-kbd {
    font-size: .68rem; padding: 2px 5px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 4px; font-family: var(--font-mono);
    color: var(--text-3); flex-shrink: 0;
}

#gs-overlay {
    display: none; position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    align-items: flex-start; justify-content: center;
    padding-top: 80px;
}
#gs-overlay.gs-open { display: flex; }

.gs-modal {
    width: 100%; max-width: 560px; margin: 0 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    animation: gs-in .12s ease;
}
@keyframes gs-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }

.gs-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.gs-input-wrap svg { flex-shrink: 0; color: var(--text-3); }
.gs-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-size: 1rem; font-family: var(--font-sans);
}
.gs-input::placeholder { color: var(--text-3); }
.gs-esc-hint {
    font-size: .72rem; padding: 2px 6px;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-3);
    font-family: var(--font-mono); flex-shrink: 0;
}

.gs-results { max-height: 380px; overflow-y: auto; padding: 8px 0; }
.gs-results:empty::after {
    content: 'Tapez pour rechercher…';
    display: block; padding: 20px 16px;
    color: var(--text-3); font-size: .85rem; text-align: center;
}

.gs-empty { padding: 24px 16px; text-align: center; color: var(--text-3); font-size: .85rem; }

.gs-group-label {
    padding: 6px 16px 4px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-3);
}

.gs-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; cursor: pointer; text-decoration: none;
    transition: background .1s; color: var(--text);
}
.gs-item:hover, .gs-item.gs-active { background: var(--bg-3); }
.gs-item-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--bg-3); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}
.gs-item-body { flex: 1; min-width: 0; }
.gs-item-title {
    font-size: .88rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-item-meta { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
.gs-item-arrow { color: var(--text-3); font-size: .8rem; flex-shrink: 0; }

.gs-footer {
    padding: 8px 16px; border-top: 1px solid var(--border);
    display: flex; gap: 16px; align-items: center;
}
.gs-footer-hint { font-size: .72rem; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.gs-footer-hint kbd {
    font-size: .68rem; padding: 1px 4px;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: 3px; font-family: var(--font-mono);
}

/* ── Modal alertes CPU/RAM ────────────────────────────────────────────── */
.srv-alert-btn { color: var(--text-2); border-color: var(--border); }
.srv-alert-btn:hover { color: #ffaa00; border-color: #ffaa00; }

.alert-modal {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    width: 100%; max-width: 380px; margin: 0 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    animation: gs-in .12s ease;
}
.alert-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.alert-modal-head h3 { font-size: 1rem; font-weight: 700; }
.alert-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-3); font-size: 1rem; padding: 4px 8px;
}
.alert-modal-close:hover { color: var(--text); }
.alert-modal-desc { font-size: .8rem; color: var(--text-3); margin-bottom: 20px; }
.alert-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.alert-modal-label { font-size: .88rem; font-weight: 600; }
.alert-modal-cur { font-size: .78rem; color: var(--accent); font-weight: 400; margin-left: 6px; }
.alert-modal-input-wrap { display: flex; align-items: center; gap: 6px; }
.alert-modal-input {
    width: 72px; padding: 7px 10px; text-align: center;
    background: var(--bg-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-size: .9rem;
}
.alert-modal-input:focus { outline: none; border-color: var(--accent); }
.alert-modal-unit { font-size: .82rem; color: var(--text-3); }
.alert-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Webhooks page ────────────────────────────────────────────────────── */
.dash-title   { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.dash-subtitle { font-size: .88rem; color: var(--text-3); margin-bottom: 24px; }

.wh-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.wh-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px;
}
.wh-inactive { opacity: .55; }
.wh-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.wh-name  { font-size: .92rem; font-weight: 700; margin-bottom: 3px; }
.wh-url   { font-size: .75rem; color: var(--text-3); font-family: var(--font-mono); word-break: break-all; }
.wh-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.wh-last-code { font-size: .72rem; font-family: var(--font-mono); padding: 2px 7px; border-radius: 4px; font-weight: 700; }
.wh-code-ok  { background: rgba(0,255,136,.12); color: #00ff88; border: 1px solid rgba(0,255,136,.25); }
.wh-code-err { background: rgba(255,68,102,.12); color: #ff4466; border: 1px solid rgba(255,68,102,.25); }
.wh-events   { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-event-badge { font-size: .72rem; padding: 3px 8px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); }
.wh-last { font-size: .72rem; color: var(--text-3); margin-top: 10px; }

.wh-form-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; margin-bottom: 24px;
}
.wh-form-title { font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row-2 { grid-template-columns: 1fr; } }
.wh-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.wh-event-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-3);
    font-size: .83rem; transition: border-color .15s;
}
.wh-event-check:hover { border-color: var(--accent); }
.wh-event-check input { accent-color: var(--accent); }

.wh-doc {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 24px;
}
.wh-doc h3 { font-size: .95rem; font-weight: 700; margin-bottom: 12px; }
.wh-pre {
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 16px; font-size: .78rem; font-family: var(--font-mono);
    color: var(--text-2); overflow-x: auto; margin-bottom: 10px; white-space: pre;
}
.wh-doc p { font-size: .82rem; color: var(--text-3); }
.wh-doc code { background: var(--bg-3); padding: 1px 5px; border-radius: 3px; font-size: .8rem; }
.btn-danger { color: #ff4466; border-color: #ff4466; }
.btn-danger:hover { background: rgba(255,68,102,.1); }

/* ── Bannière maintenance ─────────────────────────────────────────────── */
.maint-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 9px 20px; font-size: .82rem; font-weight: 500;
    text-align: center; line-height: 1.4;
}
.maint-active   { background: rgba(255,170,0,.12); border-bottom: 1px solid rgba(255,170,0,.3); color: #ffaa00; }
.maint-upcoming { background: rgba(0,204,255,.1);  border-bottom: 1px solid rgba(0,204,255,.25); color: #00ccff; }
.maint-icon { font-size: 1rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   PUBLIC SERVER PAGE — /s/:slug
   ═══════════════════════════════════════════════════════════════ */
.sp-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* Hero */
.sp-hero {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.sp-hero-icon {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
}
.sp-hero-info {
    flex: 1;
    min-width: 200px;
}
.sp-hero-name {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.sp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.sp-hero-sub {
    font-size: .85rem;
    color: var(--text-2);
}
.sp-game-badge {
    background: rgba(var(--accent-rgb, 0,255,170), .12);
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}
.sp-status-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}
.sp-status-online  { background: rgba(0,255,170,.12); color: #00ffaa; }
.sp-status-offline { background: rgba(255,68,102,.12); color: #ff4466; }
.sp-tag {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .75rem;
    color: var(--text-2);
}

/* Vote box */
.sp-vote-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    text-align: center;
}
.sp-vote-count {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.sp-vote-label {
    font-size: .75rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sp-vote-btn {
    width: 100%;
    font-weight: 600;
}
.sp-vote-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
}
.sp-vote-hint {
    font-size: .72rem;
    color: var(--text-3);
}

/* Body layout */
.sp-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 700px) {
    .sp-body { grid-template-columns: 1fr; }
    .sp-sidebar { order: -1; }
}

/* Cards */
.sp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.sp-card:last-child { margin-bottom: 0; }
.sp-card-title {
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-2);
    margin-bottom: 14px;
}
.sp-owner-card { border-color: rgba(var(--accent-rgb, 0,255,170), .2); }

/* Connection */
.sp-connect-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.sp-connect-addr {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: .03em;
    word-break: break-all;
}
.sp-copy-btn { flex-shrink: 0; }
.sp-players-live {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--text-2);
    margin-top: 8px;
}
.sp-players-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sp-online-dot  { background: #00ffaa; box-shadow: 0 0 6px #00ffaa; }
.sp-offline-dot { background: #ff4466; }

/* Description */
.sp-description {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--text-1);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Links */
.sp-links { display: flex; flex-direction: column; gap: 8px; }
.sp-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.sp-link:hover { border-color: var(--accent); background: rgba(var(--accent-rgb, 0,255,170), .06); }
.sp-link-icon { font-size: 1.1rem; }
.sp-link span:nth-child(2) { flex: 1; }
.sp-link-arrow { color: var(--text-3); }

/* Definition list */
.sp-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.sp-dl dt { color: var(--text-2); font-size: .83rem; }
.sp-dl dd { color: var(--text-1); font-size: .83rem; font-weight: 500; margin: 0; }

/* CTA card */
.sp-cta-card { text-align: center; }
.sp-cta-icon { font-size: 2rem; margin-bottom: 8px; }
.sp-cta-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.sp-cta-card p { font-size: .83rem; color: var(--text-2); margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════════
   SERVERS LISTING — /servers-list
   ═══════════════════════════════════════════════════════════════ */

/* Annuaire — serveurs listing */
.sl-wrap { max-width: 1140px; margin: 0 auto; padding: 32px 20px 80px; }

/* Stats bar */
.sl-stats-bar {
    display: flex; gap: 24px; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 20px;
    margin-bottom: 20px;
}
.sl-stat { display: flex; flex-direction: column; gap: 2px; }
.sl-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--text-1); }
.sl-stat-lbl { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }

/* Filters */
.sl-filters { margin-bottom: 20px; }
.sl-search-wrap { display: flex; gap: 8px; margin-bottom: 12px; }
.sl-search-input {
    flex: 1; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 16px; color: var(--text-1);
    font-size: .9rem; outline: none; transition: border-color .15s;
}
.sl-search-input:focus { border-color: var(--accent); }
.sl-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-chip {
    padding: 5px 14px; border-radius: 20px; font-size: .8rem;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-2); text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.sl-chip:hover { border-color: var(--accent); color: var(--accent); }
.sl-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(0,255,170,.07); font-weight: 600; }
.sl-chip-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.sl-meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-3); margin-bottom: 14px; }

/* Podium TOP 3 */
.sl-podium {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px; margin-bottom: 28px; align-items: end;
}
.sl-pod {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 14px;
    text-decoration: none; color: var(--text-1);
    transition: transform .15s, box-shadow .15s;
    position: relative; overflow: hidden;
}
.sl-pod:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.sl-pod-1 { border-color: #ffd700; box-shadow: 0 0 24px rgba(255,215,0,.12); order: 2; padding-top: 28px; }
.sl-pod-2 { border-color: #c0c0c0; box-shadow: 0 0 14px rgba(192,192,192,.08); order: 1; }
.sl-pod-3 { border-color: #cd7f32; box-shadow: 0 0 14px rgba(205,127,50,.08); order: 3; }
.sl-pod-crown { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(255,215,0,.6)); }
.sl-pod-rank {
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    padding: 2px 10px; border-radius: 20px;
}
.sl-pod-1 .sl-pod-rank { color: #ffd700; background: rgba(255,215,0,.12); }
.sl-pod-2 .sl-pod-rank { color: #c0c0c0; background: rgba(192,192,192,.12); }
.sl-pod-3 .sl-pod-rank { color: #cd7f32; background: rgba(205,127,50,.12); }
.sl-pod-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.sl-pod-icon { font-size: 2.4rem; line-height: 1; }
.sl-pod-name { font-weight: 800; font-size: .95rem; line-height: 1.2; word-break: break-word; }
.sl-pod-game { font-size: .75rem; color: var(--text-3); }
.sl-pod-votes { font-size: 1.2rem; font-weight: 800; }
.sl-pod-1 .sl-pod-votes { color: #ffd700; }
.sl-pod-2 .sl-pod-votes { color: #c0c0c0; }
.sl-pod-3 .sl-pod-votes { color: #cd7f32; }
.sl-pod-votes-lbl { font-size: .7rem; color: var(--text-3); }

/* Ranking list */
.sl-ranking { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.sl-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
    text-decoration: none; color: var(--text-1);
    transition: border-color .15s, box-shadow .12s;
}
.sl-row:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.sl-row-num {
    font-size: .85rem; font-weight: 800; color: var(--text-3);
    min-width: 28px; text-align: right; flex-shrink: 0;
}
.sl-row-logo-wrap {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover);
}
.sl-row-logo { width: 44px; height: 44px; object-fit: cover; }
.sl-row-icon { font-size: 1.6rem; line-height: 1; }
.sl-row-main { flex: 1; min-width: 0; }
.sl-row-name { font-weight: 700; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--text-1); }
.sl-row-name:hover { color: var(--accent); }
.sl-row-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: .75rem; color: var(--text-3); margin-top: 3px;
}
.sl-row-game { color: var(--accent); font-weight: 600; }
.sl-row-tag {
    padding: 0px 6px; border-radius: 8px; font-size: .7rem;
    background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-3);
}
.sl-row-desc { font-size: .79rem; color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row-status {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    gap: 2px; min-width: 90px; text-align: center;
}
.sl-row-status-inner { display: flex; align-items: center; gap: 5px; font-size: .77rem; font-weight: 600; }
.sl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sl-dot.online  { background: #00ffaa; box-shadow: 0 0 6px #00ffaa; animation: sl-blink 2.5s infinite; }
.sl-dot.offline { background: #ff4466; }
.sl-dot.loading { background: var(--text-3); }
@keyframes sl-blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.sl-row-players { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
.sl-row-vote {
    flex-shrink: 0; display: flex; flex-direction: column;
    align-items: center; gap: 4px; min-width: 68px;
}
.sl-row-vote-count { font-size: 1.15rem; font-weight: 800; color: var(--text-1); line-height: 1; }
.sl-row-vote-label { font-size: .65rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.sl-row-vote-btn {
    background: rgba(0,255,170,.1); border: 1px solid rgba(0,255,170,.25);
    color: var(--accent); font-size: .7rem; font-weight: 700;
    padding: 4px 10px; border-radius: 8px; cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    letter-spacing: .04em; text-transform: uppercase;
}
.sl-row-vote-btn:hover:not(:disabled) {
    background: rgba(0,255,170,.2); border-color: var(--accent); transform: translateY(-1px);
}
.sl-row-vote-btn:disabled { opacity: .5; cursor: not-allowed; }
.sl-row-vote-btn.voted { background: rgba(0,255,170,.15); border-color: var(--accent); color: var(--accent); }
.sl-row-vote-cd {
    font-size: .65rem; color: var(--text-3); font-family: monospace; font-weight: 700;
    background: var(--bg-hover); border-radius: 6px; padding: 1px 5px;
}
.sl-ext-badge {
    display: inline-block; font-size: .65rem; font-weight: 700;
    background: rgba(100,100,255,.12); color: #8888ff;
    border: 1px solid rgba(100,100,255,.2); border-radius: 6px;
    padding: 0 5px; text-transform: uppercase; letter-spacing: .05em;
}

/* Empty / pagination */
.sl-empty {
    text-align: center; padding: 60px 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-2);
}
.sl-empty a { color: var(--accent); }
.sl-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--text-2); font-size: .9rem; }

/* Add server CTA */
.sl-add-cta {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    background: linear-gradient(135deg, rgba(0,255,170,.04) 0%, rgba(0,204,255,.04) 100%);
    border: 1px solid rgba(0,255,170,.15); border-radius: var(--radius);
    padding: 14px 20px; margin-bottom: 20px;
}
.sl-add-cta-text { font-size: .9rem; color: var(--text-2); }
.sl-add-cta-text strong { color: var(--text-1); }

@media (max-width: 700px) {
    .sl-podium { grid-template-columns: 1fr; }
    .sl-pod-1, .sl-pod-2, .sl-pod-3 { order: unset; }
    .sl-row-status { display: none; }
    .sl-row-desc { display: none; }
}
@media (max-width: 500px) {
    .sl-row-num { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   PUBLIC SERVER PAGE v2 — /s/:slug  (design listing communautaire)
   ═══════════════════════════════════════════════════════════════ */

/* ── Bannière hero ─────────────────────────────────────────── */
.sp2-banner {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.sp2-banner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,255,170,.08) 0%, rgba(0,204,255,.04) 50%, transparent 100%);
    pointer-events: none;
}
.sp2-banner-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.sp2-banner-left {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
    min-width: 260px;
}
.sp2-icon {
    font-size: 3.2rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.sp2-title-block { flex: 1; }
.sp2-header-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}
.sp2-game-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px;
    background: rgba(0,255,170,.12);
    color: var(--accent);
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sp2-rank-chip {
    display: inline-block;
    padding: 3px 12px;
    background: rgba(255,215,0,.08);
    color: #ffd700;
    border: 1px solid rgba(255,215,0,.2);
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.sp2-name {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 8px;
    word-break: break-word;
}
.sp2-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .9rem;
    font-weight: 600;
}
.sp2-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: sp2-pulse 2.5s infinite;
}
.sp2-dot-on  { background: #00ffaa; box-shadow: 0 0 8px #00ffaa; }
.sp2-dot-off { background: #666; animation: none; }
@keyframes sp2-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.sp2-status-txt  { color: var(--text-1); }
.sp2-offline-txt { color: var(--text-3); }
.sp2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.sp2-tag {
    padding: 2px 9px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: .75rem;
    color: var(--text-2);
}
.sp2-owner {
    font-size: .82rem;
    color: var(--text-3);
}
.sp2-owner strong { color: var(--text-2); }

/* ── Vote panel dans bannière ──────────────────────────────── */
.sp2-banner-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sp2-vote-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 24px;
    min-width: 120px;
    text-align: center;
}
.sp2-vote-num {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -.02em;
}
.sp2-vote-lbl {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.sp2-vote-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.sp2-vote-btn:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.sp2-vote-btn:disabled { cursor: not-allowed; }
.sp2-vote-done {
    background: rgba(0,255,170,.12);
    color: var(--accent);
    border: 1px solid rgba(0,255,170,.3);
}
.sp2-vote-hint {
    font-size: .72rem;
    color: var(--text-3);
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.sp2-breadcrumb {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 24px 0;
    font-size: .82rem;
    color: var(--text-3);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.sp2-breadcrumb a { color: var(--accent); text-decoration: none; }
.sp2-breadcrumb a:hover { text-decoration: underline; }

/* ── Body layout ──────────────────────────────────────────── */
.sp2-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 720px) {
    .sp2-wrap { grid-template-columns: 1fr; }
    .sp2-sidebar { order: -1; }
    .sp2-banner-inner { flex-direction: column; }
    .sp2-banner-right { width: 100%; }
    .sp2-vote-panel { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; gap: 10px; padding: 12px 16px; }
}

/* ── Cards ────────────────────────────────────────────────── */
.sp2-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.sp2-card:last-child { margin-bottom: 0; }
.sp2-card-ttl {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-2);
    margin-bottom: 14px;
}

/* Connexion */
.sp2-connect {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.sp2-addr {
    flex: 1;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1rem;
    color: var(--accent);
    word-break: break-all;
}
.sp2-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background .15s;
    flex-shrink: 0;
    color: var(--text-2);
}
.sp2-copy-btn:hover { background: var(--bg-hover); }
.sp2-note {
    margin-top: 10px;
    font-size: .8rem;
    color: var(--text-3);
}

/* Description */
.sp2-desc {
    font-size: .9rem;
    line-height: 1.75;
    color: var(--text-1);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Owner card */
.sp2-owner-card { border-color: rgba(0,255,170,.2); }
.sp2-owner-card p { font-size: .88rem; color: var(--text-2); }

/* Vote card (sidebar) */
.sp2-vote-card {
    text-align: center;
    border-color: rgba(0,255,170,.25);
    background: linear-gradient(135deg, rgba(0,255,170,.04), var(--bg-card));
}
.sp2-vote-big-num {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -.02em;
}
.sp2-vote-big-lbl {
    font-size: .78rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}
.sp2-vote-full {
    width: 100%;
    padding: 12px;
    font-size: .95rem;
}
.sp2-vote-cd {
    margin-top: 8px;
    font-size: .75rem;
    color: var(--text-3);
}

/* Liens */
.sp2-links { display: flex; flex-direction: column; gap: 8px; }
.sp2-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.sp2-link:hover { border-color: var(--accent); background: rgba(0,255,170,.05); }
.sp2-link span:nth-child(2) { flex: 1; font-weight: 500; }
.sp2-link span:last-child { color: var(--text-3); }

/* DL */
.sp2-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
}
.sp2-dl dt { font-size: .82rem; color: var(--text-3); }
.sp2-dl dd { font-size: .82rem; font-weight: 600; margin: 0; color: var(--text-1); }

/* CTA card */
.sp2-cta-card { text-align: center; }
.sp2-cta-card p { font-size: .82rem; color: var(--text-2); margin: 6px 0 12px; }
.sp2-cta-btn { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   PUBLIC SERVER PAGE v2 — /s/:slug  (design listing communautaire)
   ═══════════════════════════════════════════════════════════════ */

/* ── Bannière hero ─────────────────────────────────────────── */
.sp2-banner {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.sp2-banner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,255,170,.08) 0%, rgba(0,204,255,.04) 50%, transparent 100%);
    pointer-events: none;
}
.sp2-banner-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.sp2-banner-left {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
    min-width: 260px;
}
.sp2-icon {
    font-size: 3.2rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.sp2-title-block { flex: 1; }
.sp2-game-chip {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(0,255,170,.12);
    color: var(--accent);
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.sp2-name {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 8px;
    word-break: break-word;
}
.sp2-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .9rem;
    font-weight: 600;
}
.sp2-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: sp2-pulse 2.5s infinite;
}
.sp2-dot-on  { background: #00ffaa; box-shadow: 0 0 8px #00ffaa; }
.sp2-dot-off { background: #666; animation: none; }
@keyframes sp2-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.sp2-status-txt  { color: var(--text-1); }
.sp2-offline-txt { color: var(--text-3); }
.sp2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.sp2-tag {
    padding: 2px 9px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: .75rem;
    color: var(--text-2);
}
.sp2-owner {
    font-size: .82rem;
    color: var(--text-3);
}
.sp2-owner strong { color: var(--text-2); }

/* ── Vote panel dans bannière ──────────────────────────────── */
.sp2-banner-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sp2-vote-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 24px;
    min-width: 120px;
    text-align: center;
}
.sp2-vote-num {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -.02em;
}
.sp2-vote-lbl {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.sp2-vote-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.sp2-vote-btn:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.sp2-vote-btn:disabled { cursor: not-allowed; }
.sp2-vote-done {
    background: rgba(0,255,170,.12);
    color: var(--accent);
    border: 1px solid rgba(0,255,170,.3);
}
.sp2-vote-hint {
    font-size: .72rem;
    color: var(--text-3);
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.sp2-breadcrumb {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 24px 0;
    font-size: .82rem;
    color: var(--text-3);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.sp2-breadcrumb a { color: var(--accent); text-decoration: none; }
.sp2-breadcrumb a:hover { text-decoration: underline; }

/* ── Body layout ──────────────────────────────────────────── */
.sp2-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 720px) {
    .sp2-wrap { grid-template-columns: 1fr; }
    .sp2-sidebar { order: -1; }
    .sp2-banner-inner { flex-direction: column; }
    .sp2-banner-right { width: 100%; }
    .sp2-vote-panel { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; gap: 10px; padding: 12px 16px; }
}

/* ── Cards ────────────────────────────────────────────────── */
.sp2-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.sp2-card:last-child { margin-bottom: 0; }
.sp2-card-ttl {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-2);
    margin-bottom: 14px;
}

/* Connexion */
.sp2-connect {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.sp2-addr {
    flex: 1;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1rem;
    color: var(--accent);
    word-break: break-all;
}
.sp2-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background .15s;
    flex-shrink: 0;
    color: var(--text-2);
}
.sp2-copy-btn:hover { background: var(--bg-hover); }
.sp2-note {
    margin-top: 10px;
    font-size: .8rem;
    color: var(--text-3);
}

/* Description */
.sp2-desc {
    font-size: .9rem;
    line-height: 1.75;
    color: var(--text-1);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Owner card */
.sp2-owner-card { border-color: rgba(0,255,170,.2); }
.sp2-owner-card p { font-size: .88rem; color: var(--text-2); }

/* Vote card (sidebar) */
.sp2-vote-card {
    text-align: center;
    border-color: rgba(0,255,170,.25);
    background: linear-gradient(135deg, rgba(0,255,170,.04), var(--bg-card));
}
.sp2-vote-big-num {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -.02em;
}
.sp2-vote-big-lbl {
    font-size: .78rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}
.sp2-vote-full {
    width: 100%;
    padding: 12px;
    font-size: .95rem;
}
.sp2-vote-cd {
    margin-top: 8px;
    font-size: .75rem;
    color: var(--text-3);
}

/* Liens */
.sp2-links { display: flex; flex-direction: column; gap: 8px; }
.sp2-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.sp2-link:hover { border-color: var(--accent); background: rgba(0,255,170,.05); }
.sp2-link span:nth-child(2) { flex: 1; font-weight: 500; }
.sp2-link span:last-child { color: var(--text-3); }

/* DL */
.sp2-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
}
.sp2-dl dt { font-size: .82rem; color: var(--text-3); }
.sp2-dl dd { font-size: .82rem; font-weight: 600; margin: 0; color: var(--text-1); }

/* CTA card */
.sp2-cta-card { text-align: center; }
.sp2-cta-card p { font-size: .82rem; color: var(--text-2); margin: 6px 0 12px; }
.sp2-cta-btn { width: 100%; justify-content: center; }

/* ── Logo image dans bannière ──────────────────────────────── */
.sp2-logo-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.12);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

/* ── Bannière image de fond ────────────────────────────────── */
.sp2-banner-has-img {
    background-image: var(--sp2-banner-img) !important;
    background-size: cover !important;
    background-position: center !important;
}
.sp2-banner-has-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.3) 100%);
}

/* ── Modal page publique (Mes serveurs → annuaire) ─────────── */
#pp-modal-overlay {
    padding: 16px;
    box-sizing: border-box;
}
.pp-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    max-height: min(90vh, 760px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    animation: gs-in .12s ease;
    overflow: hidden;
}
.pp-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 12px;
    flex-shrink: 0;
}
.pp-modal-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.pp-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 1.1rem;
    padding: 4px 8px;
    line-height: 1;
    border-radius: var(--radius-sm);
}
.pp-modal-close:hover {
    color: var(--text);
    background: var(--bg-hover);
}
.pp-modal-body {
    padding: 0 20px 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.pp-field {
    margin-bottom: 16px;
}
.pp-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}
.pp-hint {
    font-weight: 400;
    color: var(--text-3);
    font-size: .75rem;
}
.pp-hint em {
    font-style: normal;
    color: var(--accent);
}
.pp-input,
.pp-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: .9rem;
    color: var(--text);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
}
.pp-textarea {
    resize: vertical;
    min-height: 80px;
}
.pp-input:focus,
.pp-textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.pp-field-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
@media (max-width: 520px) {
    .pp-field-half {
        grid-template-columns: 1fr;
    }
}
.pp-toggle-row {
    margin: 18px 0 12px;
    padding: 14px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.pp-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    margin: 0;
}
.pp-toggle-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.pp-toggle-text {
    flex: 1;
}
.pp-toggle-hint {
    display: block;
    margin-top: 8px;
    padding-left: 28px;
    font-size: .78rem;
    color: var(--text-3);
    line-height: 1.35;
}
.pp-link-row {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(110, 180, 255, .08);
    border: 1px solid rgba(110, 180, 255, .25);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    word-break: break-all;
}
.pp-link-row a {
    color: var(--accent);
    font-weight: 600;
}
.pp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-card);
}

/* ── Zones d'upload dans modal ─────────────────────────────── */
.pp-media-section {
    padding: 0 20px 8px;
}
.pp-media-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.pp-media-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
    background: var(--bg-hover);
}
.pp-media-zone:hover { border-color: #a78bfa; background: rgba(167,139,250,.06); }
.pp-media-zone-banner {
    flex: 1;
    width: auto;
    height: 90px;
}
.pp-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.pp-media-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-2);
}
.pp-media-hint {
    font-size: .65rem;
    color: var(--text-3);
    text-align: center;
}
.pp-media-upload-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   ADD-SERVER / EDIT EXTERNAL SERVER PAGE
   ═══════════════════════════════════════════════════════════════ */
.as-wrap {
    max-width: 740px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}
.as-header {
    margin-bottom: 28px;
}
.as-back {
    display: inline-block;
    color: var(--accent);
    font-size: .85rem;
    text-decoration: none;
    margin-bottom: 12px;
}
.as-back:hover { text-decoration: underline; }
.as-header h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.as-header p  { color: var(--text-2); font-size: .9rem; }
.as-form { display: flex; flex-direction: column; gap: 20px; }
.as-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.as-section-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-2);
    margin-bottom: 16px;
}
.as-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) { .as-grid-2 { grid-template-columns: 1fr; } }
.as-select {
    width: 100%;
    background: var(--bg-input, var(--bg-hover));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    color: var(--text-1);
    font-size: .88rem;
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
}
.as-select:focus { border-color: var(--accent); }
.as-optional {
    font-weight: 400;
    color: var(--text-3);
    font-size: .77rem;
    margin-left: 5px;
}
.req { color: #ff4466; }
.as-public-toggle { margin-top: 4px; }
.as-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
}
.as-toggle-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.as-toggle-hint { font-size: .78rem; color: var(--text-3); margin-top: 4px; padding-left: 26px; }
.as-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* Media zones */
.as-media-row { display: flex; gap: 12px; align-items: stretch; margin-top: 4px; }
.as-media-zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s;
    background: var(--bg-hover);
    flex-shrink: 0;
}
.as-media-zone:hover { border-color: var(--accent); }
.as-media-zone-wide { flex: 1; width: auto; }
.as-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
    color: var(--text-2);
    pointer-events: none;
    text-align: center;
    padding: 4px;
}
.as-media-img-sq  { width: 100%; height: 100%; object-fit: cover; }
.as-media-img-wide { width: 100%; height: 100%; object-fit: cover; }
.as-media-status {
    position: absolute;
    bottom: 4px; right: 4px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent);
}

/* Badges "Externe" dans la liste + page */
.sp2-ext-badge, .sl-ext-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(167,139,250,.15);
    color: #a78bfa;
    margin-left: 5px;
    vertical-align: middle;
}
/* Logo image dans les cards de liste */
.sl-card-logo {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
/* Séparateur de filtres */
.sl-filter-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    vertical-align: middle;
    align-self: center;
}

/* add-server media locked state */
.as-media-row-locked { opacity: .45; pointer-events: none; cursor: default; }
.as-media-notice { font-size: .85rem; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }

/* ── Discord OAuth liaison ────────────────────────────────────────────────── */
.btn-discord-link { display:inline-flex; align-items:center; gap:10px; background:#5865F2; color:#fff; border:none; border-radius:8px; padding:10px 20px; font-size:.95rem; font-weight:600; cursor:pointer; text-decoration:none; transition:background .2s; }
.btn-discord-link:hover { background:#4752c4; color:#fff; }
.discord-linked-box { display:flex; align-items:center; gap:12px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; padding:12px 16px; }
.discord-linked-icon { font-size:1.4rem; }
.discord-linked-name { font-weight:600; font-size:.95rem; }
.discord-linked-id { font-size:.8rem; color:var(--text-secondary); }


/* =========================================================================
   ENHANCEMENTS - SERVERS LIST (sl-*)
   ========================================================================= */

/* Amélioration de la carte Serveur */
.sl-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Ligne lumineuse en haut au survol */
.sl-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), #00ccff, transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.3s ease, transform 0.6s ease;
}

.sl-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 170, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 0 20px rgba(0, 255, 170, 0.05);
}

.sl-card:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Encadrement premium des icônes/logos */
.sl-card-icon, .sl-card-logo {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.sl-card:hover .sl-card-icon, 
.sl-card:hover .sl-card-logo {
    transform: scale(1.05);
    border-color: rgba(0, 255, 170, 0.3);
}

/* Glow sur les votes */
.sl-card-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 255, 170, 0.05);
    border: 1px solid rgba(0, 255, 170, 0.15);
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sl-card:hover .sl-card-votes {
    background: rgba(0, 255, 170, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.15);
}

.sl-vote-num {
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.3);
}

/* Chips de filtre plus modernes */
.sl-game-chip {
    backdrop-filter: blur(4px);
}

.sl-game-chip.active {
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.2);
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.4);
}

/* Badge externe amélioré */
.sl-ext-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Bouton Voir au survol */
.sl-card-cta {
    transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.sl-card:hover .sl-card-cta {
    transform: translateX(4px);
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.4);
}


/* =========================================================================
   LIVE STATUS BADGE ON LIST
   ========================================================================= */
.sl-card-live-status {
    font-size: 0.75rem;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    min-height: 14px;
}

.sl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.sl-dot.online {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

.sl-dot.offline {
    background: #ED4245;
}

.sl-dot.loading {
    background: #FEE75C;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}


/* =========================================================================
   ENHANCEMENTS - SERVER PAGE (sp2-*)
   ========================================================================= */

/* Banner glow effect */
.sp2-banner {
    position: relative;
    border-bottom: 1px solid rgba(0, 255, 170, 0.2);
}

.sp2-banner::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), #00ccff, transparent);
    box-shadow: 0 0 10px var(--accent);
}

.sp2-icon {
    border: 1px solid rgba(0, 255, 170, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.1);
    background: rgba(0, 255, 170, 0.05);
    border-radius: 16px;
}

/* Connect box redesign */
.sp2-connect {
    background: #0a0a14;
    border: 1px solid rgba(0, 255, 170, 0.3);
    border-radius: 8px;
    padding: 2px;
    display: flex;
    justify-content: space-between;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.sp2-connect:hover {
    border-color: var(--accent);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 0 15px rgba(0, 255, 170, 0.15);
}

.sp2-addr {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    color: #fff;
    padding: 10px 16px;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
}

.sp2-copy-btn {
    background: rgba(0, 255, 170, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 170, 0.2);
    transition: all 0.2s ease;
}

.sp2-copy-btn:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 10px var(--accent);
}

/* Sidebar Vote Card */
.sp2-vote-card {
    text-align: center;
    background: linear-gradient(180deg, rgba(0,255,170,0.05) 0%, transparent 100%);
    border: 1px solid rgba(0, 255, 170, 0.2);
}

.sp2-vote-big-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 15px rgba(0, 255, 170, 0.3);
    line-height: 1;
    margin-bottom: 5px;
}

.sp2-vote-full {
    width: 100%;
    margin-top: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 255, 170, 0.2);
}

.sp2-vote-full:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 170, 0.4);
}

.sp2-link {
    transition: all 0.2s ease;
    border: 1px solid var(--border);
}

.sp2-link:hover {
    border-color: var(--accent);
    background: rgba(0, 255, 170, 0.05);
    transform: translateX(4px);
}

/* Animation on dot */
.sp2-dot-on {
    box-shadow: 0 0 8px var(--accent);
    animation: sp2-pulse 2s infinite;
}

@keyframes sp2-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 255, 170, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0); }
}

/* =========================================================================
   PREMIUM ENHANCEMENTS - SERVER PAGE (sp2-*)
   ========================================================================= */

/* Hero Banner */
.sp2-banner {
    background: linear-gradient(180deg, #0a0a14 0%, var(--bg-body) 100%);
    border-bottom: 1px solid rgba(0, 255, 170, 0.15);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8);
}

.sp2-banner-bg {
    background: radial-gradient(circle at top right, rgba(0, 255, 170, 0.1), transparent 50%),
                radial-gradient(circle at bottom left, rgba(0, 204, 255, 0.05), transparent 50%);
}

.sp2-banner-inner {
    padding: 60px 24px 40px;
}

.sp2-name {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -1px;
    background: linear-gradient(to right, #fff, #c0c0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
    margin: 8px 0 16px;
}

.sp2-icon {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 170, 0.05);
    border: 1px solid rgba(0, 255, 170, 0.3);
    box-shadow: inset 0 0 20px rgba(0, 255, 170, 0.1), 0 0 30px rgba(0, 255, 170, 0.1);
    border-radius: 20px;
}

.sp2-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

/* Cards Glassmorphism */
.sp2-card {
    background: rgba(15, 15, 25, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 24px;
    transition: transform 0.3s, border-color 0.3s;
}

.sp2-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.sp2-card-ttl {
    font-size: 0.9rem;
    color: #fff;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Connexion Box (Terminal look) */
.sp2-connect {
    background: #000;
    border: 1px solid #1e1e35;
    border-radius: 12px;
    padding: 4px;
}

.sp2-connect:hover {
    border-color: var(--accent);
}

.sp2-addr {
    color: var(--accent);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.4);
}

/* Vote Panel Banner */
.sp2-vote-panel {
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 20px;
    padding: 24px 32px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.sp2-vote-num {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #00ffaa, #00ccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
}

/* Sidebar Vote Card */
.sp2-vote-card {
    background: linear-gradient(180deg, rgba(0,255,170,0.08) 0%, rgba(10,10,20,0.8) 100%);
    border: 1px solid rgba(0, 255, 170, 0.3);
    position: relative;
    overflow: hidden;
}

.sp2-vote-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(0,255,170,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.sp2-vote-big-num {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #00ffaa, #00ccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sp2-vote-btn {
    background: linear-gradient(135deg, #00ffaa 0%, #00ccff 100%);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(0, 255, 170, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp2-vote-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 255, 170, 0.5);
}

.sp2-vote-btn:disabled {
    background: #1e1e35;
    color: #666;
    box-shadow: none;
}

/* Description Text */
.sp2-desc {
    color: #c0c0e0;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Tags */
.sp2-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0f0;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.sp2-tag:hover {
    background: rgba(0, 255, 170, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Vote countdown timer ───────────────────────────────── */
.sp2-vote-month {
    font-size: .78rem; color: var(--accent); font-weight: 600;
    background: rgba(0,255,170,.08); border: 1px solid rgba(0,255,170,.15);
    border-radius: 8px; padding: 3px 10px; margin-bottom: 4px;
}
.sp2-vote-countdown {
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
    text-align: center; margin-top: 6px;
}
.sp2-vote-cd-label { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.sp2-vote-cd-timer {
    font-size: 1.6rem; font-weight: 800; font-family: monospace;
    color: var(--text-1); letter-spacing: .04em;
    background: linear-gradient(135deg, #00ffaa, #00ccff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sp2-vote-timer {
    font-size: .8rem; font-weight: 700; color: var(--text-3);
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 8px; padding: 3px 10px; display: inline-block;
}

/* ── Serveurs similaires ─────────────────────────────────── */
.sp2-similar {
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    padding: 32px 20px;
}
.sp2-similar-inner { max-width: 1100px; margin: 0 auto; }
.sp2-similar-ttl {
    font-size: 1rem; font-weight: 700; margin-bottom: 16px;
    color: var(--text-1);
}
.sp2-similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.sp2-sim-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 12px;
    text-decoration: none; color: var(--text-1);
    transition: border-color .15s;
}
.sp2-sim-card:hover { border-color: var(--accent); }
.sp2-sim-logo {
    width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); font-size: 1.3rem;
}
.sp2-sim-logo img { width: 100%; height: 100%; object-fit: cover; }
.sp2-sim-info { flex: 1; min-width: 0; }
.sp2-sim-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2-sim-game { font-size: .72rem; color: var(--text-3); }
.sp2-sim-votes { font-size: .8rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }


/* ── Connect bar (sp2) ───────────────────────────────────── */
.sp2-connect-bar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
}
.sp2-connect-bar-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.sp2-connect-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sp2-connect-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 600; }
.sp2-addr-big {
    font-family: monospace; font-size: 1.05rem; font-weight: 700;
    color: var(--text-1); background: none; padding: 0;
}
.sp2-connect-actions { display: flex; gap: 8px; align-items: center; }
.sp2-copy-big {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-hover); border: 1px solid var(--border);
    color: var(--text-1); border-radius: 8px; padding: 8px 16px;
    font-size: .85rem; font-weight: 600; cursor: pointer; transition: border-color .15s;
}
.sp2-copy-big:hover { border-color: var(--accent); }
.sp2-join-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent); color: #000;
    border-radius: 8px; padding: 8px 16px;
    font-size: .85rem; font-weight: 700; text-decoration: none; transition: opacity .15s;
}
.sp2-join-btn:hover { opacity: .85; }

/* ── Vote stats grid ─────────────────────────────────────── */
.sp2-vote-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 16px;
}
.sp2-vs-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 10px; text-align: center;
}
.sp2-vs-val { font-size: 1.5rem; font-weight: 800; color: var(--text-1); }
.sp2-vs-lbl { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.sp2-vs-total .sp2-vs-val { color: var(--accent); }
@media (max-width: 640px) { .sp2-vote-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Player list ─────────────────────────────────────────── */
.sp2-player-list {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.sp2-player {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-hover); border-radius: 6px; padding: 4px 10px;
    font-size: .8rem; color: var(--text-1);
}
.sp2-player-avatar {
    width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated;
}
.sp2-player-bar {
    height: 8px; background: var(--bg-hover); border-radius: 4px; overflow: hidden;
    margin-top: 10px;
}
.sp2-player-bar-fill {
    height: 100%; width: var(--pct, 50%);
    background: linear-gradient(90deg, var(--accent), #00ccff);
    border-radius: 4px; transition: width .4s;
}

/* ── Offline card ────────────────────────────────────────── */
.sp2-offline-card {
    text-align: center; padding: 32px 20px !important;
}
.sp2-offline-icon { font-size: 2.5rem; margin-bottom: 10px; }
.sp2-offline-msg { color: var(--text-3); font-size: .95rem; }

/* ── Tags big ────────────────────────────────────────────── */
.sp2-tags-big { display: flex; flex-wrap: wrap; gap: 8px; }
.sp2-tag-big {
    display: inline-block; padding: 6px 14px;
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 20px; font-size: .82rem; color: var(--text-2);
    text-decoration: none; transition: border-color .15s, color .15s;
}
.sp2-tag-big:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sidebar connect ─────────────────────────────────────── */
.sp2-join-sidebar {
    display: block; margin-top: 10px; text-align: center;
    background: rgba(0,255,170,.1); border: 1px solid rgba(0,255,170,.25);
    color: var(--accent); border-radius: 8px; padding: 8px;
    font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .15s;
}
.sp2-join-sidebar:hover { background: rgba(0,255,170,.18); }

/* ── Rank chip ───────────────────────────────────────────── */
.sp2-rank-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.3);
    color: #ffd700; border-radius: 20px; padding: 3px 10px;
    font-size: .72rem; font-weight: 700;
}

/* ── sp2 misc ────────────────────────────────────────────── */
.sp2-addr-hero {
    font-family: monospace; font-size: .85rem; background: rgba(255,255,255,.08);
    border-radius: 6px; padding: 2px 8px; color: var(--text-1);
}
.sp2-sep { color: var(--text-3); margin: 0 4px; }

/* ── Server-list missing classes ─────────────────────────── */
.sl-chip-count {
    font-size: .65rem; font-weight: 700; background: var(--bg-hover);
    border-radius: 10px; padding: 1px 6px; color: var(--text-3); margin-left: 4px;
}
.sl-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 34px; padding: 0 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .85rem; color: var(--text-2);
    text-decoration: none; transition: border-color .15s;
}
.sl-page-btn:hover { border-color: var(--accent); color: var(--text-1); }
.sl-page-btn.active { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.sl-pod-status {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; margin-top: 6px;
}
.sl-pod-status.online { color: var(--accent); }
.sl-pod-status.offline { color: var(--text-3); }
.sl-pod-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sl-pod-tag {
    font-size: .65rem; padding: 2px 7px; border-radius: 10px;
    background: var(--bg-hover); color: var(--text-3);
}
.sl-row-top {
    display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0;
}
.sl-row-actions {
    display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.sl-row-btn-view, .sl-row-btn-copy, .sl-row-btn-discord {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 600; border-radius: 6px;
    padding: 4px 10px; text-decoration: none; transition: opacity .15s;
    cursor: pointer; border: none;
}
.sl-row-btn-view {
    background: var(--accent); color: #000;
}
.sl-row-btn-copy {
    background: var(--bg-hover); border: 1px solid var(--border);
    color: var(--text-2);
}
.sl-row-btn-discord {
    background: rgba(88,101,242,.15); border: 1px solid rgba(88,101,242,.3);
    color: #7289da;
}
.sl-row-btn-view:hover, .sl-row-btn-copy:hover, .sl-row-btn-discord:hover { opacity: .8; }
.sl-row-addr {
    font-size: .72rem; font-family: monospace; color: var(--text-3);
    background: var(--bg-hover); border-radius: 4px; padding: 1px 6px;
    margin-left: 4px;
}
.sl-row-owner { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.sl-stat-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.online-txt { color: var(--accent); font-size: .72rem; font-weight: 600; }
.offline-txt { color: var(--text-3); font-size: .72rem; }

/* ── sp2 layout & link helpers ───────────────────────────── */
.sp2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sp2-link-icon { font-size: 1.1rem; }
.sp2-link-arrow { margin-left: auto; color: var(--text-3); }

/* ── sl list helpers ─────────────────────────────────────── */
.sl-players-txt { font-size: .7rem; color: var(--accent); font-weight: 600; margin-top: 2px; }
.sl-meta-sep { color: var(--text-3); margin: 0 3px; }
.sl-pod-status-txt { font-size: .72rem; margin-left: 4px; }


/* ════════════════════════════════════════════════════════════
   ANNUAIRE v3 — HERO
   ════════════════════════════════════════════════════════════ */
.sl-hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 48px 24px 40px;
}
.sl-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 120% at 30% -20%, rgba(0,255,170,.07) 0%, transparent 60%),
                radial-gradient(ellipse 50% 80% at 80% 110%, rgba(0,204,255,.05) 0%, transparent 60%);
    pointer-events: none;
}
.sl-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,170,.3), transparent);
}
.sl-hero-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.sl-hero-left { flex: 1; min-width: 280px; }
.sl-hero-eyebrow {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--accent); margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.sl-hero-eyebrow::before {
    content: ''; display: inline-block;
    width: 20px; height: 2px; background: var(--accent); border-radius: 2px;
}
.sl-hero-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800; line-height: 1.2;
    color: var(--text-1); margin: 0 0 12px;
}
.sl-hero-accent {
    display: inline;
    background: linear-gradient(135deg, #00ffaa, #00ccff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    isolation: isolate;
}
.sl-hero-sub {
    font-size: .95rem; color: var(--text-3); margin: 0 0 20px;
}
.sl-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    box-sizing: border-box;
    background-color: var(--accent);
    background-image: none;
    color: #0a0a12;
    -webkit-text-fill-color: #0a0a12;
    font-weight: 700; font-size: .9rem;
    border-radius: 10px; padding: 10px 20px; text-decoration: none;
    transition: opacity .15s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.sl-hero-btn:hover { opacity: .85; transform: translateY(-1px); }
[data-theme="light"] .sl-hero-btn {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.sl-hero-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    flex-shrink: 0; width: 300px;
}
.sl-hstat {
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.sl-hstat-accent { border-color: rgba(0,255,170,.25); background: rgba(0,255,170,.04); }
.sl-hstat-live   { border-color: rgba(0,255,170,.3);  background: rgba(0,255,170,.06); }
.sl-hstat-val { font-size: 1.6rem; font-weight: 800; color: var(--text-1); line-height: 1; }
.sl-hstat-accent .sl-hstat-val,
.sl-hstat-live .sl-hstat-val   { color: var(--accent); }
.sl-hstat-lbl { font-size: .7rem; color: var(--text-3); font-weight: 600; }

@media (max-width: 700px) {
    .sl-hero-stats { width: 100%; grid-template-columns: repeat(4, 1fr); }
    .sl-hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ════════════════════════════════════════════════════════════
   ANNUAIRE v3 — FEATURED CARD
   ════════════════════════════════════════════════════════════ */
.sl-featured {
    position: relative; overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin: 16px 0;
    transition: border-color .2s;
}
.sl-featured:hover { border-color: rgba(0,255,170,.4); }
.sl-featured-overlay {
    position: absolute; inset: 0;
    background: var(--feat-img, none) center/cover no-repeat;
    filter: blur(12px) brightness(.25) saturate(1.5);
    transform: scale(1.12);
}
.sl-featured:not([style]) .sl-featured-overlay,
.sl-featured[style=""] .sl-featured-overlay { display: none; }
.sl-featured::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--bg-card) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
    z-index: 1; pointer-events: none;
}
.sl-featured-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 20px;
    padding: 20px 24px; flex-wrap: wrap;
}
.sl-featured-label {
    position: absolute; top: 12px; left: 24px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #ffd700;
    background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.25);
    border-radius: 20px; padding: 3px 10px;
}
.sl-featured-body { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; margin-top: 20px; }
.sl-featured-logo-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sl-featured-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.sl-featured-icon { width: 64px; height: 64px; border-radius: 12px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.sl-featured-status { display: flex; align-items: center; gap: 4px; font-size: .7rem; }
.sl-featured-info { flex: 1; min-width: 0; }
.sl-featured-name { font-size: 1.3rem; font-weight: 800; color: var(--text-1); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-featured-game { font-size: .78rem; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.sl-featured-desc { font-size: .83rem; color: var(--text-2); line-height: 1.5; }
.sl-featured-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sl-featured-tag {
    font-size: .65rem; padding: 2px 8px; border-radius: 10px;
    background: rgba(255,255,255,.06); color: var(--text-3); border: 1px solid var(--border);
}
.sl-featured-right {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex-shrink: 0; text-align: center; min-width: 120px;
}
.sl-featured-votes-big {
    font-size: 2rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #00ffaa, #00ccff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sl-featured-votes-lbl { font-size: .75rem; color: var(--text-3); margin-top: -4px; }
.sl-featured-week { font-size: .72rem; color: var(--accent); font-weight: 700; background: rgba(0,255,170,.1); border-radius: 6px; padding: 2px 8px; }
.sl-featured-cta {
    display: inline-block; background: var(--accent); color: #000;
    font-weight: 700; font-size: .82rem; border-radius: 8px;
    padding: 8px 16px; text-decoration: none; transition: opacity .15s;
    white-space: nowrap;
}
.sl-featured-cta:hover { opacity: .85; }
.sl-featured-copy {
    background: var(--bg-hover); border: 1px solid var(--border);
    color: var(--text-2); border-radius: 6px; padding: 5px 10px;
    font-size: .72rem; font-family: monospace; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 140px; transition: border-color .15s;
}
.sl-featured-copy:hover, .sl-featured-copy.copied { border-color: var(--accent); color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   ANNUAIRE v3 — BADGES
   ════════════════════════════════════════════════════════════ */
.sl-badge {
    display: inline-flex; align-items: center;
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; border-radius: 10px; padding: 2px 7px;
    line-height: 1.5; white-space: nowrap;
}
.sl-badge-new    { background: rgba(0,204,255,.15); border: 1px solid rgba(0,204,255,.3); color: #00ccff; }
.sl-badge-trend  { background: rgba(255,80,0,.15);  border: 1px solid rgba(255,80,0,.3);  color: #ff7040; }
.sl-badge-hot    { background: rgba(255,215,0,.15); border: 1px solid rgba(255,215,0,.3); color: #ffd700; }
.sl-badge-active { background: rgba(0,255,170,.10); border: 1px solid rgba(0,255,170,.25); color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   ANNUAIRE v3 — ROW ENHANCEMENTS
   ════════════════════════════════════════════════════════════ */
.sl-ranking-header {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-3);
    padding: 0 0 10px; border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.sl-row {
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.sl-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
    border-color: rgba(0,255,170,.25);
}
.sl-row-name-wrap {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sl-row-tags-line {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.sl-row-vote-week {
    font-size: .62rem; color: var(--accent); font-weight: 700;
    background: rgba(0,255,170,.08); border-radius: 4px; padding: 1px 5px;
    margin-top: 2px;
}
.sl-pod-week {
    font-size: .62rem; color: var(--accent); background: rgba(0,255,170,.08);
    border-radius: 4px; padding: 1px 5px; font-weight: 600;
}
.sl-meta-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; color: #ff7040;
    background: rgba(255,80,0,.1); border: 1px solid rgba(255,80,0,.2);
    border-radius: 20px; padding: 2px 10px;
}
.sl-empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
.sl-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.sl-empty h3 { font-size: 1.1rem; color: var(--text-1); margin-bottom: 8px; }

/* ════════════════════════════════════════════════════════════
   ANNUAIRE v3 — ANIMATED DOTS
   ════════════════════════════════════════════════════════════ */
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,170,.5); }
    60%       { box-shadow: 0 0 0 5px rgba(0,255,170,0); }
}
.sl-dot.online {
    animation: dot-pulse 2s ease-in-out infinite;
}
.sp2-dot-on {
    animation: dot-pulse 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   ANNUAIRE v3 — VOTE POP ANIMATION
   ════════════════════════════════════════════════════════════ */
@keyframes vote-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); color: var(--accent); }
    100% { transform: scale(1); }
}
.vote-pop { animation: vote-pop .4s cubic-bezier(.36,.07,.19,.97); }

@keyframes shimmer-btn {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.sl-row-vote-btn:not(.voted):hover {
    background: linear-gradient(90deg, var(--accent) 0%, #00ffdd 40%, #00ccff 60%, var(--accent) 100%);
    background-size: 200% auto;
    animation: shimmer-btn .7s linear;
    color: #000;
}

/* ════════════════════════════════════════════════════════════
   SERVER PAGE v2 — SPARKLINE
   ════════════════════════════════════════════════════════════ */
.sp2-sparkline-wrap {
    border-top: 1px solid var(--border);
    margin-top: 14px; padding-top: 12px;
}
.sp2-spark-svg {
    width: 100%; height: 38px; display: block;
    overflow: visible;
}
.sp2-sparkline-label {
    font-size: .65rem; color: var(--text-3); text-align: right;
    margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}

/* ════════════════════════════════════════════════════════════
   SERVER PAGE v2 — VOTE PROGRESS
   ════════════════════════════════════════════════════════════ */
.sp2-vote-progress-wrap { margin: 8px 0; }
.sp2-vote-progress-bar {
    height: 6px; background: var(--bg-hover); border-radius: 4px; overflow: hidden;
}
.sp2-vote-progress-fill {
    height: 100%; width: var(--pct, 0%);
    background: linear-gradient(90deg, var(--accent), #00ccff);
    border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1);
}
.sp2-vote-progress-lbl {
    font-size: .68rem; color: var(--text-3); text-align: right; margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════
   SERVER PAGE v2 — SHARE
   ════════════════════════════════════════════════════════════ */
.sp2-share-row {
    display: flex; gap: 8px; justify-content: center; margin-top: 8px;
}
.sp2-share-btn {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--bg-hover); border: 1px solid var(--border);
    color: var(--text-2); font-size: .95rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s;
}
.sp2-share-btn:hover { border-color: var(--accent); color: var(--accent); }
.sp2-share-card { }
.sp2-share-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sp2-share-big {
    display: block; width: 100%; text-align: center;
    padding: 8px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
    background: var(--bg-hover); border: 1px solid var(--border);
    color: var(--text-1); cursor: pointer; transition: border-color .15s;
}
.sp2-share-big:hover { border-color: var(--accent); color: var(--accent); }
.sp2-share-discord { }
.sp2-share-big.copied { border-color: var(--accent); color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   SERVER PAGE v2 — STICKY VOTE (mobile)
   ════════════════════════════════════════════════════════════ */
.sp2-sticky-vote {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--bg-card); border-top: 1px solid var(--border);
    padding: 10px 16px;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    display: none;
}
.sp2-sticky-vote.visible { transform: translateY(0); }
@media (max-width: 760px) { .sp2-sticky-vote { display: block; } }
.sp2-sticky-inner {
    max-width: 600px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sp2-sticky-name {
    font-weight: 700; font-size: .9rem; color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp2-sticky-btn {
    flex-shrink: 0;
    background: var(--accent); color: #000;
    font-weight: 800; font-size: .9rem;
    border-radius: 8px; padding: 10px 20px;
    border: none; cursor: pointer; transition: opacity .15s;
}
.sp2-sticky-btn:hover { opacity: .85; }

/* ════════════════════════════════════════════════════════════
   SERVER PAGE v2 — PLAYER BAR + PCT
   ════════════════════════════════════════════════════════════ */
.sp2-player-pct {
    font-size: .72rem; color: var(--accent); font-weight: 600;
    background: rgba(0,255,170,.1); border-radius: 6px; padding: 2px 8px;
    margin-left: 8px; vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   VPS — Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── Boutique VPS (page /vps) ──────────────────────────────────── */
.vps-wrap.vps-page { max-width: 1120px; margin: 0 auto; padding: 96px 20px 96px; }

/* Hero */
.vps-hero--premium {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    padding: 44px 28px 48px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0, 255, 170, 0.14), transparent 55%),
        linear-gradient(165deg, rgba(0, 204, 255, 0.06) 0%, transparent 42%),
        var(--bg-card);
    overflow: hidden;
}
.vps-hero-glow {
    pointer-events: none;
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(closest-side, rgba(0, 255, 170, 0.09), transparent 70%);
    opacity: 0.9;
}
.vps-hero-inner { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; }
.vps-hero--premium .section-badge { margin-bottom: 18px; }
.vps-hero--premium h1 {
    font-size: clamp(2rem, 4.8vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 14px;
    line-height: 1.12;
    color: var(--text);
}
.vps-hero-lead {
    margin: 0 auto;
    color: var(--text-2);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 34rem;
}
.vps-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.vps-hero-trust li {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .vps-hero-trust li { background: rgba(255, 255, 255, 0.45); }

.vps-offers-anchor { height: 0; scroll-margin-top: 88px; }

/* Onglets gammes */
.vps-gamme-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.vps-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 148px;
    flex: 1 1 148px;
    max-width: 220px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.vps-tab:hover { border-color: var(--border-bright); color: var(--text); }
.vps-tab.active {
    border-color: rgba(0, 255, 170, 0.45);
    color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 0 1px rgba(0, 255, 170, 0.12);
}
.vps-tab-emoji { font-size: 1.15rem; line-height: 1; }
.vps-tab-label { font-size: 1rem; letter-spacing: -0.02em; }
.vps-tab-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}
.vps-tab.active .vps-tab-badge { opacity: 1; }

button.vps-tab {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    margin: 0;
    line-height: 1.25;
    text-align: center;
}

.vps-panels { margin-bottom: 8px; }

.vps-gamme-section[hidden] { display: none !important; }
.vps-gamme-section:not([hidden]) { display: block; animation: vpsPanelIn 0.38s var(--ease); }
@keyframes vpsPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.vps-gamme-intro { text-align: center; margin-bottom: 28px; max-width: 36rem; margin-left: auto; margin-right: auto; }
.vps-gamme-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
}
.vps-gamme-desc { margin: 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }

.vps-empty-gamme {
    text-align: center;
    padding: 40px 24px;
    color: var(--text-3);
    font-size: 0.92rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.vps-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.vps-plan-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.vps-plan-card--cx { border-top: 3px solid #22c55e; }
.vps-plan-card--cpx { border-top: 3px solid #f59e0b; }
.vps-plan-card--ccx { border-top: 3px solid #fb7185; }

.vps-plan-card:hover {
    border-color: rgba(0, 255, 170, 0.28);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 0 40px rgba(0, 255, 170, 0.06);
}

.vps-plan-top { padding: 22px 22px 18px; }
.vps-plan-header { margin: 0; }
.vps-plan-name {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 6px;
}
.vps-plan-tagline { font-size: 0.82rem; color: var(--text-3); margin: 0; line-height: 1.4; }

.vps-plan-price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 16px;
}
.vps-price-amount {
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
    line-height: 1;
}
.vps-price-currency { font-size: 0.55em; margin-left: 2px; opacity: 0.85; }
.vps-price-period { font-size: 0.82rem; font-weight: 600; color: var(--text-3); text-transform: lowercase; }

.vps-price-ht { font-size: .75rem; color: var(--text-3); }

.vps-plan-specs {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .vps-plan-specs { background: rgba(0, 0, 0, 0.03); }

.vps-plan-specs li {
    font-size: 0.86rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .vps-plan-specs li { border-bottom-color: rgba(0, 0, 0, 0.06); }
.vps-plan-specs li:last-child { border-bottom: none; padding-bottom: 2px; }
.spec-icon {
    font-size: 0.95rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.95;
}

.vps-order-btn {
    align-self: stretch;
    margin: 18px 20px 22px;
    width: auto;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.vps-plan-card .btn.vps-order-btn { justify-content: center; }

/* Section “Pourquoi” + ancienne grille (compat) */
.vps-why { margin-top: 64px; padding-top: 52px; border-top: 1px solid var(--border); }
.vps-why-title {
    text-align: center;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    color: var(--text);
}
.vps-why-sub {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 36rem;
    font-size: 0.92rem;
    color: var(--text-3);
    line-height: 1.55;
}

.vps-features--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.vps-feature-card {
    padding: 22px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-2);
    transition: border-color 0.2s ease;
}
.vps-feature-card:hover { border-color: var(--border-bright); }
.vps-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 12px;
    font-size: 1.25rem;
    background: rgba(0, 255, 170, 0.08);
    border: 1px solid rgba(0, 255, 170, 0.12);
}
.vps-feature-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}
.vps-feature-card p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-2);
    line-height: 1.55;
}

/* Ancienne grille .vps-feature (autres pages si utilisée) */
.vps-features:not(.vps-features--grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}
.vps-feature { display: flex; gap: 16px; align-items: flex-start; }
.vps-feature > span { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.vps-feature strong { font-size: .95rem; display: block; margin-bottom: 4px; }
.vps-feature p { font-size: .82rem; color: var(--text-2); margin: 0; line-height: 1.6; }

.vps-page-cta {
    margin-top: 48px;
    padding: 28px 24px;
    text-align: center;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(0, 255, 170, 0.06), transparent 55%), var(--bg-card);
}
.vps-page-cta-text { margin: 0 0 18px; font-size: 0.92rem; color: var(--text-2); }
.vps-page-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* ── Commande ─────────────────────────────────────────────────── */
.order-wrap { max-width: 960px; margin: 0 auto; padding: 100px 24px 80px; }
.order-back { margin-bottom: 24px; }
.order-back a { color: var(--text-2); text-decoration: none; font-size: .9rem; transition: color .2s; }
.order-back a:hover { color: var(--accent); }

.order-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.order-layout h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 28px; }
.order-form-col { min-width: 0; }
.order-summary-col { min-width: 0; }
.order-page-intro { margin: -6px 0 22px; font-size: .95rem; color: var(--text-2); line-height: 1.55; max-width: 38rem; }

.os-grid, .dc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.os-option, .dc-option {
    display: flex; align-items: center; gap: 10px;
    min-height: 46px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--bg-2); border: 1px solid var(--border);
    cursor: pointer; font-size: .85rem; color: var(--text-2);
    transition: border-color .2s, background .2s, color .2s;
}
.os-option input, .dc-option input { display: none; }
.os-option:hover, .dc-option:hover { border-color: var(--border-bright); color: var(--text); }
.os-option.checked, .dc-option.checked { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

.order-summary {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; position: sticky; top: 100px;
}
.summary-title { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); margin-bottom: 16px; }
.summary-plan-name { font-size: 1.3rem; font-weight: 700; }
.summary-plan-tag { font-size: .82rem; color: var(--text-2); margin-bottom: 20px; }
.summary-specs { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 7px; }
.summary-specs li { font-size: .85rem; color: var(--text-2); }
.summary-price { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }
.summary-price-ttc { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }
.summary-price-ht { font-size: .8rem; color: var(--text-3); }
.summary-note { font-size: .75rem; color: var(--text-3); margin-top: 10px; }

.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--text-2); }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.checkbox-label a { color: var(--accent); }

.btn-full { width: 100%; }
.back-link { display: inline-block; font-size: .82rem; color: var(--text-2); text-decoration: none; margin-bottom: 6px; }
.back-link:hover { color: var(--accent); }

/* ── Liste VPS client ─────────────────────────────────────────── */
.vps-list { display: flex; flex-direction: column; gap: 16px; }

.vps-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 24px;
    transition: border-color .2s;
}
.vps-card:hover { border-color: var(--border-bright); }

.vps-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vps-card-name { font-size: 1rem; font-weight: 600; }
.vps-card-specs { display: flex; flex-wrap: wrap; gap: 16px; font-size: .84rem; color: var(--text-2); margin-bottom: 10px; }
.vps-card-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; color: var(--text-3); margin-bottom: 14px; }
.vps-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vps-card-actions .btn { border-radius: var(--radius-sm); }

.vps-page-head { margin-bottom: 28px; }
.vps-page-head-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
.vps-page-title { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; color: var(--text); }

.vps-list-header { align-items: flex-end; }
.vps-list-header h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.vps-list-count { font-weight: 600; color: var(--text-3); font-size: 0.95em; }
.vps-list-lead { margin: 0; font-size: 0.88rem; color: var(--text-3); line-height: 1.45; max-width: 42rem; }

.vps-card-title-block { min-width: 0; }
.vps-ip-sep { color: var(--text-3); margin: 0 4px; }
.vps-ip-code { color: var(--accent); font-size: 0.9em; }
.vps-ip-pending { color: var(--text-3); }

.vps-spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-2);
}
.vps-spec-ic { font-size: 0.9em; opacity: 0.92; }

.vps-empty.empty-state { border-style: solid; }

/* ── Gestion VPS ──────────────────────────────────────────────── */
.vps-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px; margin-top: 8px;
}

.vps-manage-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    min-width: 0;
}
.vps-manage-card-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--text-3); margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between;
}

.vps-info-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vps-info-table td { padding: 9px 0; border-bottom: 1px solid var(--border); }
.vps-info-table td:first-child { color: var(--text-3); width: 140px; }
.vps-info-table td:last-child { color: var(--text); }
.vps-info-table tr:last-child td { border-bottom: none; }

.vps-ssh-block { display: flex; flex-direction: column; gap: 12px; }
.vps-ssh-row { display: flex; align-items: center; gap: 10px; font-size: .88rem; flex-wrap: wrap; }
.vps-ssh-label { color: var(--text-3); min-width: 110px; }
.vps-ssh-val { font-family: var(--font-mono); color: var(--text); font-size: .85rem; }
.vps-ssh-cmd {
    background: var(--bg-2); border-radius: var(--radius-xs);
    padding: 10px 14px; margin-top: 4px;
}
.vps-ssh-cmd code { font-family: var(--font-mono); font-size: .85rem; color: var(--accent); }

.btn-copy {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px 12px;
    font-size: .75rem; color: var(--text-2); cursor: pointer;
    font-family: var(--font); transition: border-color .2s, color .2s;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }

.vps-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.vps-actions-grid .btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.vps-actions-grid .vps-console-btn {
    grid-column: 1 / -1;
}
.vps-action-btn--stop:hover {
    border-color: rgba(255, 68, 102, 0.45);
    color: #ff8899;
}

.vps-reinstall-section { border-top: 1px solid var(--border); padding-top: 20px; }
.vps-reinstall-label { font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.vps-reinstall-warn { font-size: .8rem; color: var(--warning); margin-bottom: 12px; }
.vps-reinstall-form { display: flex; gap: 8px; align-items: center; }
.vps-reinstall-form select {
    flex: 1; background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 12px;
    color: var(--text); font-family: var(--font); font-size: .85rem;
}
.vps-reinstall-btn { white-space: nowrap; cursor: pointer; }

.vps-metrics-card { grid-column: span 2; }
.vps-metrics-range { display: flex; gap: 6px; }
.metrics-btn {
    padding: 5px 12px; font-size: .78rem; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-2); cursor: pointer; font-family: var(--font);
    transition: border-color .2s, color .2s, background .2s;
}
.metrics-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

.vps-actions-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.vps-actions-table td { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.vps-actions-table td:first-child { font-family: var(--font-mono); font-size: .78rem; width: 80px; }
.vps-actions-table tr:last-child td { border-bottom: none; }

/* ── Toast notifications ──────────────────────────────────────── */
.toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    padding: 12px 20px; border-radius: var(--radius-sm);
    font-size: .9rem; font-weight: 500; max-width: 340px;
    animation: toastIn .3s var(--ease);
    background: var(--bg-3); border: 1px solid var(--border-bright);
    color: var(--text); box-shadow: var(--shadow);
}
.toast-success { border-color: rgba(0,255,170,.4); background: rgba(0,255,170,.08); color: var(--accent); }
.toast-error   { border-color: rgba(255,68,102,.4); background: rgba(255,68,102,.08); color: #ff4466; }
@keyframes toastIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: none; } }

/* ── Dash header & utils ──────────────────────────────────────── */
.dash-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
}
.dash-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.dash-header.vps-list-header { align-items: flex-end; }

.empty-state {
    text-align: center; padding: 64px 24px;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 14px; }
.empty-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.empty-state p { color: var(--text-2); font-size: .9rem; margin-bottom: 20px; }

/* ── Admin VPS ────────────────────────────────────────────────── */
.admin-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.admin-page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }

.admin-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; }
.admin-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; }
.stat-val { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; }
.stat-label { font-size: .78rem; color: var(--text-2); margin-top: 4px; }

.admin-note { font-size: .8rem; color: var(--text-3); margin-top: 16px; }
.admin-flash { margin-bottom: 16px; }
.admin-form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-input-price-ht { width: 88px; min-width: 0; }
.btn-xs { padding: 3px 8px; font-size: .72rem; border-radius: var(--radius-xs); cursor: pointer; }

/* ── Success page ─────────────────────────────────────────────── */
.success-wrap { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 24px; }
.success-card {
    background: var(--bg-card); border: 1px solid rgba(0,255,170,.2);
    border-radius: var(--radius); padding: 48px 40px; text-align: center;
    max-width: 480px; width: 100%;
    box-shadow: 0 0 60px rgba(0,255,170,.06);
}
.success-icon { font-size: 3rem; margin-bottom: 16px; }
.success-card h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 12px; }
.success-card p { color: var(--text-2); font-size: .95rem; line-height: 1.7; margin-bottom: 28px; }

/* ── Status badges supplémentaires ───────────────────────────── */
.status-provisioning { background: rgba(0,204,255,.1); color: #00ccff; border-color: rgba(0,204,255,.3); }
.status-deleting { background: rgba(255,170,0,.1); color: var(--warning); border-color: rgba(255,170,0,.3); }

/* ── Bouton warning ───────────────────────────────────────────── */
.btn-warning { background: rgba(255,170,0,.1); border: 1px solid rgba(255,170,0,.3); color: var(--warning); }
.btn-warning:hover { background: rgba(255,170,0,.18); }

/* ── Responsive VPS ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .vps-metrics-card { grid-column: span 1; }
    .order-layout { grid-template-columns: 1fr; }
    .order-summary { position: static; }
}

@media (max-width: 600px) {
    .vps-wrap.vps-page { padding: 72px 14px 56px; }
    .vps-hero--premium { padding: 28px 16px 32px; }
    .vps-hero-trust { flex-direction: column; align-items: center; }
    .vps-plans-grid { grid-template-columns: 1fr; }
    .vps-manage-grid { grid-template-columns: 1fr; }
    .os-grid, .dc-grid { grid-template-columns: 1fr; }
    .vps-gamme-tabs { flex-direction: column; align-items: stretch; }
    .vps-tab {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        max-width: none;
        min-height: 52px;
        padding: 12px 16px;
    }
    .vps-tab-emoji { font-size: 1.35rem; }
    .vps-tab-label { flex: 1; text-align: left; }
    .vps-tab-badge { margin-left: auto; text-align: right; max-width: 9rem; }
    .vps-page-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
    .vps-actions-grid { grid-template-columns: 1fr; }
    .admin-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section VPS homepage ─────────────────────────────────────── */
.home-vps-section { padding: 64px 0; background: var(--bg-2); }
.home-vps-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.home-vps-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gamme-color, var(--accent));
    border-radius: 12px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .18s, box-shadow .18s;
}
.home-vps-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.home-vps-card-gamme {
    font-size: .8rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--gamme-color, var(--accent));
}
.home-vps-card-desc { font-size: .82rem; color: var(--text-3); line-height: 1.4; margin-bottom: 8px; }
.home-vps-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.home-vps-card-from { font-size: .72rem; color: var(--text-3); width: 100%; }
.home-vps-card-amount { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.home-vps-card-period { font-size: .78rem; color: var(--text-3); }
.home-vps-card-count { font-size: .75rem; color: var(--text-3); margin-top: 4px; margin-bottom: 12px; }
.home-vps-card-btn { align-self: flex-start; }
.home-vps-plans .home-vps-card:nth-child(2) { animation-delay: .1s; }
.home-vps-plans .home-vps-card:nth-child(3) { animation-delay: .2s; }
@media (max-width: 700px) {
    .home-vps-plans { grid-template-columns: 1fr; }
}

/* ── Admin : liste VPS ───────────────────────────────────────── */
.avps-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-bottom: 24px; padding: 22px 24px;
    background: linear-gradient(135deg, rgba(0,255,170,.06) 0%, transparent 55%), var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.avps-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.avps-desc { margin: 0; max-width: 52rem; font-size: .88rem; color: var(--text-2); line-height: 1.55; }
.avps-head-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.avps-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.avps-kpi {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.avps-kpi-accent { border-color: rgba(0,255,170,.25); background: rgba(0,255,170,.04); }
.avps-kpi-money { border-color: rgba(240,165,0,.2); background: rgba(240,165,0,.04); }
.avps-kpi-val { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.avps-kpi-lbl { display: block; font-size: .68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; font-weight: 600; }

.avps-toolbar { margin-bottom: 18px; }
.avps-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.avps-chip {
    display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; text-decoration: none;
    color: var(--text-2); border: 1px solid var(--border); background: var(--bg-2);
    transition: background .15s, border-color .15s, color .15s;
}
.avps-chip:hover { color: var(--text-1); border-color: var(--border-bright); }
.avps-chip.is-active {
    color: var(--accent); border-color: rgba(0,255,170,.35); background: rgba(0,255,170,.08);
}
.avps-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.avps-search-input {
    flex: 1; min-width: 200px; max-width: 420px;
    padding: 10px 14px; border-radius: var(--radius-xs); border: 1px solid var(--border);
    background: var(--bg-2); color: var(--text-1); font-size: .88rem;
}
.avps-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,255,170,.08); }
.avps-search-btn { flex-shrink: 0; }

.avps-empty {
    text-align: center; padding: 56px 24px; border: 1px dashed var(--border); border-radius: var(--radius);
    background: var(--bg-card);
}
.avps-empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: .85; }
.avps-empty-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.avps-empty-text { color: var(--text-2); font-size: .9rem; max-width: 400px; margin: 0 auto; line-height: 1.55; }

.avps-table-wrap {
    overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card);
}
.avps-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.avps-table th {
    text-align: left; padding: 12px 14px; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-3); font-weight: 700; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.avps-table td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .84rem; }
.avps-tr:hover td { background: rgba(255,255,255,.02); }
.avps-tr:last-child td { border-bottom: none; }
.avps-cell-main { font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.avps-cell-sub { font-size: .78rem; color: var(--text-3); margin-top: 3px; line-height: 1.35; }
.avps-table .mono { font-family: var(--font-mono); font-size: .76rem; }
.avps-muted { color: var(--text-3); font-weight: 500; }
.avps-warn { color: #ffaa66; }
.avps-badges { margin-top: 8px; }
.avps-link { color: var(--accent); text-decoration: none; }
.avps-link:hover { text-decoration: underline; }
.avps-actions { white-space: nowrap; text-align: right; }
.avps-btn-stripe {
    background: rgba(99,91,255,.12); color: #a99fff; border: 1px solid rgba(99,91,255,.3);
    font-size: .75rem; font-weight: 700;
}
.avps-btn-stripe:hover { filter: brightness(1.08); }
.avps-action-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
@media (min-width: 1100px) {
  .avps-action-btns {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.avps-btn-terminate {
  background: rgba(255, 68, 102, 0.12) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 68, 102, 0.28) !important;
  font-weight: 600;
}
.avps-btn-terminate:hover {
  filter: brightness(1.06);
}

.avps-kpi-stripe { border-color: rgba(99,91,255,.22); background: rgba(99,91,255,.06); }

@media (max-width: 900px) {
    .avps-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── Admin : plans VPS (cartes) ──────────────────────────────── */
.avpp-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.avpp-title { font-size: 1.45rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; }
.avpp-lead { margin: 0; color: var(--text-2); font-size: .9rem; max-width: 42rem; line-height: 1.5; }

.avpp-legend {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 16px 18px; margin-bottom: 22px; font-size: .84rem; color: var(--text-2); line-height: 1.55;
}
.avpp-legend strong { color: var(--text-1); display: block; margin-bottom: 8px; font-size: .88rem; }
.avpp-legend-list { margin: 0; padding-left: 1.2rem; }
.avpp-legend-list li { margin-bottom: 6px; }
.avpp-legend code { font-size: .78rem; background: var(--bg-2); padding: 1px 6px; border-radius: 4px; }
.avpp-inline-link { color: var(--accent); text-decoration: none; }
.avpp-inline-link:hover { text-decoration: underline; }

.avpp-section { margin-bottom: 36px; }
.avpp-section-head { margin-bottom: 16px; }
.avpp-gamme-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.avpp-gamme-desc { margin: 0; font-size: .82rem; color: var(--text-3); }

.avpp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.avpp-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 0;
    box-shadow: var(--shadow);
    transition: border-color .15s;
}
.avpp-card:hover { border-color: rgba(0,255,170,.2); }
.avpp-card.is-off { opacity: .72; border-style: dashed; }

.avpp-card-top { margin-bottom: 12px; }
.avpp-plan-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.avpp-plan-tag { font-size: .8rem; color: var(--text-3); margin: 0 0 10px; line-height: 1.35; }
.avpp-specs { font-size: .82rem; color: var(--text-2); font-weight: 500; }
.avpp-dot { opacity: .5; margin: 0 2px; }
.avpp-type { margin-top: 8px; font-size: .72rem; color: var(--accent); }

.avpp-prices { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); }
.avpp-price-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.avpp-price-row:last-child { border-bottom: none; }
.avpp-price-row dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; margin: 0; }
.avpp-price-row dd { margin: 0; text-align: right; font-weight: 600; font-size: .9rem; }
.avpp-price-row--highlight { background: rgba(0,255,170,.04); margin: 0 -12px; padding: 10px 12px; border-radius: var(--radius-xs); border-bottom: none; }
.avpp-unit { font-size: .72rem; font-weight: 600; color: var(--text-3); margin-left: 2px; }

.avpp-price-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.avpp-input-euro { width: 100px; min-width: 0; text-align: right; padding: 6px 8px; font-size: .88rem; }
.avpp-save { flex-shrink: 0; }

.avpp-card-foot {
    margin-top: auto; padding-top: 12px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    border-top: 1px solid var(--border);
}
.avpp-toggle-form { margin: 0; }
.avpp-stripe-id { font-size: .65rem; color: var(--text-3); max-width: 100%; word-break: break-all; margin-left: auto; }
.avpp-muted { color: var(--text-3) !important; }

@media (max-width: 700px) {
    .avpp-price-row { grid-template-columns: 1fr; text-align: left; }
    .avpp-price-row dd { text-align: left; }
    .avpp-price-form { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — titres annuaire & fiche serveur
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .sp2-name {
        font-size: 1.7rem;
        letter-spacing: -.5px;
        word-break: break-word;
    }
    .sl-featured-inner {
        padding: 12px 14px;
        gap: 10px;
    }
    .sl-featured-body {
        margin-top: 14px;
        gap: 10px;
        width: 100%;
    }
    .sl-featured-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
        gap: 10px;
    }
    .sl-featured-votes-big { font-size: 1.4rem; }
    .sl-featured-desc { display: none; }
    .sl-featured-tags { display: none; }
    .sl-featured-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1rem;
        max-width: 100%;
    }
    .sl-row-top {
        flex-direction: column;
        gap: 4px;
    }
    .sl-row-status {
        align-self: flex-start;
    }
    .sl-row-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        font-size: .88rem;
    }
    .sl-row-name-wrap {
        min-width: 0;
        width: 100%;
    }
}
@media (max-width: 420px) {
    .sp2-name {
        font-size: 1.4rem;
        letter-spacing: 0;
    }
}
/* =============================================
   NEWS — pages /news et article (2026-04-15)
   ============================================= */
.news-page {
    padding: 100px 0 72px;
    min-height: 60vh;
}
.news-page-inner {
    max-width: 960px;
}
.news-page-header {
    margin-bottom: 28px;
}
.news-page-title {
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 12px 0 8px;
    color: var(--text);
}
.news-page-lede {
    color: var(--text-3);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 640px;
}

.news-cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.news-cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-2);
    text-decoration: none;
    transition: border-color .2s, background .2s, color .2s;
}
.news-cat-chip:hover {
    border-color: rgba(0, 255, 170, 0.35);
    color: var(--text);
}
.news-cat-chip.is-active {
    border-color: var(--accent);
    background: rgba(0, 255, 170, 0.1);
    color: var(--accent);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.news-list-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.news-list-card--no-cover {
    grid-template-columns: 1fr;
}
.news-list-card:hover {
    border-color: rgba(0, 255, 170, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.news-list-card-cover {
    min-height: 120px;
    background: var(--bg-2);
}
.news-list-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-list-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.news-list-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.news-list-card-date {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.news-list-card-cat {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: rgba(0, 255, 170, 0.1);
    border: 1px solid rgba(0, 255, 170, 0.2);
    padding: 2px 8px;
    border-radius: 999px;
}
.news-list-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.35;
}
.news-list-card-excerpt {
    font-size: .92rem;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 14px;
    flex: 1;
}
.news-list-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.news-list-card-cta {
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
}
.news-list-card-stats {
    display: flex;
    gap: 14px;
    font-size: .8rem;
    color: var(--text-3);
}
.news-stat {
    white-space: nowrap;
}

.news-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-3);
}
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.news-pagination-info {
    font-size: .88rem;
    color: var(--text-3);
}

@media (max-width: 720px) {
    .news-list-card {
        grid-template-columns: 1fr;
    }
    .news-list-card-cover {
        min-height: 160px;
        max-height: 200px;
    }
}

/* Article */
.news-article-page {
    padding: 96px 0 72px;
}
.news-article-inner {
    max-width: 760px;
}
.news-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    text-decoration: none;
    font-size: .88rem;
    margin-bottom: 24px;
}
.news-back:hover {
    color: var(--accent);
}
.news-article-head {
    margin-bottom: 20px;
}
.news-article-cat {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 10px;
}
.news-article-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 14px;
    color: var(--text);
}
.news-article-meta {
    font-size: .88rem;
    color: var(--text-3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.news-meta-sep {
    opacity: 0.5;
}

.news-cover {
    margin: 0 0 28px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-2);
}
.news-cover img {
    width: 100%;
    height: auto;
    display: block;
}

.news-article-lede {
    font-size: 1.12rem;
    color: var(--text-2);
    line-height: 1.65;
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.news-article-body {
    margin-bottom: 8px;
}

.news-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text);
}

.news-reactions {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.news-reaction-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.news-reaction-form {
    margin: 0;
}
.news-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 1.05rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.news-reaction-btn:hover:not(:disabled) {
    transform: scale(1.04);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.12);
}
.news-reaction-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.news-reaction-btn.is-active {
    background: rgba(0, 255, 170, 0.12);
    border-color: var(--accent);
}
.news-reaction-count {
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent);
}
.news-reaction-hint {
    font-size: .85rem;
    color: var(--text-3);
    margin-top: 12px;
}
.news-reaction-hint a {
    color: var(--accent);
}

.news-comments-block {
    margin-top: 40px;
}
.news-comment-form {
    margin-bottom: 24px;
}
.news-comment-compose {
    display: flex;
    gap: 14px;
    background: var(--bg-card);
    padding: 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.news-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #000;
    flex-shrink: 0;
}
.news-comment-avatar.sm {
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    font-weight: 700;
}
.news-comment-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.news-comment-fields textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: .95rem;
}
.news-comment-guest {
    text-align: center;
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
}
.news-comment-guest p {
    margin: 0 0 12px;
    color: var(--text-2);
}
.news-comment-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.news-comment-item {
    display: flex;
    gap: 14px;
}
.news-comment-bubble {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.news-comment-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.news-comment-head strong {
    color: var(--text);
    font-size: .92rem;
}
.news-comment-head time {
    font-size: .78rem;
    color: var(--text-3);
}
.news-comment-text {
    color: var(--text-2);
    font-size: .93rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.news-comment-empty {
    color: var(--text-3);
    font-style: italic;
}

.news-related {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.news-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.news-related-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s;
}
.news-related-card:hover {
    border-color: rgba(0, 255, 170, 0.3);
    transform: translateY(-2px);
}
.news-related-cover {
    aspect-ratio: 16 / 9;
    background: var(--bg-2);
}
.news-related-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-related-body {
    padding: 14px 16px 16px;
}
.news-related-cat {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    display: block;
    margin-bottom: 6px;
}
.news-related-title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.35;
    color: var(--text);
}
.news-related-excerpt {
    font-size: .82rem;
    color: var(--text-3);
    margin: 0;
    line-height: 1.45;
}

/* Homepage — carte avec visuel */
.news-card.has-cover {
    padding: 0;
    overflow: hidden;
}
.news-card.has-cover .news-card-inner {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-section-more {
    text-align: center;
    margin-top: 24px;
}
.news-card-cover {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: var(--bg-2);
}
.news-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-card-cat {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-top: 4px;
}

/* === Homepage — utilitaires (inline retiré de index.php) === */
.section--bg-2 {
    background: var(--bg-2);
}

.how-grid--hidden {
    display: none !important;
}

.how-step--d1 { transition-delay: 0.1s; }
.how-step--d2 { transition-delay: 0.2s; }

.features-grid .feature-card:nth-child(1) { transition-delay: 0s; }
.features-grid .feature-card:nth-child(2) { transition-delay: 0.1s; }
.features-grid .feature-card:nth-child(3) { transition-delay: 0.2s; }
.features-grid .feature-card:nth-child(4) { transition-delay: 0.1s; }
.features-grid .feature-card:nth-child(5) { transition-delay: 0.2s; }
.features-grid .feature-card:nth-child(6) { transition-delay: 0.3s; }

.feature-card .feature-accent {
    color: var(--accent);
    font-weight: 600;
}

.plans-grid .plan-card:nth-child(1) { transition-delay: 0s; }
.plans-grid .plan-card:nth-child(2) { transition-delay: 0.1s; }
.plans-grid .plan-card:nth-child(3) { transition-delay: 0.2s; }
.plans-grid .plan-card:nth-child(4) { transition-delay: 0.3s; }

.testimonials-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-3);
    font-size: 0.9rem;
}

.review-form-wrap--center {
    text-align: center;
}

.home-faq-footer {
    text-align: center;
    margin-top: 28px;
}

.home-faq-section button.home-faq-q {
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.home-faq-section button.home-faq-q:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none !important;
    }
    .home-faq-a {
        transition: none !important;
    }
    .home-faq-chevron {
        transition: none !important;
    }
    .how-step--d1,
    .how-step--d2,
    .features-grid .feature-card,
    .plans-grid .plan-card {
        transition-delay: 0s !important;
    }
}
/* Journaux IP + journal staff — densité forte (override cascade admin-table) */
.admin-log-page-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.admin-log-lead {
  color: var(--text-3);
  font-size: 0.75rem;
  margin-bottom: 1rem;
  max-width: 42rem;
  line-height: 1.4;
}

.admin-log-lead a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 1rem;
  font-size: 0.75rem;
}

.admin-log-filters .form-group label {
  font-size: 0.7rem;
}

.admin-log-filters input[type="text"],
.admin-log-filters input[type="search"] {
  font-size: 0.75rem !important;
  padding: 6px 8px;
  min-height: 0;
}

.admin-log-filters .form-group {
  margin: 0;
  flex: 1 1 120px;
  min-width: min(100%, 120px);
}

.admin-log-filters--audit .form-group {
  flex: 1 1 200px;
  max-width: 28rem;
}

/* Bloc tableau : taille de référence pour toutes les cellules */
.admin-main .admin-table-wrap--log {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 0.625rem;
  line-height: 1.3;
}

.admin-main .admin-table-wrap--log .admin-table--log {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit !important;
}

.admin-main .admin-table-wrap--log .admin-table--log thead th {
  padding: 5px 8px !important;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text-3);
  font-weight: 600;
  font-size: 0.625rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.admin-main .admin-table-wrap--log .admin-table--log tbody td {
  padding: 4px 8px !important;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.625rem !important;
}

.admin-main .admin-table-wrap--log .admin-table__mono {
  font-family: var(--font-mono);
  font-size: inherit !important;
}

.admin-main .admin-table-wrap--log .admin-table__muted {
  color: var(--text-3);
  white-space: nowrap;
}

.admin-main .admin-table-wrap--log .admin-table__path {
  max-width: min(220px, 55vw);
  word-break: break-all;
}

.admin-main .admin-table-wrap--log .admin-table__ua {
  max-width: min(280px, 70vw);
  word-break: break-word;
  color: var(--text-3);
  font-size: inherit !important;
  line-height: 1.25;
}

.admin-main .admin-table-wrap--log .admin-table__empty {
  color: var(--text-3);
}

.admin-main .admin-table-wrap--log .admin-table__empty-cell {
  padding: 1rem !important;
  text-align: center;
  color: var(--text-3);
  font-size: 0.75rem !important;
}

.admin-main .admin-table-wrap--log .admin-table__staff-name {
  font-weight: 600;
  font-size: inherit !important;
}

.admin-main .admin-table-wrap--log .admin-table__staff-meta {
  font-size: 0.85em;
  color: var(--text-3);
  margin-top: 0;
  line-height: 1.2;
}

.admin-main .admin-table-wrap--log .admin-table__action {
  font-family: var(--font-mono);
  color: var(--accent);
  word-break: break-word;
  font-size: inherit !important;
}

.admin-main .admin-table-wrap--log .admin-table__ctx {
  max-width: min(420px, 85vw);
  word-break: break-word;
  font-size: inherit !important;
  color: var(--text-2);
  line-height: 1.3;
}

.admin-log-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.admin-log-pagination .btn {
  font-size: 0.7rem !important;
  padding: 5px 10px;
}

.admin-log-pagination__meta {
  font-size: 0.65rem;
  color: var(--text-3);
}

@media (max-width: 900px) {
  .admin-main .admin-table-wrap--log {
    font-size: 0.6875rem;
  }

  .admin-main .admin-table-wrap--log .admin-table--log thead {
    display: none;
  }

  .admin-main .admin-table-wrap--log .admin-table--log tbody tr {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }

  .admin-main .admin-table-wrap--log .admin-table--log tbody td {
    display: grid;
    grid-template-columns: minmax(76px, 30%) 1fr;
    gap: 3px 8px;
    padding: 4px 8px !important;
    border: none !important;
    max-width: none !important;
    white-space: normal !important;
    font-size: 0.6875rem !important;
  }

  .admin-main .admin-table-wrap--log .admin-table--log tbody td::before {
    content: attr(data-label);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    font-weight: 600;
    padding-top: 1px;
    line-height: 1.2;
  }

  .admin-main .admin-table-wrap--log .admin-table__empty-cell {
    display: block !important;
    text-align: center;
    font-size: 0.75rem !important;
  }

  .admin-main .admin-table-wrap--log .admin-table__empty-cell::before {
    display: none !important;
  }
}
/* Panel admin — topbar, cartes, liste actualités (pas de overflow:hidden sur tableaux) */

.admin-main > .alert {
  margin-bottom: 16px;
}

.admin-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  min-width: 0;
}

.admin-topbar h1 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.admin-topbar .btn {
  flex-shrink: 0;
}

/* Carte section (ne pas utiliser overflow:hidden si tableau scrollable à l'intérieur) */
.admin-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.admin-panel--flush {
  overflow: visible;
}

.admin-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.admin-empty__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.admin-empty__text {
  color: var(--text-3);
  margin-bottom: 16px;
}

/* Liste news admin */
.admin-news-slug {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 400;
}

.admin-news-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-news-status--published {
  color: var(--success);
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.15);
}

.admin-news-status--draft {
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
}

.admin-news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-news-actions .btn {
  flex-shrink: 0;
}

.admin-news-delete {
  background: rgba(255, 68, 102, 0.1) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 68, 102, 0.2) !important;
}

/* Édition article */
.admin-news-form {
  max-width: 800px;
}

.admin-news-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-news-form__grid .form-group--full {
  grid-column: 1 / -1;
}

.admin-news-form__hint {
  color: var(--text-3);
}

.admin-news-form__slug-preview {
  color: var(--accent);
}

.admin-news-form textarea[name="content"] {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  resize: vertical;
}

.admin-news-form textarea[name="excerpt"] {
  resize: vertical;
}

.admin-news-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .admin-news-form__grid {
    grid-template-columns: 1fr;
  }
}
/* Crédit prépayé — client /credits + teaser /billing */
.credits-billing-teaser__body { padding: 18px 20px 22px; }
.credits-billing-teaser__text { color: var(--text-2); font-size: 0.9rem; line-height: 1.45; margin-bottom: 14px; max-width: 44rem; }

.credits-page__head { margin-bottom: 24px; }
.credits-page__title { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.credits-page__lead { color: var(--text-2); font-size: 0.9rem; line-height: 1.5; max-width: 52rem; }
.credits-page__alert { margin-bottom: 16px; }

.credits-balance-card__inner { padding: 20px 20px 24px; }
.credits-balance-card__amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.credits-balance-card__hint { margin-top: 10px; font-size: 0.82rem; color: var(--text-3); max-width: 40rem; }

.credits-recharge-intro { padding: 0 20px 12px; font-size: 0.88rem; color: var(--text-2); }

.credits-amount-form { padding: 0 20px 8px; max-width: 40rem; }
.credits-amount-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.credits-amount-label {
    flex: 1 1 100%;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-2);
}
.credits-amount-input-wrap {
    position: relative;
    flex: 1 1 160px;
    min-width: 140px;
}
.credits-amount-input {
    width: 100%;
    padding-right: 2rem;
}
.credits-amount-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--text-3);
    pointer-events: none;
}
.credits-amount-submit { flex: 0 0 auto; }

.credits-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 20px 20px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}
.credits-presets-label {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-right: 4px;
}

.credits-empty { padding: 16px 20px; color: var(--text-3); font-size: 0.88rem; }
.credits-footnote { margin-top: 28px; font-size: 0.88rem; }
.credits-footnote a { color: var(--accent); text-decoration: none; }
.credits-footnote a:hover { text-decoration: underline; }

/* Parrainage — lien vers Wallet */
.ref-hero-wallet-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.ref-hero-wallet-link:hover { text-decoration: underline; }
/* Wallet client /wallet + pastilles source (admin crédits) */

.wallet-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.wallet-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.wallet-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.wallet-stat-card {
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--surface-1, rgba(255, 255, 255, 0.03));
}

.wallet-stat-card--wide {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .wallet-stat-card--wide {
        grid-column: span 2;
    }
}

.wallet-stat-label {
    font-size: 0.78rem;
    color: var(--text-3, #8b93a7);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wallet-stat-val {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wallet-stat-val--accent {
    color: var(--accent);
}

.wallet-stat-val--muted {
    color: var(--text-2);
    font-weight: 600;
}

.wallet-stat-val--warn {
    color: #f59e0b;
}

.wallet-next-card .wallet-next-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 20px 16px;
}

.wallet-next-label {
    font-weight: 600;
    font-size: 1rem;
}

.wallet-next-date {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--text-2);
}

.wallet-next-late {
    color: #f59e0b;
}

.wallet-next-amt {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.wallet-next-amt-hint {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-3);
}

.wallet-next-foot {
    margin: 0 20px 18px;
    font-size: 0.82rem;
    color: var(--text-3);
    line-height: 1.45;
}

.wallet-trust-card .wallet-trust-list {
    margin: 0 20px 20px;
    padding-left: 1.1rem;
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.55;
}

.wallet-trust-card .wallet-trust-list a {
    color: var(--accent);
    text-decoration: none;
}

.wallet-trust-card .wallet-trust-list a:hover {
    text-decoration: underline;
}

.wallet-referral-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: linear-gradient(120deg, rgba(99, 102, 241, 0.12), rgba(34, 211, 238, 0.06));
}

.wallet-referral-banner__text {
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 42rem;
}

.wallet-referral-banner__muted {
    color: var(--text-2);
}

.wallet-empty-hero {
    text-align: center;
    padding: 28px 20px 32px;
    margin-bottom: 20px;
    border-radius: 14px;
    border: 1px dashed var(--border, rgba(255, 255, 255, 0.12));
    background: var(--surface-1, rgba(255, 255, 255, 0.02));
}

.wallet-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.wallet-empty-text {
    color: var(--text-2);
    font-size: 0.9rem;
    max-width: 28rem;
    margin: 0 auto 16px;
    line-height: 1.5;
}

.wallet-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.wallet-tip {
    margin: 0 20px 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.86rem;
    color: var(--text-2);
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.wallet-tip-icon {
    margin-right: 4px;
}

.wallet-ledger-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.wallet-ledger-meta {
    font-size: 0.82rem;
    color: var(--text-3);
    font-weight: 500;
}

.wallet-ledger-table .wallet-td-amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wallet-ledger-table .wallet-td-desc {
    max-width: 22rem;
    word-break: break-word;
}

.wallet-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px 18px;
}

.wallet-pagination-info {
    font-size: 0.86rem;
    color: var(--text-2);
}

/* Pastilles source — client + admin */
.wallet-source-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.wallet-source-stripe_checkout {
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.1);
}

.wallet-source-referral {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
}

.wallet-source-admin_credit {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.1);
}

.wallet-source-admin_debit {
    color: #fb7185;
    border-color: rgba(251, 113, 133, 0.35);
    background: rgba(251, 113, 133, 0.1);
}

/* Formulaire montant (réutilise classes credits) */
.credits-amount-form {
    padding: 0 20px 8px;
}

.credits-amount-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.credits-amount-label {
    flex: 0 0 100%;
    font-size: 0.82rem;
    color: var(--text-2);
}

.credits-amount-input-wrap {
    position: relative;
    flex: 1 1 160px;
    max-width: 220px;
}

.credits-amount-input {
    padding-right: 28px;
}

.credits-amount-suffix {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--text-3);
    pointer-events: none;
}

.credits-amount-submit {
    flex: 0 0 auto;
}

.credits-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 20px 22px;
    font-size: 0.82rem;
    color: var(--text-3);
}

.credits-presets-label {
    margin-right: 4px;
}

/* Admin — panneau ajustement (pas de style inline) */
.admin-credits-adjust-panel {
    margin-bottom: 24px;
}

.admin-form-grid--credits-adjust {
    padding: 16px;
    max-width: 520px;
}

/* Admin — filtres journal crédits */
.admin-credits-ledger-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.admin-credits-ledger-count {
    font-size: 0.82rem;
    color: var(--text-3);
}

.admin-credits-filters {
    padding: 12px 16px 4px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.admin-credits-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
}

.admin-credits-filters__grow {
    flex: 1 1 200px;
    min-width: 180px;
}

.admin-credits-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
}

.admin-credits-toolbar {
    padding: 10px 16px 0;
}

.admin-credits-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px 18px;
}
/* ═══ Page /community — direction visuelle v2 (hub immersif) ═══ */
/* S’applique sous .community-wrap.community-v2 */

.community-wrap.community-v2 {
    padding-top: 0;
    overflow-x: clip;
}

/* ─── Hero ─── */
.comm-hero {
    position: relative;
    padding: calc(72px + clamp(2rem, 6vw, 4rem)) 0 clamp(3rem, 8vw, 5rem);
    margin-bottom: 0;
}

.comm-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.comm-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 60% at 15% 0%, rgba(136, 85, 255, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 20%, rgba(0, 255, 170, 0.12), transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 204, 255, 0.08), transparent 45%);
}

.comm-hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
}

.comm-hero__noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.comm-hero .container {
    position: relative;
    z-index: 1;
}

.comm-hero__kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 1rem;
}

.comm-hero__title {
    font-size: clamp(2.15rem, 5.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-width: 18ch;
    margin-bottom: 1.25rem;
}

.comm-hero__title .comm-gradient {
    background: var(--gradient-2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.comm-hero__lead {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    color: var(--text-2);
    max-width: 38rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.comm-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 2.5rem;
}

.comm-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border-bright);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.comm-hero__pill:hover {
    border-color: rgba(0, 255, 170, 0.35);
    background: rgba(0, 255, 170, 0.06);
    transform: translateY(-1px);
}

.comm-hero__pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    animation: comm-pulse-dot 2s ease-in-out infinite;
}

@keyframes comm-pulse-dot {
    50% {
        opacity: 0.5;
    }
}

.comm-hero__hint {
    width: 100%;
    font-size: 0.82rem;
    color: var(--text-3);
}

.comm-hero__hint a {
    color: var(--accent-2);
    text-decoration: none;
}

.comm-hero__hint a:hover {
    text-decoration: underline;
}

/* Portes Discord / Matrix */
.comm-gates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 20px);
    margin-top: 0.5rem;
}

@media (max-width: 820px) {
    .comm-gates {
        grid-template-columns: 1fr;
    }
}

.comm-gate {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(13, 13, 32, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

[data-theme="light"] .comm-gate {
    background: rgba(255, 255, 255, 0.72);
}

.comm-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 255, 170, 0.35), transparent 40%, rgba(0, 204, 255, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.comm-gate:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 170, 0.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 255, 170, 0.08);
}

.comm-gate--matrix:hover {
    border-color: rgba(0, 204, 255, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 204, 255, 0.1);
}

.comm-gate__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    color: var(--accent);
}

.comm-gate__icon svg {
    width: 100%;
    height: 100%;
}

.comm-gate__label {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 6px;
}

.comm-gate__title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.comm-gate__desc {
    font-size: 0.88rem;
    color: var(--text-2);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 1rem;
}

.comm-gate__code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    color: var(--accent-2);
    margin-bottom: 12px;
    word-break: break-all;
}

[data-theme="light"] .comm-gate__code {
    background: rgba(0, 0, 0, 0.05);
}

.comm-gate__cta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comm-gate__cta::after {
    content: "→";
    transition: transform 0.2s var(--ease);
}

.comm-gate:hover .comm-gate__cta::after {
    transform: translateX(4px);
}

/* Annonce */
.comm-site-announce {
    max-width: 800px;
    margin: 0 auto 2rem;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

.comm-site-announce--info {
    border: 1px solid rgba(0, 204, 255, 0.25);
    background: rgba(0, 204, 255, 0.08);
    color: var(--accent-2);
}

.comm-site-announce--success {
    border: 1px solid rgba(0, 255, 136, 0.22);
    background: rgba(0, 255, 136, 0.08);
    color: var(--success);
}

.comm-site-announce--warning {
    border: 1px solid rgba(255, 170, 0, 0.25);
    background: rgba(255, 170, 0, 0.08);
    color: var(--warning);
}

.comm-site-announce--danger {
    border: 1px solid rgba(255, 68, 102, 0.25);
    background: rgba(255, 68, 102, 0.08);
    color: var(--danger);
}

.comm-site-announce--promo {
    border: 1px solid rgba(0, 255, 170, 0.35);
    background: linear-gradient(135deg, rgba(0, 40, 30, 0.9), rgba(10, 43, 26, 0.95));
    color: #00ffaa;
}

[data-theme="light"] .comm-site-announce--promo {
    background: rgba(0, 122, 85, 0.1);
    color: var(--accent);
}

/* Membre connecté */
.comm-member {
    max-width: 960px;
    margin: 0 auto 3rem;
    padding: 16px 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 16px;
    border: 1px solid rgba(0, 255, 170, 0.2);
    background: linear-gradient(120deg, rgba(0, 255, 170, 0.06), rgba(0, 204, 255, 0.04));
}

.comm-member__text {
    font-size: 0.9rem;
    color: var(--text-2);
    max-width: 32rem;
    line-height: 1.5;
}

.comm-member__text strong {
    color: var(--text);
}

.comm-member__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Section titre générique */
.comm-section-head {
    margin-bottom: 1.5rem;
}

.comm-section-head__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 0.5rem;
}

.comm-section-head__title {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.comm-section-head__sub {
    color: var(--text-2);
    font-size: 0.92rem;
    max-width: 40rem;
    line-height: 1.55;
}

/* Carrousel actualités */
.comm-signal {
    padding: 3rem 0 2rem;
}

.comm-rail-wrap {
    position: relative;
    margin: 1.5rem 0 0;
}

.comm-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to left, var(--bg), transparent);
    pointer-events: none;
    z-index: 2;
}

.comm-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
}

.comm-rail::-webkit-scrollbar {
    height: 6px;
}

.comm-rail::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border-radius: 99px;
}

.comm-rail-card {
    flex: 0 0 min(320px, 85vw);
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.comm-rail-card:hover {
    transform: translateY(-4px);
    border-color: rgba(136, 85, 255, 0.35);
}

.comm-rail-card__media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #1a1a35, #0d0d22);
    position: relative;
    overflow: hidden;
}

.comm-rail-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comm-rail-card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.08);
    font-family: var(--font-mono);
}

.comm-rail-card__body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comm-rail-card__meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 6px;
}

.comm-rail-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.comm-rail-card__excerpt {
    font-size: 0.82rem;
    color: var(--text-3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.comm-rail-card__tag {
    margin-top: 10px;
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(136, 85, 255, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(136, 85, 255, 0.25);
}

.comm-rail-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-3);
    border: 1px dashed var(--border);
    border-radius: 16px;
}

/* Dock infra */
.comm-dock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .comm-dock {
        grid-template-columns: 1fr;
    }
}

.comm-dock-panel {
    border-radius: 16px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

.comm-dock-panel--alert {
    border-color: rgba(255, 170, 0, 0.35);
    background: linear-gradient(180deg, rgba(255, 170, 0, 0.07), transparent);
}

.comm-dock-panel--ok {
    border-color: rgba(0, 255, 136, 0.2);
}

.comm-dock-panel__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}

.comm-dock-panel__body {
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.55;
    flex: 1;
}

.comm-dock-panel__body strong {
    color: var(--text);
}

.comm-dock-panel__body a {
    color: var(--accent-2);
    text-decoration: none;
    font-weight: 600;
}

.comm-dock-panel__body a:hover {
    text-decoration: underline;
}

.comm-dock-panel__note {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--text-3);
}

.comm-dock-panel__foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.comm-dock-panel__foot a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-2);
    text-decoration: none;
}

.comm-dock-panel__foot a:hover {
    text-decoration: underline;
}

.comm-dock-ops__meter {
    margin-top: 8px;
    height: 6px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
}

.comm-dock-ops__meter-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--gradient);
    transition: width 0.6s var(--ease);
    width: calc(var(--meter, 0) * 1%);
}

/* Liens — liste commande */
.comm-links {
    padding: 3rem 0;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.comm-links__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 720px;
}

.comm-links__a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.2s var(--ease), color 0.2s;
}

.comm-links__a:first-child {
    padding-top: 0;
}

.comm-links__a:hover {
    padding-left: 8px;
    color: var(--accent);
}

.comm-links__a-title {
    font-weight: 600;
    font-size: 1rem;
}

.comm-links__a-desc {
    font-size: 0.82rem;
    color: var(--text-3);
    text-align: right;
    flex-shrink: 0;
}

.comm-links__a-arrow {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-3);
    flex-shrink: 0;
}

.comm-links__a:hover .comm-links__a-arrow {
    color: var(--accent);
}

/* Charte */
.comm-charter {
    padding: 3.5rem 0;
}

.comm-charter__inner {
    max-width: 640px;
    margin: 0 auto;
    padding-left: 1.5rem;
    border-left: 3px solid;
    border-image: var(--gradient-2) 1;
}

.comm-charter__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.comm-charter__inner ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comm-charter__inner li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.85rem;
    font-size: 0.92rem;
    color: var(--text-2);
    line-height: 1.55;
}

.comm-charter__inner li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.comm-charter__inner a {
    color: var(--accent-2);
    text-decoration: none;
}

.comm-charter__inner a:hover {
    text-decoration: underline;
}

/* FAQ / détails */
.comm-learn {
    padding: 3rem 0 4rem;
}

.comm-details {
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 10px;
    background: var(--bg-card);
    overflow: hidden;
}

.comm-details summary {
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.comm-details summary::-webkit-details-marker {
    display: none;
}

.comm-details summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--text-3);
    transition: transform 0.2s;
}

.comm-details[open] summary::after {
    transform: rotate(45deg);
}

.comm-details__body {
    padding: 0 20px 18px;
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.6;
}

.comm-details__body p {
    margin-bottom: 0.75rem;
}

.comm-details__body a {
    color: var(--accent-2);
}

.comm-compare {
    margin-top: 8px;
}

.comm-guide-ol {
    margin: 0;
    padding-left: 1.2rem;
}

.comm-details__cta {
    margin-top: 14px;
}

/* Clients Matrix — sans emoji */
.comm-clients {
    padding: 3rem 0;
    background: var(--bg-2);
}

.comm-clients__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .comm-clients__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.comm-client {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s var(--ease);
}

.comm-client:hover {
    border-color: rgba(0, 204, 255, 0.35);
    transform: translateY(-2px);
}

.comm-client__badge {
    min-width: 44px;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    margin-bottom: 10px;
    background: rgba(0, 204, 255, 0.12);
    color: var(--accent-2);
    border: 1px solid rgba(0, 204, 255, 0.25);
}

.comm-client__name {
    font-weight: 700;
    font-size: 0.95rem;
}

.comm-client__desc {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 4px;
    text-align: center;
}

/* Outro */
.comm-outro {
    padding: clamp(3rem, 10vw, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.comm-outro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(0, 255, 170, 0.12), transparent 55%);
    pointer-events: none;
}

.comm-outro .container {
    position: relative;
    z-index: 1;
}

.comm-outro h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.comm-outro p {
    color: var(--text-2);
    margin-bottom: 1.5rem;
}

.comm-outro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ─── Agenda événements (admin) ─── */
.comm-agenda {
    padding: 2.5rem 0 1rem;
    border-bottom: 1px solid var(--border);
}

.comm-agenda-empty {
    max-width: 36rem;
    color: var(--text-2);
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 1rem 0 0.5rem;
}

.comm-agenda-empty a {
    color: var(--accent-2);
    text-decoration: none;
}

.comm-agenda-empty a:hover {
    text-decoration: underline;
}

.comm-agenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 1.25rem;
}

.comm-agenda-card {
    position: relative;
    border-radius: 18px;
    padding: 20px 20px 18px;
    border: 1px solid var(--border);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.comm-agenda-card:hover {
    border-color: rgba(136, 85, 255, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.comm-agenda-card--live {
    border-color: rgba(0, 255, 136, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.12), 0 12px 40px rgba(0, 255, 136, 0.06);
}

.comm-agenda-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.comm-agenda-live {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 255, 136, 0.15);
    color: var(--success);
    border: 1px solid rgba(0, 255, 136, 0.35);
    animation: comm-agenda-pulse 2s ease-in-out infinite;
}

@keyframes comm-agenda-pulse {
    50% {
        opacity: 0.85;
    }
}

.comm-agenda-type {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.comm-agenda-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0;
}

.comm-agenda-card__time {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-2);
    margin: 0;
}

.comm-agenda-card__loc {
    font-size: 0.86rem;
    color: var(--text-2);
    margin: 0;
}

.comm-agenda-card__desc {
    font-size: 0.86rem;
    color: var(--text-3);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.comm-agenda-card__btn {
    align-self: flex-start;
    margin-top: 6px;
}

/* Giveaway (agenda) */
.comm-giveaway-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comm-giveaway-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.45;
}

.comm-giveaway-hint a {
    color: var(--accent-2);
    text-decoration: none;
    font-weight: 600;
}

.comm-giveaway-hint a:hover {
    text-decoration: underline;
}

.comm-giveaway-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-2);
    text-decoration: none;
}

.comm-giveaway-link:hover {
    text-decoration: underline;
}

/* Admin — même bundle CSS (formulaire liste événements) */
.admin-form-grid--community-event {
    max-width: 640px;
}

.admin-btn-danger-text {
    color: var(--danger);
}

.admin-td--row-actions {
    white-space: nowrap;
}
/* ═══ Client — Mes VPS & fiche VPS (refonte) ═══ */

.vpsdash-page.dash-wrap {
    margin-top: 0;
}

/* ─── Liste /my-vps ─── */
.vpsdash-list-hero {
    margin-bottom: 1.75rem;
}

.vpsdash-list-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 0.5rem;
}

.vpsdash-list-title {
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem;
}

.vpsdash-list-lead {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-2);
    line-height: 1.5;
    max-width: 40rem;
}

.vpsdash-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.vpsdash-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1.25rem 0 1.5rem;
}

.vpsdash-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.86rem;
}

.vpsdash-summary-pill strong {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent);
}

.vpsdash-summary-pill--note {
    color: var(--text-3);
    font-size: 0.8rem;
}

.vpsdash-summary-pill--billing {
    border-style: dashed;
}

.vpsdash-summary-pill--billing a {
    color: inherit;
    text-decoration: none;
}

.vpsdash-summary-pill--billing a:hover {
    color: var(--accent);
}

.vpsdash-main-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vpsdash-detail-body--wide {
    grid-template-columns: 1fr;
}

.vpsdash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.vpsdash-card {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.vpsdash-card:hover {
    border-color: rgba(0, 255, 170, 0.22);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.vpsdash-card__accent {
    height: 4px;
    background: var(--gradient);
    opacity: 0.85;
}

.vpsdash-card--provisioning .vpsdash-card__accent {
    background: linear-gradient(90deg, #ffaa00, #ff8800);
}

.vpsdash-card--suspended .vpsdash-card__accent {
    background: linear-gradient(90deg, #ff4466, #cc3355);
}

.vpsdash-card--deleting .vpsdash-card__accent {
    background: var(--text-3);
}

.vpsdash-card__body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vpsdash-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vpsdash-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.vpsdash-card__plan {
    font-size: 0.82rem;
    color: var(--text-3);
    margin: 0;
}

.vpsdash-card__ip {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    color: var(--accent-2);
    word-break: break-all;
}

[data-theme="light"] .vpsdash-card__ip {
    background: rgba(0, 0, 0, 0.04);
}

.vpsdash-card__ip--pending {
    color: var(--text-3);
    font-style: italic;
}

.vpsdash-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.vpsdash-spec {
    text-align: center;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}

.vpsdash-spec__val {
    display: block;
    font-weight: 800;
    font-size: 1rem;
    font-family: var(--font-mono);
    color: var(--text);
    line-height: 1.2;
}

.vpsdash-spec__lbl {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-top: 4px;
}

.vpsdash-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    margin: 0 -18px -16px;
    padding: 14px 18px 16px;
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .vpsdash-card__foot {
    background: rgba(0, 0, 0, 0.03);
}

.vpsdash-card__renew {
    font-size: 0.78rem;
    color: var(--text-3);
}

.vpsdash-card__renew strong {
    color: var(--text-2);
}

.vpsdash-muted {
    color: var(--text-3);
}

.vpsdash-card__renew--full {
    width: 100%;
    text-align: center;
}

.vpsdash-card__cta {
    width: 100%;
    justify-content: center;
}

.vpsdash-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 20px;
    border: 1px dashed var(--border);
    background: linear-gradient(165deg, rgba(0, 255, 170, 0.04), transparent);
    max-width: 28rem;
    margin: 0 auto;
}

.vpsdash-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

.vpsdash-empty__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.vpsdash-empty p {
    color: var(--text-2);
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ─── Fiche /my-vps/:id ─── */
.vpsdash-detail-hero {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.35rem 1.35rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(0, 255, 170, 0.06), rgba(0, 102, 255, 0.04));
    overflow: hidden;
}

.vpsdash-detail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 100% 0%, rgba(0, 255, 170, 0.12), transparent 45%);
    pointer-events: none;
}

.vpsdash-detail-hero > * {
    position: relative;
    z-index: 1;
}

.vpsdash-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-3);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.vpsdash-back:hover {
    color: var(--accent);
}

.vpsdash-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.vpsdash-detail-title {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.vpsdash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vpsdash-chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-2);
}

[data-theme="light"] .vpsdash-chip {
    background: rgba(255, 255, 255, 0.6);
}

.vpsdash-detail-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1024px) {
    .vpsdash-detail-body {
        grid-template-columns: 1fr;
    }
}

.vpsdash-panel {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    margin-bottom: 16px;
    overflow: hidden;
}

.vpsdash-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.92rem;
}

.vpsdash-panel__body {
    padding: 16px 18px 18px;
}

.vpsdash-panel--danger .vpsdash-panel__head {
    color: #ff8899;
    border-bottom-color: rgba(255, 68, 102, 0.25);
}

/* Specs table — reuse vps-info-table, tighten in panel */
.vpsdash-panel .vps-info-table td:first-child {
    width: 38%;
}

/* SSH block enhanced */
.vpsdash-ssh .vps-ssh-block {
    gap: 10px;
}

.vpsdash-ssh .vps-ssh-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.vpsdash-ssh .vps-ssh-row:last-of-type {
    border-bottom: none;
}

.vpsdash-ssh-cmd-wrap {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
}

[data-theme="light"] .vpsdash-ssh-cmd-wrap {
    background: rgba(0, 0, 0, 0.04);
}

.vpsdash-ssh-cmd-wrap .vps-ssh-cmd {
    margin: 0 0 8px;
}

.vpsdash-ssh-cmd-wrap .vps-ssh-cmd:last-child {
    margin-bottom: 0;
}

/* Toolbar actions */
.vpsdash-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (min-width: 400px) {
    .vpsdash-toolbar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vpsdash-toolbar .vps-action-btn,
.vpsdash-toolbar .vps-console-btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
}

.vpsdash-toolbar-row2 {
    grid-column: 1 / -1;
}

/* Rename */
.vpsdash-rename .vps-rename-hint {
    font-size: 0.82rem;
    color: var(--text-3);
    line-height: 1.45;
    margin-bottom: 12px;
}

/* Metrics */
.vpsdash-panel--metrics .vpsdash-panel__head {
    width: 100%;
    flex-wrap: wrap;
}

.vpsdash-panel--metrics .vpsdash-panel__head > span:first-child {
    flex: 1 1 auto;
}

.vpsdash-panel--metrics .vps-metrics-range {
    flex-shrink: 0;
}

.vpsdash-panel--metrics canvas {
    max-height: 200px;
}

/* Activity timeline */
.vpsdash-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vpsdash-tl-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.84rem;
}

.vpsdash-tl-item:last-child {
    border-bottom: none;
}

.vpsdash-tl-time {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-3);
}

.vpsdash-tl-action {
    color: var(--text);
    word-break: break-word;
}

/* Sticky aside on desktop */
@media (min-width: 1025px) {
    .vpsdash-aside-col {
        position: sticky;
        top: 88px;
    }
}

/* Quick links bar */
.vpsdash-quickbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 1.35rem;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .vpsdash-quickbar {
    background: rgba(0, 0, 0, 0.03);
}

.vpsdash-quickbar__link {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.vpsdash-quickbar__link:hover {
    border-bottom-color: rgba(0, 255, 170, 0.45);
}

/* Metrics summary pills */
.vpsdash-metrics-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 520px) {
    .vpsdash-metrics-summary {
        grid-template-columns: 1fr;
    }
}

.vpsdash-metric-pill {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.vpsdash-metric-pill__lbl {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 4px;
}

.vpsdash-metric-pill__val {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--accent);
}

.vpsdash-copycell {
    white-space: nowrap;
}

.btn-copy--tiny {
    font-size: 0.72rem;
    padding: 4px 8px;
    margin-left: 6px;
}

.vpsdash-ssh-lead {
    font-size: 0.82rem;
    color: var(--text-3);
    line-height: 1.45;
    margin: 0 0 10px;
}

.vpsdash-ssh-bundle-btn {
    width: 100%;
    margin-bottom: 14px;
    justify-content: center;
}

/* Bandeau état live (API) */
.vpsdash-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 1.25rem;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 255, 170, 0.2);
    background: rgba(0, 255, 170, 0.05);
}

.vpsdash-live__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 0.88rem;
}

.vpsdash-live__k {
    color: var(--text-3);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.vpsdash-live__v {
    color: var(--accent);
    font-weight: 700;
}

.vpsdash-live__flag {
    font-size: 0.78rem;
    color: #ffaa44;
}

/* Métriques : CPU / Réseau */
.vpsdash-panel__head--split {
    flex-wrap: wrap;
    gap: 12px;
}

.vpsdash-metric-kind {
    display: inline-flex;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.metric-kind-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.metric-kind-btn.active {
    background: rgba(0, 255, 170, 0.12);
    color: var(--accent);
}

.vpsdash-metrics-hint {
    font-size: 0.78rem;
    color: var(--text-3);
    margin: 0 0 12px;
    line-height: 1.4;
}

.vpsdash-metric-pill__val--small {
    font-size: 0.82rem;
    line-height: 1.35;
}

/* Aide commandes SSH */
.vpsdash-panel--help .vpsdash-help-lead {
    font-size: 0.84rem;
    color: var(--text-2);
    margin: 0 0 14px;
    line-height: 1.45;
}

.vpsdash-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vpsdash-help-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .vpsdash-help-item {
    background: rgba(0, 0, 0, 0.03);
}

.vpsdash-help-item__text {
    flex: 1 1 200px;
    min-width: 0;
}

.vpsdash-help-item__label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-2);
    margin-bottom: 6px;
    line-height: 1.35;
}

.vpsdash-help-item__code {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--accent-2);
}
/* Annuaire public /servers-list — compléments (clics, filtre en ligne) */
.sl-row--clickable {
    cursor: pointer;
}

.sl-row.sl-is-filtered-out {
    display: none !important;
}
/* Maintenance — 503 « launch », thème néon maîtrisé (Anomalya) */

:root {
    --maint-mint: #3cf5c8;
    --maint-mpring: #5cf0d0;
    --maint-cyan: #7cc8ff;
    --maint-glow: rgba(60, 245, 200, 0.2);
    --maint-glow-soft: rgba(124, 200, 255, 0.12);
}

/* Surlignages dégradé — lisibles, pas « boue » */
.maint-hl {
    color: var(--accent);
    background-image: linear-gradient(118deg, var(--maint-mint) 0%, var(--maint-mpring) 48%, var(--maint-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-hl--soft {
    background-image: linear-gradient(118deg, rgba(60, 245, 200, 0.96) 0%, rgba(124, 200, 255, 0.92) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-text-accent {
    color: var(--accent);
    font-weight: 700;
    text-shadow: 0 0 20px var(--maint-glow);
}

/* Bandeau : verre + une seule ligne néon */
.maint-launch-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 18px;
    margin: 0 0 22px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, rgba(60, 245, 200, 0.06), rgba(124, 200, 255, 0.03));
    box-shadow:
        0 0 0 1px rgba(60, 245, 200, 0.12) inset,
        0 12px 32px rgba(0, 0, 0, 0.2);
}

.maint-launch-top .news-back {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-2);
    transition: color 0.15s ease;
}

.maint-launch-top .news-back:hover {
    color: var(--maint-mint);
}

.maint-launch-eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.maint-launch-eyebrow a {
    color: var(--text-2);
    font-weight: 700;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.maint-launch-eyebrow a:hover {
    color: var(--maint-mint);
    background: rgba(60, 245, 200, 0.08);
    box-shadow: 0 0 18px var(--maint-glow-soft);
}

.maint-launch-dot {
    margin: 0 0.35em;
    opacity: 0.4;
    color: var(--maint-mpring);
    user-select: none;
}

/* Catégorie + hero */
.maint-launch-head {
    position: relative;
}

.maint-launch-cat {
    box-shadow:
        0 0 0 1px rgba(60, 245, 200, 0.22),
        0 10px 28px rgba(0, 0, 0, 0.22);
}

.maint-launch-titleblock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(14px, 3vw, 32px);
    align-items: start;
    margin: 12px 0 8px;
}

.maint-launch-title {
    margin: 0;
    letter-spacing: -0.035em;
    line-height: 1.14;
}

.maint-launch-visual {
    flex-shrink: 0;
}

/* Cadre sablier : un halo, pas trois */
.maint-sandglass-frame {
    width: 88px;
    height: 108px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    position: relative;
    background:
        radial-gradient(100% 80% at 40% 0%, rgba(60, 245, 200, 0.14), transparent 58%),
        radial-gradient(100% 90% at 60% 100%, rgba(124, 200, 255, 0.1), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(60, 245, 200, 0.22);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.32),
        0 0 32px rgba(60, 245, 200, 0.08);
}

.maint-sandglass {
    width: 52px;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(60, 245, 200, 0.2));
    animation: maint-sandglass-float 5s ease-in-out infinite;
}

.maint-sandglass__sand--top {
    animation: maint-sandglass-sand-a 2.8s ease-in-out infinite;
    transform-origin: 50% 30%;
}

.maint-sandglass__sand--bot {
    animation: maint-sandglass-sand-b 2.8s ease-in-out infinite;
    transform-origin: 50% 70%;
}

@keyframes maint-sandglass-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes maint-sandglass-sand-a {
    0%,
    100% {
        opacity: 0.28;
    }
    50% {
        opacity: 0.42;
    }
}

@keyframes maint-sandglass-sand-b {
    0%,
    100% {
        opacity: 0.38;
    }
    50% {
        opacity: 0.52;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maint-sandglass,
    .maint-sandglass__sand--top,
    .maint-sandglass__sand--bot {
        animation: none !important;
    }
}

.maint-launch-meta__accent {
    color: var(--accent);
    font-weight: 700;
}

/* Chapô */
.maint-launch-lede {
    position: relative;
    margin: 0 0 16px;
    padding-left: 16px;
}

.maint-launch-lede::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--maint-mint), var(--maint-cyan));
    box-shadow: 0 0 14px var(--maint-glow);
}

.maint-launch-lede__accent {
    font-weight: 800;
    background-image: linear-gradient(118deg, var(--maint-mint) 0%, var(--maint-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-launch-lede__muted {
    color: var(--text-2);
}

.maint-launch-lede__strong {
    color: var(--text);
    font-weight: 800;
}

/* Périmètre 503 */
.maint-launch-kicker {
    margin: 0 0 28px;
    max-width: 52rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-2);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.12);
}

.maint-kicker__kw {
    color: var(--maint-mint);
    font-weight: 800;
    text-shadow: 0 0 18px var(--maint-glow);
}

/* Section prod */
.maint-launch-prod {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.maint-launch-prod__title {
    margin-bottom: 16px;
}

.maint-launch-prod__card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-card);
    padding: 18px 20px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.maint-launch-prod__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 240px at 0% -30%, rgba(60, 245, 200, 0.12), transparent 55%),
        radial-gradient(700px 200px at 100% 120%, rgba(124, 200, 255, 0.1), transparent 55%);
    opacity: 0.9;
}

.maint-launch-prod__card > * {
    position: relative;
    z-index: 1;
}

.maint-launch-prod__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.maint-launch-prod__identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.maint-launch-prod__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.45;
    color: var(--text);
}

.maint-launch-prod__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(8, 12, 14, 0.92);
    background: linear-gradient(120deg, rgba(60, 245, 200, 0.95), rgba(124, 200, 255, 0.82));
    box-shadow: 0 6px 18px rgba(60, 245, 200, 0.15);
}

.maint-launch-prod__time {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px var(--maint-glow);
}

.maint-launch-prod__time--muted {
    color: var(--text-3);
    font-style: italic;
    font-weight: 500;
    white-space: normal;
    text-align: right;
    max-width: 44%;
    text-shadow: none;
}

.maint-launch-prod__lede {
    margin: 0 0 16px;
    color: var(--text-2);
    font-size: 0.96rem;
    line-height: 1.65;
}

.maint-launch-prod__fine {
    color: var(--text-3);
    font-weight: 500;
}

.maint-launch-prod__meter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.maint-launch-prod__note {
    margin: 0;
    font-size: 0.94rem;
    color: var(--text-2);
    line-height: 1.65;
}

.maint-launch-prod__pct {
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px var(--maint-glow);
}

.maint-launch-prod__eta {
    color: var(--text-2);
}

/* Barre */
.maint-launch-bar {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.maint-launch-bar__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(60, 245, 200, 0.35), rgba(60, 245, 200, 0.95), rgba(124, 200, 255, 0.88));
    box-shadow:
        0 0 18px rgba(60, 245, 200, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: width 0.35s ease;
}

.maint-launch-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.86rem;
    color: var(--text-3);
}

.maint-launch-subsep {
    opacity: 0.45;
}

/* Communauté */
.maint-launch-community {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.maint-launch-community__title {
    margin-bottom: 10px;
}

.maint-launch-community__hint {
    margin: 0 0 14px;
    color: var(--text-3);
    font-size: 0.9rem;
    line-height: 1.55;
}

.maint-inline-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(60, 245, 200, 0.35);
}

.maint-inline-link:hover {
    text-decoration-color: rgba(60, 245, 200, 0.75);
    text-shadow: 0 0 12px var(--maint-glow-soft);
}

.maint-launch-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.maint-launch-cta .btn {
    min-height: 44px;
}

/* Mobile */
@media (max-width: 720px) {
    .news-article-page.maint-launch {
        padding-top: 72px;
        padding-bottom: 56px;
    }

    .maint-launch-title {
        font-size: clamp(1.35rem, 5.4vw, 2.05rem);
        line-height: 1.18;
    }

    .maint-launch-lede {
        font-size: 1.02rem;
        line-height: 1.65;
    }

    .maint-launch-kicker {
        margin-bottom: 22px;
    }
}

@media (max-width: 640px) {
    .maint-launch-titleblock {
        grid-template-columns: 1fr;
    }

    .maint-sandglass-frame {
        width: 78px;
        height: 96px;
        border-radius: 16px;
        justify-self: start;
    }

    .maint-sandglass {
        width: 46px;
    }

    .maint-launch-prod__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .maint-launch-prod__time,
    .maint-launch-prod__time--muted {
        max-width: none;
        text-align: left;
        white-space: normal;
    }

    .maint-launch-sub {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .maint-launch-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .maint-launch-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .maint-launch-community__hint {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Mode minimal */
.maint-minimal {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
}

.maint-minimal__card {
    width: min(560px, 100%);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 28px 22px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.maint-minimal__emoji {
    font-size: 2rem;
    margin-bottom: 10px;
}

.maint-minimal__title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.maint-minimal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 520px) {
    .maint-minimal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .maint-minimal__actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }
}