/* ═══════════════════════════════════════════════════════════════════════
   COINSBOT — « SALOON »
   Système de design issu de la refonte : bois brûlé, or d'enseigne, feutre
   vert, velours rouge et papier crème. Trois fontes seulement :
     Rye            — les enseignes (h1, h2, chiffres de machine)
     Bubblegum Sans — les étiquettes, boutons, noms de commandes
     Amaranth       — tout le texte courant
   Cette feuille est chargée EN DERNIER sur chaque page : elle redéfinit les
   jetons de couleur des trois familles historiques (« salon », générique,
   dashboard.css) puis habille les composants. Aucune page n'a besoin de
   réécrire son balisage pour prendre le nouveau thème.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Bubblegum+Sans&family=Amaranth:ital,wght@0,400;0,700;1,400&display=swap');

/* ─── 1. LA PALETTE ──────────────────────────────────────────────────── */
:root {
    /* Bois brûlé — du fond de salle au comptoir */
    --sl-void: #0b0b0a;
    --sl-night: #0d0d0c;
    --sl-band: #0f0f0f;
    --sl-inset: #121110;
    --sl-surface: #141312;
    --sl-card: #171615;
    --sl-raised: #191817;
    --sl-raised-2: #1a1a19;
    --sl-line: #2d2e2e;
    --sl-line-soft: #1f1e1d;
    --sl-line-strong: #4a4842;

    /* Encres — crème de vieux papier */
    --sl-cream: #f4efe4;
    --sl-paper: #fbf8f1;
    --sl-ink: #e6e0d4;
    --sl-ink-quiet: #b9b1a1;
    --sl-ink-faint: #8d8677;
    --sl-ink-dim: #a8a196;
    --sl-ink-nav: #cfc7b8;
    --sl-ink-mute: #5f5a50;

    /* Or d'enseigne */
    --sl-gold: #ffcc4d;
    --sl-amber: #ffac33;
    --sl-brass: #a8752a;
    --sl-wood: #7a5417;
    --sl-wood-deep: #6b4a18;
    --sl-wood-warm: #8a6524;
    --sl-on-gold: #241a08;

    /* Feutre */
    --sl-felt: #22352c;
    --sl-felt-deep: #1b2b23;
    --sl-felt-line: #395c48;
    --sl-felt-bar: #4d6b52;
    --sl-sage: #9ec2a5;
    --sl-sage-soft: #b9c9b8;
    --sl-sage-text: #dbe4d5;
    --sl-sage-bright: #e8ecdf;

    /* Velours rouge */
    --sl-velvet: #5e2626;
    --sl-velvet-line: #8a4a44;
    --sl-velvet-ink: #e8cfc9;
    --sl-velvet-quiet: #cdaaa3;
    --sl-velvet-label: #e3b0a5;

    /* Papier (bandes claires) */
    --sl-paper-line: #d8cfba;
    --sl-paper-ink: #1a1a19;
    --sl-paper-quiet: #57534a;

    /* Raretés */
    --sl-commune: #8d8677;
    --sl-rare: #9ec2a5;
    --sl-epique: #ffcc4d;
    --sl-legendaire: #ffac33;

    /* Fontes */
    --sl-display: 'Luckiest Guy', 'Bodoni Moda', Georgia, serif;
    /* Police fonctionnelle : portée par les libellés, badges, nav, en-têtes de
       tableau et petits titres. Doit rester lisible en capitales et en petit
       corps — pas de fonte décorative ici (cf. --sl-fun). */
    --sl-label: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sl-body: Amaranth, Georgia, 'Times New Roman', serif;
    /* Fonte décorative, réservée aux accents ludiques (jamais du texte d'UI) */
    --sl-fun: 'Bubblegum Sans', 'Trebuchet MS', cursive;

    /* Reliefs */
    --sl-shadow: 0 14px 30px rgba(0, 0, 0, .5);
    --sl-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --sl-bevel: inset 0 0 0 6px var(--sl-inset);
    --sl-shell: 1240px;

    /* ── Famille « salon » (home, boutique, premium, collection, offre…) ── */
    --ink-canvas: var(--sl-void);
    --ink-surface: var(--sl-surface);
    --ink-raised: var(--sl-raised);
    --ink-sunken: var(--sl-night);
    --hairline: var(--sl-line);
    --hairline-soft: var(--sl-line-soft);
    --hairline-gold: var(--sl-wood-deep);
    --gold: var(--sl-gold);
    --gold-bright: #ffe08a;
    --gold-light: #ffe08a;
    --gold-deep: var(--sl-wood);
    --gold-dark: var(--sl-wood-deep);
    --felt: var(--sl-felt);
    --felt-bright: var(--sl-sage);
    --rouge: var(--sl-velvet-line);
    --text: var(--sl-ink);
    --text-quiet: var(--sl-ink-quiet);
    --text-faint: var(--sl-ink-faint);
    --serif: var(--sl-display);
    --sans: var(--sl-body);
    --glow: rgba(255, 172, 51, .28);

    /* ── Famille générique (cartes, status, admin, tutoriel, why…) ── */
    --bg-primary: var(--sl-void);
    --bg-secondary: var(--sl-surface);
    --bg-tertiary: var(--sl-card);
    --bg-card: var(--sl-card);
    --bg-card-hover: #201e1c;
    --accent: var(--sl-gold);
    --accent-hover: var(--sl-amber);
    --border: var(--sl-line);
    --border-color: var(--sl-line);
    --text-primary: var(--sl-ink);
    --text-secondary: var(--sl-ink-quiet);
    --text-muted: var(--sl-ink-faint);
    --success: var(--sl-sage);
    --warning: var(--sl-amber);
    --danger: var(--sl-velvet-line);
    --info: var(--sl-sage-soft);
    --radius: 6px;
    --r-commune: var(--sl-commune);
    --r-rare: var(--sl-rare);
    --r-epique: var(--sl-epique);
    --r-legendaire: var(--sl-legendaire);
    --accent-green: var(--sl-sage);
    --accent-blue: var(--sl-sage-soft);
    --accent-cyan: #a9cfc6;
    --accent-orange: var(--sl-amber);
    --accent-red: var(--sl-velvet-line);
    --accent-purple: #c8a9b8;
    --accent-pink: var(--sl-velvet-label);

    /* ── Famille dashboard.css (index, configs, guides) ── */
    --surface-void: var(--sl-void);
    --surface-inset: var(--sl-night);
    --surface-base: var(--sl-surface);
    --surface-raised: var(--sl-raised);
    --surface-hover: #22201e;
    --ink-bright: var(--sl-cream);
    --ink: var(--sl-ink);
    --ink-dim: var(--sl-ink-quiet);
    --ink-faint: var(--sl-ink-faint);
    --gold-ink: var(--sl-on-gold);
    --rule: rgba(122, 84, 23, .55);
    --rule-strong: var(--sl-wood-deep);
    --rule-bright: var(--sl-wood);
    --pos: var(--sl-sage);
    --pos-ink: #14231a;
    --warn: var(--sl-amber);
    --neg: #d98a82;
    --neg-solid: var(--sl-velvet);
    --violet: #c8a9b8;
    --roulette-red: var(--sl-velvet);
    --roulette-black: var(--sl-raised-2);
    --font-display: var(--sl-display);
    --font-ui: var(--sl-body);
    --accent-soft: rgba(255, 204, 77, .12);
    --accent-glow: rgba(255, 172, 51, .3);
    --shadow: var(--sl-shadow);
    --shadow-gold: 0 14px 30px rgba(122, 84, 23, .35);

    /* Séries de graphique — teintes de la salle, toutes lisibles sur bois */
    --chart-1: #ffcc4d;
    --chart-2: #d98a82;
    --chart-3: #9ec2a5;
    --chart-4: #a9cfc6;
    --chart-5: #ffac33;
    --chart-6: #c8a9b8;
    --chart-7: #e3b0a5;
    --chart-8: #b9c9b8;
    --chart-9: #e8d38a;
    --chart-10: #9fb0c2;
    --chart-11: #cdaaa3;
    --chart-12: #cfc7b8;
}

/* ─── 2. LA BASE ─────────────────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--sl-void);
    color: var(--sl-ink);
    font-family: var(--sl-body);
    font-size: 17px;
    line-height: 1.6;
}

a {
    color: var(--sl-gold);
    text-decoration: none;
}

a:hover {
    color: var(--sl-amber);
}

h1,
h2 {
    font-family: var(--sl-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .01em;
}

h3,
h4,
h5,
h6 {
    font-family: var(--sl-label);
    font-weight: 600;
    letter-spacing: .01em;
}

/* L'enseigne : crème claire sur bois. Réservée aux titres posés sur du sombre. */
h1 {
    color: var(--sl-cream);
    text-shadow: 0 3px 0 var(--sl-wood-deep);
}

/* Les anciens titres en dégradé découpé (background-clip: text) redeviennent
   de l'or plein : l'enseigne est peinte, pas dégradée. */
h1,
h2,
.section-title,
.display {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

code,
kbd,
pre,
.cmd-name,
.cmd-usage,
.t-cmd {
    font-family: var(--sl-label);
    letter-spacing: .01em;
}

::selection {
    background: var(--sl-gold);
    color: var(--sl-on-gold);
}

:focus-visible {
    outline: 3px solid var(--sl-amber);
    outline-offset: 2px;
}

* {
    scrollbar-color: var(--sl-wood) var(--sl-night);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: var(--sl-night);
}

*::-webkit-scrollbar-thumb {
    background: var(--sl-wood);
    border: 2px solid var(--sl-night);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--sl-brass);
}

/* ─── 3. LES BOUTONS — bois épais, chant inférieur marqué ────────────── */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
    font-family: var(--sl-label);
    letter-spacing: .03em;
    cursor: pointer;
}

.sl-btn,
.btn-gold,
.btn-primary,
.btn.primary,
button.primary,
.cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sl-label);
    font-size: 16px;
    letter-spacing: .03em;
    color: var(--sl-on-gold);
    background: var(--sl-gold);
    border: 2px solid var(--sl-wood);
    border-bottom-width: 5px;
    border-radius: 5px;
    padding: 13px 24px;
    cursor: pointer;
    transition: transform .12s ease, background-color .18s ease, border-color .18s ease;
}

.sl-btn:hover,
.btn-gold:hover,
.btn-primary:hover,
.btn.primary:hover,
button.primary:hover,
.cta-primary:hover {
    background: var(--sl-amber);
    color: var(--sl-on-gold);
    border-color: var(--sl-wood-deep);
}

.sl-btn:active,
.btn-gold:active,
.btn-primary:active {
    transform: translateY(2px);
    border-bottom-width: 3px;
}

.sl-btn-ghost,
.btn-secondary,
.btn-outline,
.btn.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sl-label);
    font-size: 16px;
    letter-spacing: .03em;
    color: var(--sl-gold);
    background: transparent;
    border: 2px solid var(--sl-wood-deep);
    border-bottom-width: 5px;
    border-radius: 5px;
    padding: 13px 24px;
    cursor: pointer;
    transition: transform .12s ease, border-color .18s ease, color .18s ease;
}

.sl-btn-ghost:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn.secondary:hover {
    color: var(--sl-amber);
    border-color: var(--sl-wood);
}

.sl-btn-ghost:active,
.btn-secondary:active,
.btn-outline:active {
    transform: translateY(2px);
    border-bottom-width: 3px;
}

.sl-btn-sm,
.btn-sm {
    font-size: 13px;
    padding: 8px 14px;
    border-bottom-width: 4px;
    letter-spacing: .06em;
}

.sl-btn-felt {
    color: var(--sl-sage-bright);
    background: var(--sl-felt-deep);
    border-color: var(--sl-felt-line);
}

/* ─── 4. LES SURFACES ────────────────────────────────────────────────── */
/* Le panneau d'enseigne : filet doré doublé, cadre intérieur sombre. */
.sl-panel {
    background: var(--sl-surface);
    border: 3px double var(--sl-wood);
    box-shadow: inset 0 0 0 10px var(--sl-band), var(--sl-shadow-lg);
    padding: 34px 40px 40px;
}

/* La carte de salle : bois, liseré, tête plus large. */
.sl-card {
    background: var(--sl-card);
    border: 2px solid var(--sl-line);
    border-top: 5px solid var(--sl-wood-deep);
    padding: 22px 20px 24px;
}

.sl-card h3 {
    margin: 0 0 10px;
    font-family: var(--sl-label);
    font-size: 21px;
    color: var(--sl-amber);
}

.sl-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--sl-ink-dim);
    text-wrap: pretty;
}

/* La machine : caisson bombé, biseau intérieur. */
.sl-machine {
    background: var(--sl-raised);
    border: 2px solid var(--sl-wood-deep);
    border-radius: 14px 14px 6px 6px;
    padding: 18px;
    box-shadow: var(--sl-bevel), var(--sl-shadow);
}

.sl-machine-label {
    margin: 0 0 14px;
    text-align: center;
    font-family: var(--sl-label);
    font-size: 20px;
    letter-spacing: .16em;
    color: var(--sl-brass);
}

.sl-reels {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 6px;
    justify-content: center;
    max-width: 100%;
    padding: 12px;
    background: var(--sl-night);
    border: 2px solid var(--sl-line);
    border-radius: 6px;
}

.sl-reel {
    width: 40px;
    height: 58px;
    overflow: hidden;
    background: var(--sl-cream);
    border: 1px solid var(--sl-ink-faint);
    border-radius: 3px;
    display: block;
}

.sl-reel-strip {
    display: block;
    transition: transform 1.6s cubic-bezier(.16, .9, .24, 1);
}

.sl-reel-cell {
    display: flex;
    height: 58px;
    align-items: center;
    justify-content: center;
    font-family: var(--sl-display);
    font-size: 30px;
    color: var(--sl-raised-2);
}

.sl-machine-foot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--sl-ink-faint);
}

/* Le jeton */
.sl-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sl-velvet);
    border: 4px dashed var(--sl-cream);
    font-family: var(--sl-label);
    font-size: 12px;
    color: var(--sl-cream);
}

.sl-chip.felt {
    background: var(--sl-felt);
}

.sl-chip.wood {
    background: var(--sl-wood-deep);
}

.sl-chip.slate {
    background: var(--sl-line);
    border-color: var(--sl-gold);
}

.sl-chip.night {
    background: var(--sl-raised-2);
    border-color: var(--sl-ink-faint);
}

/* La carte de collection */
.sl-collectible {
    background: var(--sl-surface);
    border: 3px double var(--sl-commune);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 14px 26px rgba(0, 0, 0, .4);
}

.sl-collectible.rare {
    border-color: var(--sl-rare);
}

.sl-collectible.epique {
    border-color: var(--sl-epique);
}

.sl-collectible.legendaire {
    border-color: var(--sl-legendaire);
}

.sl-rarity {
    font-family: var(--sl-label);
    font-size: 11px;
    letter-spacing: .14em;
}

.sl-rarity.commune {
    color: var(--sl-commune);
}

.sl-rarity.rare {
    color: var(--sl-rare);
}

.sl-rarity.epique {
    color: var(--sl-epique);
}

.sl-rarity.legendaire {
    color: var(--sl-legendaire);
}

/* La ligne de commande du tutoriel */
.sl-cmd {
    display: grid;
    grid-template-columns: minmax(180px, 230px) 1fr;
    gap: 20px;
    align-items: baseline;
    background: var(--sl-felt-deep);
    border: 1px solid var(--sl-felt-line);
    border-radius: 6px;
    padding: 14px 18px;
}

.sl-cmd code {
    font-family: var(--sl-label);
    font-size: 17px;
    color: var(--sl-gold);
}

.sl-cmd span {
    font-size: 16px;
    line-height: 1.5;
    color: var(--sl-sage-text);
}

@media (max-width: 640px) {
    .sl-cmd {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Les bandes de section */
.sl-band {
    padding: 74px 24px;
    background: var(--sl-band);
}

.sl-band.void {
    background: var(--sl-void);
}

.sl-band.felt {
    background: var(--sl-felt);
    color: var(--sl-sage-bright);
}

.sl-band.velvet {
    background: var(--sl-velvet);
    color: var(--sl-cream);
}

.sl-band.paper {
    background: var(--sl-cream);
    color: var(--sl-paper-ink);
}

.sl-band>.sl-inner,
.sl-inner {
    max-width: var(--sl-shell);
    margin: 0 auto;
}

.sl-band.felt h2,
.sl-band.velvet h2,
.sl-band.paper h2 {
    color: inherit;
    text-shadow: none;
}

.sl-band.paper a {
    color: var(--sl-wood-warm);
}

.sl-band.paper .sl-card,
.sl-paper-card {
    background: var(--sl-paper);
    border: 2px solid var(--sl-paper-line);
    border-bottom-width: 5px;
    border-top: 2px solid var(--sl-paper-line);
    border-radius: 6px;
    padding: 24px 22px;
    color: var(--sl-paper-ink);
}

.sl-band.paper .sl-card h3,
.sl-paper-card h3 {
    color: var(--sl-paper-ink);
    font-size: 20px;
}

.sl-band.paper .sl-card p,
.sl-paper-card p {
    color: var(--sl-paper-quiet);
}

.sl-eyebrow {
    font-family: var(--sl-label);
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--sl-brass);
}

.sl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.sl-grid.tight {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* ─── 5. LA LIGNE D'HORIZON ──────────────────────────────────────────── */
/* Bande de 64 px qui fait la couture entre deux fonds : le décor se découpe
   dans la couleur de la section suivante. Plusieurs décors existent (ville
   far-west, machines à sous, gratte-ciels) ; saloon.js en choisit un par
   page, ou celui de `<body data-skyline="…">`. Les 12 px de sol laissent
   52 px de dégagement — au-delà, un motif serait rogné. */
.sl-skyline {
    height: 64px;
    position: relative;
    overflow: hidden;
}

.sl-skyline .sl-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
}

/* Le décor est posé sur le sol et centré. L'écart doit rester supérieur aux
   débords latéraux des motifs (bras des cactus, leviers des machines), sinon
   deux voisins se touchent et le débord cesse de se lire. */
.sl-skyline .sl-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
}

/* ─── 6. LES GUIRLANDES ──────────────────────────────────────────────── */
.sl-bulbs {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px 0;
}

.sl-bulb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sl-gold);
    box-shadow: 0 0 10px rgba(255, 204, 77, .75);
    animation: sl-bulb 1.6s infinite ease-in-out;
}

@keyframes sl-bulb {

    0%,
    46% {
        opacity: 1;
    }

    54%,
    100% {
        opacity: .28;
    }
}

@keyframes sl-sway {

    0%,
    100% {
        transform: rotate(-1.2deg);
    }

    50% {
        transform: rotate(1.2deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sl-bulb,
    .sl-reel-strip {
        animation: none;
        transition: none;
    }
}

/* ─── 7. LES FORMULAIRES ─────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea,
.input-field {
    font-family: var(--sl-body);
    font-size: 16px;
    color: var(--sl-ink);
    background: var(--sl-night);
    border: 2px solid var(--sl-line);
    border-radius: 4px;
    padding: 10px 14px;
}

input::placeholder,
textarea::placeholder {
    color: var(--sl-ink-mute);
}

input:focus,
select:focus,
textarea:focus,
.input-field:focus {
    border-color: var(--sl-wood);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 172, 51, .2);
}

label,
.label {
    font-family: var(--sl-label);
    letter-spacing: .04em;
    color: var(--sl-ink-quiet);
}

/* ─── 8. LES TABLEAUX ────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
}

th {
    font-family: var(--sl-label);
    letter-spacing: .08em;
    color: var(--sl-brass);
    text-align: left;
    border-bottom: 2px solid var(--sl-line);
    padding: 12px 14px;
}

td {
    border-bottom: 1px solid var(--sl-line-soft);
    padding: 12px 14px;
}

/* ─── 9. LES CLASSES HÉRITÉES DES PAGES EXISTANTES ───────────────────── */
.section-title {
    font-family: var(--sl-display);
    line-height: 1.12;
}

.section-tag,
.eyebrow {
    font-family: var(--sl-label);
    letter-spacing: .2em;
    color: var(--sl-brass);
}

.section-desc {
    font-family: var(--sl-body);
    color: var(--sl-ink-quiet);
    text-wrap: pretty;
}

.cmd-card,
.feature-card,
.game-item,
.tip-box {
    background: var(--sl-card);
    border: 2px solid var(--sl-line);
    border-top: 5px solid var(--sl-wood-deep);
    border-radius: 0;
}

.cmd-name,
.game-name,
.t-cmd {
    font-family: var(--sl-label);
    color: var(--sl-gold);
}

.cmd-desc,
.game-desc {
    font-family: var(--sl-body);
    color: var(--sl-ink-dim);
}

.cmd-tag,
.cmd-cat,
.badge,
.pill,
.tag {
    font-family: var(--sl-label);
    letter-spacing: .1em;
}

.gold {
    color: var(--sl-gold);
}

.num,
.value,
.stat-value {
    font-family: var(--sl-display);
    letter-spacing: .01em;
}

.terminal-line,
.t-prefix,
.t-result {
    font-family: var(--sl-label);
}

/* ─── 9 bis. LE TABLEAU DES COMMANDES (tutoriel) ─────────────────────── */
/* Le grand cadre en bois posé sur le feutre, une ligne par commande : le
   nom en or, la description en vert clair — la fiche punaisée au mur. */
.commands-table-wrapper {
    background: var(--sl-felt);
    border: 6px solid var(--sl-wood-deep);
    border-radius: 10px;
    padding: 26px 24px;
    overflow-x: auto;
}

.commands-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.commands-table thead th {
    font-family: var(--sl-label);
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sl-sage);
    border: 0;
    padding: 0 18px 6px;
}

.commands-table tbody td {
    background: var(--sl-felt-deep);
    border-top: 1px solid var(--sl-felt-line);
    border-bottom: 1px solid var(--sl-felt-line);
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--sl-sage-text);
}

.commands-table tbody td:first-child {
    border-left: 1px solid var(--sl-felt-line);
    border-radius: 6px 0 0 6px;
}

.commands-table tbody td:last-child {
    border-right: 1px solid var(--sl-felt-line);
    border-radius: 0 6px 6px 0;
}

.commands-table .cmd-tag {
    font-family: var(--sl-label);
    font-size: 17px;
    color: var(--sl-gold);
    background: transparent;
    border: 0;
    padding: 0;
}

.cmd-cat {
    font-family: var(--sl-label);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sl-sage);
}

/* ─── 9 ter. L'ORIGINAL ET LA COPIE (why-coinsbot) ───────────────────── */
/* Deux panneaux face à face : l'un sur le feutre, cerclé d'or ; l'autre gris,
   au filet en pointillés. La hiérarchie se lit sans lire le texte. */
.comparison-card {
    border-radius: 10px;
    padding: 30px 28px;
}

.comparison-card.real {
    background: var(--sl-felt);
    border: 3px double var(--sl-gold);
}

.comparison-card.copy {
    background: var(--sl-raised-2);
    border: 3px double var(--sl-line-strong);
}

.comparison-card h3 {
    font-family: var(--sl-label);
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.comparison-card.real h3 {
    color: var(--sl-gold);
}

.comparison-card.copy h3 {
    color: var(--sl-ink-faint);
}

.comparison-card .check-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.comparison-card .check-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

.comparison-card.real .check-list li {
    color: var(--sl-sage-bright);
}

.comparison-card.copy .check-list li {
    color: #938d82;
}

/* Le jeton : plein et doré côté original, creux et pointillé côté copie. */
.comparison-card .check-list .icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-top: 3px;
    font-size: 0;
    color: transparent;
}

.comparison-card.real .check-list .icon {
    background: var(--sl-gold);
    border: 3px double var(--sl-wood);
}

.comparison-card.copy .check-list .icon {
    background: transparent;
    border: 3px dashed var(--sl-ink-mute);
}

.vs-badge {
    font-family: var(--sl-display);
    color: var(--sl-on-gold);
    background: var(--sl-amber);
    border: 3px double var(--sl-wood);
    border-radius: 50%;
}

/* ─── 9 quater. LE DASHBOARD APPLICATIF (dashboard.css) ──────────────── */
/* dashboard.css garde quelques verts écrits en dur, hors jetons : halo de
   fond, voiles de modale, dégradé du hero. On les repeint en bois brûlé
   pour que l'application soit dans la même salle que les pages publiques. */
body::before {
    background:
        radial-gradient(ellipse 85% 55% at 50% -8%, rgba(122, 84, 23, .30), transparent 62%),
        radial-gradient(ellipse 60% 45% at 78% 18%, rgba(168, 117, 42, .14), transparent 60%),
        radial-gradient(ellipse 130% 105% at 50% 42%, transparent 38%, rgba(6, 6, 5, .66) 100%);
}

.home-hero {
    background:
        radial-gradient(ellipse 70% 130% at 22% 45%, rgba(122, 84, 23, .38), transparent 68%),
        var(--sl-surface);
}

.sidebar-scrim,
.modal-overlay,
.page-tool .modal-overlay,
.confirm-overlay {
    background: rgba(11, 11, 10, .78);
}

/* La barre latérale : un comptoir en bois, pas un tapis vert. */
.sidebar {
    background: var(--sl-surface);
    border-right: 2px solid var(--sl-line);
}

/* ─── 10. LA BARRE DE NAVIGATION PARTAGÉE (site-nav.js) ──────────────── */
/* site-nav.js injecte ses styles après cette feuille : on force le thème. */
.cb-nav {
    background: var(--sl-surface) !important;
    border-bottom: 2px solid var(--sl-line) !important;
    box-shadow: 0 2px 0 var(--sl-raised-2), 0 10px 24px rgba(0, 0, 0, .55) !important;
    font-family: var(--sl-body) !important;
    backdrop-filter: none !important;
}

.cb-nav a,
.cb-nav button {
    font-family: var(--sl-label) !important;
    letter-spacing: .04em !important;
}

.cb-nav a:not([class*="cta"]) {
    color: var(--sl-ink-nav) !important;
}

.cb-nav a:not([class*="cta"]):hover,
.cb-nav a[aria-current] {
    color: var(--sl-gold) !important;
}

.cb-nav [class*="brand"],
.cb-nav [class*="logo"] {
    font-family: var(--sl-display) !important;
    color: var(--sl-gold) !important;
}

.cb-nav #cbNavCta,
.cb-nav [class*="cta"] {
    color: var(--sl-on-gold) !important;
    background: var(--sl-amber) !important;
    border: 2px solid var(--sl-wood) !important;
    border-bottom-width: 4px !important;
    border-radius: 4px !important;
}

.cb-nav #cbNavCta:hover,
.cb-nav [class*="cta"]:hover {
    background: var(--sl-gold) !important;
}

/* ─── 11. L'EN-TÊTE ET LE PIED PROPRES AUX PAGES SALOON ──────────────── */
.sl-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--sl-surface);
    border-bottom: 2px solid var(--sl-line);
    box-shadow: 0 2px 0 var(--sl-raised-2), 0 10px 24px rgba(0, 0, 0, .55);
}

.sl-header-inner {
    max-width: var(--sl-shell);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.sl-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.sl-brand-coin {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sl-amber);
    border: 3px double var(--sl-wood);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-on-gold);
    font-family: var(--sl-label);
    font-size: 17px;
}

.sl-brand-name {
    font-family: var(--sl-display);
    font-size: 23px;
    color: var(--sl-gold);
    letter-spacing: .02em;
}

.sl-nav {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-family: var(--sl-label);
    font-size: 15px;
    letter-spacing: .04em;
}

.sl-nav a {
    color: var(--sl-ink-nav);
}

.sl-nav a:hover {
    color: var(--sl-gold);
}

.sl-nav a[aria-current="page"] {
    color: var(--sl-gold);
    border-bottom: 2px solid var(--sl-amber);
}

.sl-spacer {
    flex: 1 1 40px;
}

.sl-footer {
    padding: 56px 24px 40px;
    background: var(--sl-band);
}

.sl-footer-inner {
    max-width: var(--sl-shell);
    margin: 0 auto;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sl-footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sl-footer-col b {
    font-family: var(--sl-label);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    color: var(--sl-ink-mute);
}

.sl-footer p {
    color: var(--sl-ink-faint);
}

/* ─── 12. RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    body {
        font-size: 16px;
    }

    .sl-panel {
        padding: 24px 18px 30px;
    }

    .sl-band {
        padding: 52px 18px;
    }

    .sl-skyline {
        height: 44px;
    }

    /* 32 px de dégagement seulement au-dessus du sol : on réduit le décor
       depuis sa base pour qu'il reste posé dessus au lieu d'être rogné. */
    .sl-skyline .sl-row {
        transform: scale(.62);
        transform-origin: bottom center;
    }

    .sl-header-inner {
        gap: 14px;
    }
}