/* ═══════════════════════════════════════════════════════════════════
   SlotDrop 2026 — système visuel partagé
   Chargé APRÈS les styles inline et premium.css : il gagne la cascade.

   Principe : les pages-outils sont pilotées par des variables CSS
   (--bg-deep, --surface, --accent, --text-dim…). On redéfinit ces
   variables ici, en sombre et en clair, au lieu de réécrire chaque page.
   Le JavaScript des outils n'est pas touché ; les ids restent les mêmes.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sd-r: 22px; --sd-r-sm: 14px; --sd-max: 1180px;
  --sd-ease: cubic-bezier(.2,.7,.2,1);
  --sd-spring: cubic-bezier(.16,1,.3,1);
  --sd-snap: cubic-bezier(.34,1.56,.64,1);
}

/* ── Palette sombre (défaut) ─────────────────────────────────────── */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b12; --bg-2: #0e141f; --bg-3: #151d2b; --bg-4: #1c2636;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
  --text: #f2f5f9; --text-2: #aab4c2; --text-3: #6d7887;
  --green: #22f08e; --green-2: #10c96f; --green-ink: #03261a;
  --gold: #ffc632; --gold-2: #f5a300; --gold-ink: #2b1a03;
  --violet: #a78bfa; --blue: #5bb6ff; --coral: #ff7a59; --red: #ff6b6b;
  --aurora: radial-gradient(900px 520px at 18% -10%, rgba(34,240,142,.20), transparent 60%),
            radial-gradient(700px 420px at 92% 8%, rgba(91,182,255,.12), transparent 60%);
  --card-shadow: 0 30px 60px -40px rgba(0,0,0,.9);

  /* — noms utilisés par les pages-outils — */
  --bg-deep: var(--bg); --bg-glow: var(--bg-3); --bg-card: var(--bg-2);
  --surface: var(--bg-2); --surface-1: var(--bg-2); --surface-2: var(--bg-3);
  --card: var(--bg-2); --s1: var(--bg-2); --s2: var(--bg-3);
  --txt: var(--text); --text-dim: var(--text-2); --dim: var(--text-2); --dim2: var(--text-3);
  --accent: var(--green); --acc: var(--green); --accent-2: var(--blue);
  --accent-soft: rgba(34,240,142,.12); --red-soft: rgba(255,107,107,.14);
  --font-body: var(--sd-font); --font-display: var(--sd-font); --font-b: var(--sd-font); --font-d: var(--sd-font);

  /* — noms de theme.css — */
  --sd-accent: var(--green); --sd-accent-2: var(--blue); --sd-violet: var(--violet); --sd-gold: var(--gold);
  --sd-grad: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  --sd-grad-soft: linear-gradient(135deg, rgba(34,240,142,.12), rgba(91,182,255,.08));
  --sd-glass: rgba(255,255,255,.035); --sd-glass-h: rgba(255,255,255,.065);
  --sd-line: var(--line); --sd-line-h: rgba(34,240,142,.35);
  --sd-glow: none;
  --sd-shadow: var(--card-shadow);
  --p-bg: var(--bg);
}

/* ── Palette claire ──────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9; --bg-2: #ffffff; --bg-3: #eaeef4; --bg-4: #dfe5ee;
  --line: rgba(10,20,30,.10); --line-2: rgba(10,20,30,.20);
  --text: #0b1118; --text-2: #465262; --text-3: #7b8794;
  --green: #0f9d63; --green-2: #0b7f50; --green-ink: #ffffff;
  --gold: #f2b000; --gold-2: #d99a00; --gold-ink: #2b1a03;
  --violet: #6d4fd6; --blue: #1f7ed6; --coral: #e8552f; --red: #d6423e;
  --aurora: radial-gradient(900px 520px at 18% -10%, rgba(15,157,99,.14), transparent 60%),
            radial-gradient(700px 420px at 92% 8%, rgba(31,126,214,.10), transparent 60%);
  --card-shadow: 0 30px 60px -44px rgba(10,20,30,.35);
  --accent-soft: rgba(15,157,99,.12); --red-soft: rgba(214,66,62,.12);
  --sd-grad-soft: linear-gradient(135deg, rgba(15,157,99,.10), rgba(31,126,214,.07));
  --sd-glass: rgba(10,20,30,.03); --sd-glass-h: rgba(10,20,30,.06);
  --sd-line-h: rgba(15,157,99,.35);
}


/* ── Pont vers la couche « premium » de theme.css ─────────────────
   theme.css peint les cartes et le texte avec --p-* en !important.
   Ces variables sont déclarées sur :root, qui bat html en spécificité :
   les redéfinir ici, sur :root également et plus bas dans la cascade,
   est le seul moyen de les atteindre. Elles suivent maintenant le thème. */
:root {
  --p-bg:     var(--bg);
  --p-card:   var(--bg-2);
  --p-card-2: var(--bg-2);
  --p-ink:    var(--text);
  --p-ink-2:  var(--text-2);
  --p-ink-3:  var(--text-3);
}

/* Mode clair : le décor conçu pour du noir profond doit s'effacer. */
:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 120% 62% at 50% 0%, rgba(15,157,99,.07) 0%, transparent 58%),
    radial-gradient(ellipse 75% 55% at 88% 12%, rgba(31,126,214,.05) 0%, transparent 60%) !important;
}
:root[data-theme="light"] body::before { display: none !important; }
:root[data-theme="light"] .article-card,
:root[data-theme="light"] .articles-box .article-row,
:root[data-theme="light"] .tool-card,
:root[data-theme="light"] .related-card,
:root[data-theme="light"] .bonus-card,
:root[data-theme="light"] .toc,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat {
  background-image:
    linear-gradient(var(--p-card), var(--p-card-2)),
    linear-gradient(150deg, rgba(10,20,30,.16), rgba(10,20,30,.06) 38%, rgba(10,20,30,.03) 70%) !important;
  box-shadow: 0 1px 2px rgba(10,20,30,.06), 0 12px 32px -18px rgba(10,20,30,.30) !important;
}
:root[data-theme="light"] .article-card:hover,
:root[data-theme="light"] .articles-box .article-row:hover,
:root[data-theme="light"] .tool-card:hover,
:root[data-theme="light"] .related-card:hover {
  background-image:
    linear-gradient(var(--p-card), var(--p-card-2)),
    linear-gradient(150deg, rgba(15,157,99,.55), rgba(31,126,214,.22) 40%, rgba(10,20,30,.05) 75%) !important;
  box-shadow: 0 2px 6px rgba(10,20,30,.08), 0 22px 48px -22px rgba(10,20,30,.35) !important;
}

/* ── Base ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  color: var(--text) !important;
  font-family: var(--sd-font) !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s var(--sd-ease), color .25s var(--sd-ease);
}
/* Fond de page : peint sur <html>, pas sur <body>.
   theme.css et premium.css posent trois déclarations concurrentes en
   !important sur body ; même une règle plus spécifique n'arrivait pas à
   les déloger. La toile de fond appartient de toute façon à <html> :
   on la peint là, et on rend <body> transparent pour la laisser passer. */
:root:not([data-theme="light"]) { background-color: #070b12 !important; }
:root[data-theme="light"]       { background-color: #f4f6f9 !important; }
body, body.sd-page { background-color: transparent !important; }
:root[data-theme="light"] body,
:root[data-theme="light"] body.sd-page { background-image: none !important; }
h1, h2, h3, h4 { font-family: var(--sd-font) !important; letter-spacing: -.03em; }
h1 { font-weight: 800 !important; }
main h1, .hero h1, .tool-hero h1, .page-title { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
::selection { background: var(--green); color: var(--green-ink); }

/* Texte forcé en blanc dans les pages : on le ramène à la variable
   pour que le mode clair reste lisible. */
[data-theme="light"] [style*="color:#fff"], [data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#ffffff"], [data-theme="light"] [style*="color:white"] { color: var(--text) !important; }


/* Surfaces à couleur littérale dans theme.css / premium.css : elles ne
   peuvent pas suivre une variable, il faut les nommer une par une. */
:root[data-theme="light"] html,
:root[data-theme="light"] .sd-ambient .a,
:root[data-theme="light"] .sd-ambient .b { background: transparent !important; }
:root[data-theme="light"] .formula-box,
:root[data-theme="light"] .compare-table th { background: var(--bg-3) !important; color: var(--text) !important; }
:root[data-theme="light"] .compare-table td { color: var(--text-2) !important; }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-3) !important; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--line-2) !important; }
:root[data-theme="light"] .sd-edge,
:root[data-theme="light"] .sde-a { color: var(--text-2) !important; }
:root[data-theme="light"] .key-takeaway,
:root[data-theme="light"] .highlight-box,
:root[data-theme="light"] .checklist-item { color: var(--text-2) !important; }


/* Titres : premium.css applique un dégradé vert dans le texte
   (« main h1 » + background-clip). Une couleur ne peut pas le recouvrir,
   il faut annuler le remplissage et l'animation qui l'accompagne. */
.sd-hero h1, .sd-toolhero h1, .sd-head h2, .sde-q, .sd-bonus h2, .sd-prose h2, .article-row h3 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  color: var(--text) !important;
}
.sd-hero h1 em, .sd-toolhero h1 em {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}

/* ── Header : îlot flottant en verre ─────────────────────────────── */
.sd-navwrap { position: sticky; top: 0; z-index: 60; padding: 14px 16px 0; pointer-events: none; }
.sd-nav {
  pointer-events: auto; max-width: var(--sd-max); margin: 0 auto; height: 66px;
  display: flex; align-items: center; gap: 6px; padding: 0 10px 0 18px;
  border-radius: 999px; border: 1px solid var(--line-2);
  /* theme.css peint « header » en sombre avec !important, trois fois.
     Sans !important ici, l'îlot reste noir en mode clair. */
  background: color-mix(in srgb, var(--bg-2) 78%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  transition: height .3s var(--sd-ease), background .3s, box-shadow .3s;
}
[data-theme="light"] .sd-nav { box-shadow: 0 20px 50px -34px rgba(10,20,30,.35), inset 0 1px 0 rgba(255,255,255,.8); }
.sd-navwrap.tight .sd-nav { height: 56px; background: color-mix(in srgb, var(--bg-2) 92%, transparent) !important; }
.sd-logo { font-weight: 900; font-size: 21px; letter-spacing: -.04em; display: flex; align-items: center; gap: 9px; margin-right: 10px; color: var(--text); text-decoration: none; }
.sd-logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--green); display: inline-grid; place-items: center; color: var(--green-ink); font-style: normal; font-size: 15px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.sd-logo b { color: var(--green); font-weight: 900; }
.sd-links { display: flex; align-items: center; gap: 2px; }
.sd-links > a, .sd-dd > button {
  height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; text-decoration: none; transition: background .2s, color .2s;
}
.sd-links > a:hover, .sd-dd > button:hover, .sd-dd.open > button { color: var(--text); background: var(--bg-3); }
.sd-links > a.on { color: var(--text); }
.sd-links > a.on::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.sd-dd { position: relative; }
.sd-dd > button svg { width: 14px; height: 14px; transition: transform .25s var(--sd-ease); }
.sd-dd.open > button svg { transform: rotate(180deg); }
.sd-menu {
  position: absolute; top: calc(100% + 12px); left: -8px; width: 560px; padding: 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--bg-2) 94%, transparent); border: 1px solid var(--line-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .2s var(--sd-ease), transform .25s var(--sd-ease);
}
.sd-dd.open .sd-menu { opacity: 1; transform: none; pointer-events: auto; }
.sd-mi { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; text-decoration: none; transition: background .15s; }
.sd-mi:hover { background: var(--bg-3); }
.sd-mi.on { background: var(--bg-3); }
.sd-mi .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.sd-mi b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.sd-mi span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.sd-mi em { font-style: normal; font-family: var(--sd-mono); font-weight: 800; font-size: 12px; margin-left: 6px; }
.ic-g { background: color-mix(in srgb, var(--green) 20%, transparent); } .sd-mi .ic-g + div em { color: var(--green); }
.ic-y { background: color-mix(in srgb, var(--gold) 22%, transparent); }  .sd-mi .ic-y + div em { color: var(--gold); }
.ic-v { background: color-mix(in srgb, var(--violet) 22%, transparent); } .sd-mi .ic-v + div em { color: var(--violet); }
.ic-b { background: color-mix(in srgb, var(--blue) 20%, transparent); }  .sd-mi .ic-b + div em { color: var(--blue); }
.ic-c { background: color-mix(in srgb, var(--coral) 20%, transparent); } .sd-mi .ic-c + div em { color: var(--coral); }
.sd-menu .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 13px; color: var(--text-3); }
.sd-menu .foot a { color: var(--green); font-weight: 700; text-decoration: none; }
.sd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sd-theme { width: 40px; height: 40px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.sd-theme:hover { background: var(--bg-3); color: var(--text); }
.sd-theme svg { width: 18px; height: 18px; }
[data-theme="dark"] .sd-theme .ico-sun { display: none; }
[data-theme="light"] .sd-theme .ico-moon { display: none; }
.sd-burger { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; place-items: center; }
.sd-burger svg { width: 18px; height: 18px; }
.sd-sheet { display: none; }

/* Le bouton Sign In injecté par auth.js dans #header-auth-slot */
#header-auth-slot { display: flex; align-items: center; }
#header-auth-slot .h-signin-btn, .h-signin-btn {
  height: 38px !important; padding: 0 16px !important; border-radius: 999px !important;
  background: transparent !important; color: var(--text) !important; border: 1px solid var(--line-2) !important;
  font-weight: 700 !important; font-size: 14px !important; box-shadow: none !important; font-family: inherit !important;
  cursor: pointer;
}
#header-auth-slot .h-signin-btn:hover, .h-signin-btn:hover { background: var(--bg-3) !important; }

/* État connecté injecté par auth.js : on l'accorde à l'îlot.
   theme.css lui donne des cercles verts et des majuscules qui datent le header. */
.sd-nav .h-user-wrap { gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--line-2); transition: background .2s; }
.sd-nav .h-user-wrap:hover { background: var(--bg-3); }
.sd-nav .h-avatar-emoji, .sd-nav .h-initial {
  width: 30px !important; height: 30px !important; border: 0 !important;
  background: var(--bg-4) !important; color: var(--text) !important; font-size: 15px !important;
}
.sd-nav .h-initial { background: var(--green) !important; color: var(--green-ink) !important; font-weight: 900 !important; }
.sd-nav .h-xp-wrap { display: flex; flex-direction: column; gap: 5px; }
.sd-nav .h-level-name {
  font-size: 12.5px !important; font-weight: 700 !important; color: var(--text) !important;
  text-transform: none !important; letter-spacing: -.01em !important;
}
.sd-nav .h-xp-track { width: 78px !important; height: 5px !important; background: var(--bg-4) !important; border-radius: 999px !important; }
.sd-nav .h-xp-fill { background: var(--green) !important; box-shadow: none !important; }
.sd-nav .h-rank-badge { display: none !important; }

/* Liens de navigation : contraste garanti quel que soit le thème. */
.sd-nav .sd-links > a, .sd-nav .sd-dd > button { color: var(--text-2) !important; opacity: 1 !important; }
.sd-nav .sd-links > a:hover, .sd-nav .sd-dd > button:hover, .sd-nav .sd-dd.open > button { color: var(--text) !important; }
.sd-nav .sd-links > a.on { color: var(--text) !important; }

/* Le bouton de thème ne doit pas hériter d'un anneau vert. */
.sd-nav .sd-theme { border: 1px solid transparent !important; box-shadow: none !important; background: transparent !important; }
.sd-nav .sd-theme:hover { background: var(--bg-3) !important; }

/* ── Boutons d'action : doré + reflet (identique à l'accueil) ───── */
.bonus-btn, .cta-btn, .inline-cta-btn, .affiliate-btn, .bonus-cta-btn,
.btn-primary, .reg-btn-primary, .levelup-cta-real,
.spin-btn, .pk-lock-btn, .add-btn, .submit-btn, .save-btn, .new-hand-btn, .play-real-btn {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg,#ffdf6b 0%,#ffc632 38%,#f5a300 72%,#ffd970 100%) !important;
  color: #33200a !important; border: none !important; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  border-radius: 999px !important; font-weight: 800 !important; font-family: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(140,80,0,.25),
              0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(255,190,40,.8) !important;
  transition: transform .25s var(--sd-ease), filter .2s, box-shadow .25s !important;
}
.bonus-btn::after, .cta-btn::after, .inline-cta-btn::after, .affiliate-btn::after, .bonus-cta-btn::after,
.btn-primary::after, .reg-btn-primary::after, .levelup-cta-real::after, .spin-btn::after, .pk-lock-btn::after,
.add-btn::after, .submit-btn::after, .save-btn::after, .new-hand-btn::after, .play-real-btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.72) 50%, transparent 62%);
  transform: translateX(-130%); animation: sdGoldSweep 4.5s ease-in-out infinite;
}
@keyframes sdGoldSweep { 0%, 8% { transform: translateX(-130%); } 30% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
.bonus-btn:hover, .cta-btn:hover, .inline-cta-btn:hover, .affiliate-btn:hover, .bonus-cta-btn:hover,
.btn-primary:hover, .reg-btn-primary:hover, .levelup-cta-real:hover, .spin-btn:hover:not(:disabled),
.pk-lock-btn:hover:not(:disabled), .add-btn:hover, .submit-btn:hover, .save-btn:hover, .new-hand-btn:hover, .play-real-btn:hover {
  transform: translateY(-2px); filter: brightness(1.06);
}
.spin-btn:disabled, .pk-lock-btn:disabled, .btn-primary:disabled, .add-btn:disabled, .submit-btn:disabled, .save-btn:disabled {
  background: var(--bg-3) !important; color: var(--text-3) !important; text-shadow: none; box-shadow: none !important; cursor: not-allowed; transform: none;
}
.spin-btn:disabled::after, .pk-lock-btn:disabled::after, .btn-primary:disabled::after, .add-btn:disabled::after, .submit-btn:disabled::after, .save-btn:disabled::after { animation: none; opacity: 0; }
.sd-nav .bonus-btn { height: 38px; padding: 0 16px; font-size: 14px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }

/* ── Bandeau d'outil : titre + chiffre-clé au-dessus de l'outil ───
   Pleine largeur même à l'intérieur d'un conteneur limité : on déborde
   du conteneur avec des marges négatives calculées sur la fenêtre. */
.sd-toolhero {
  position: relative; box-sizing: border-box;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 44px 24px 26px; background: var(--aurora);
  text-align: left !important;
}
.sd-toolhero .in { max-width: var(--sd-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: end; }
.sd-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--green); }
.sd-kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sd-toolhero h1 {
  margin: 12px 0 0 !important; text-align: left !important;
  font-size: clamp(34px, 4.2vw, 54px) !important; line-height: 1.04 !important; letter-spacing: -.045em !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; background: none !important;
  max-width: 20ch; text-shadow: none !important;
}
.sd-toolhero h1 em { font-style: normal; color: var(--green); -webkit-text-fill-color: var(--green); }
.sd-toolhero .subtitle, .sd-toolhero p { margin: 14px 0 0 !important; text-align: left !important; color: var(--text-2) !important; font-size: 16.5px !important; line-height: 1.55; max-width: 60ch; }
.sd-toolhero .subtitle strong { color: var(--text); font-weight: 700; }
.sd-toolhero .key { display: flex; gap: 22px; justify-self: end; padding: 18px 22px; border-radius: var(--sd-r); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--card-shadow); }
.sd-toolhero .key div b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.05em; line-height: 1; font-family: var(--sd-mono); font-variant-numeric: tabular-nums; color: var(--green); white-space: nowrap; }
.sd-toolhero .key div b.y { color: var(--gold); } .sd-toolhero .key div b.r { color: var(--coral); } .sd-toolhero .key div b.v { color: var(--violet); } .sd-toolhero .key div b.b { color: var(--blue); }
.sd-toolhero .key div span { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); font-weight: 600; max-width: 16ch; line-height: 1.3; }

/* Anciens onglets d'outils et sélecteurs de mode : plus de lueur, forme pilule */
.tool-tabs, .tool-tab-bar { display: none !important; }
.mode-switch, .bb-tabs, .tool-tabs-inner { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; box-shadow: none !important; padding: 5px !important; }
.mode-btn, .bb-tab { border-radius: 999px !important; box-shadow: none !important; font-family: inherit !important; font-weight: 700 !important; }
.mode-btn.active, .bb-tab.active, .tool-tab.active { background: var(--green) !important; color: var(--green-ink) !important; box-shadow: none !important; text-shadow: none !important; }

/* ── Surfaces génériques des outils : bords fins, ombre douce, sans lueur ── */
.card:not(.card-slot):not(.pk-card), .panel, .tool-panel, .calc-panel, .drill-panel, .picker-panel,
.pk-calc-panel, .pk-drill-panel, .bb-panel, .sim-panel, .sess-card, .tracker-card, .seo-section, .donate-section,
.sd-faq, .result-box, .stat-box, .info-box {
  border-radius: var(--sd-r) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--card-shadow) !important;
}
input, select, textarea {
  font-family: inherit !important; border-radius: 12px !important;
  background: var(--bg-3) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
button { font-family: inherit; }

/* ── Barre XP : gamification conservée, redessinée à plat ───────── */
body .xp-bar {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 70 !important;
  background: color-mix(in srgb, var(--bg-2) 90%, transparent) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 24px !important; height: 62px !important; display: flex !important; align-items: center !important; gap: 14px !important;
}
body .xp-badge { width: 36px !important; height: 36px !important; border-radius: 999px !important; background: var(--bg-4) !important; display: grid !important; place-items: center !important; position: relative !important; box-shadow: none !important; border: 0 !important; }
body .xp-badge #xp-icon, body #xp-icon { font-size: 17px; }
body .xp-badge-num { position: absolute !important; right: -5px !important; bottom: -5px !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: var(--green) !important; color: var(--green-ink) !important; font-size: 10px !important; font-weight: 900 !important; display: grid !important; place-items: center !important; border: 2px solid var(--bg-2) !important; }
body .xp-info { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
body .xp-info-top { display: flex !important; justify-content: space-between !important; align-items: center !important; }
body .xp-level-name { font-weight: 800 !important; font-size: 14px !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
body .xp-points { font-size: 12.5px !important; color: var(--text-3) !important; font-variant-numeric: tabular-nums; }
body .xp-bar-bg { height: 8px !important; border-radius: 999px !important; background: var(--bg-4) !important; overflow: hidden !important; border: 0 !important; }
body .xp-bar-fill { height: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--green-2), var(--green)) !important; box-shadow: none !important; }
body { padding-bottom: 76px !important; }

/* Level-up : on garde l'écran, on adoucit la boîte */
.levelup-box { border-radius: 28px !important; border: 1px solid var(--line-2) !important; background: var(--bg-2) !important; box-shadow: var(--card-shadow) !important; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sd-navwrap { padding: 10px 10px 0; }
  .sd-nav { height: 58px; padding: 0 8px 0 14px; }
  .sd-links, .sd-nav #header-auth-slot, .sd-nav .bonus-btn { display: none !important; }
  .sd-burger { display: grid; }
  .sd-sheet { position: fixed; inset: 0; z-index: 80; background: var(--bg); padding: 20px; display: none; flex-direction: column; gap: 4px; overflow: auto; }
  .sd-sheet.open { display: flex; }
  .sd-sheet a { padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; }
  .sd-sheet a:hover { background: var(--bg-3); }
  .sd-sheet .close { align-self: flex-end; margin-bottom: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-weight: 700; cursor: pointer; }
  .sd-sheet .gold { margin-top: 14px; text-align: center; }
  .sd-toolhero { padding: 28px 18px 18px; }
  .sd-toolhero .in { grid-template-columns: 1fr; gap: 18px; }
  .sd-toolhero .key { justify-self: stretch; justify-content: space-around; }
  body .xp-level-name, body .xp-points { font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-btn::after, .cta-btn::after, .affiliate-btn::after, .levelup-cta-real::after, .new-hand-btn::after, .play-real-btn::after { animation: none; }
}