/* ═══════════════════════════════════════════════════════════════
   SlotDrop — Design System v2 "Neon Glass"
   Couche de surcharge chargée APRÈS les styles inline de chaque page.
   Unifie index / blog / articles. Additif et défensif :
   ne modifie pas les layouts, seulement l'apparence + micro-UX.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sd-accent:   #00ff88;
  --sd-accent-2: #00d4ff;
  --sd-violet:   #a78bfa;
  --sd-gold:     #ffd700;
  --sd-grad:     linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
  --sd-grad-soft:linear-gradient(135deg, rgba(0,255,136,.14), rgba(0,212,255,.10));
  --sd-glass:    rgba(255,255,255,.035);
  --sd-glass-h:  rgba(255,255,255,.065);
  --sd-line:     rgba(148,190,255,.10);
  --sd-line-h:   rgba(0,255,136,.35);
  --sd-glow:     0 0 0 1px rgba(0,255,136,.12), 0 8px 40px -8px rgba(0,255,136,.25);
  --sd-shadow:   0 10px 40px -12px rgba(0,0,0,.55);
  --sd-ease:     cubic-bezier(.2,.7,.2,1);
}

/* ── Polish v3 "Apple-grade" ────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .hero h1, .blog-hero h1, .article-h1 { letter-spacing: -.028em; }
.article-body p { letter-spacing: -.006em; }

/* Boutons principaux en pill */
.btn-primary, .btn-ghost, .bonus-btn, .inline-cta-btn, .bonus-cta-btn {
  border-radius: 980px !important;
}

/* Courbe de mouvement type spring Apple */
:root { --sd-ease: cubic-bezier(.32,.72,.28,1); }

/* ── Fond général : aurora mesh enrichie ────────────────────── */
body {
  background-color: #060d14 !important;
  background-image:
    radial-gradient(ellipse 100% 50% at 50% -8%,  rgba(0,255,136,.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40%  at 95% 30%,  rgba(0,120,255,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45%  at 4% 70%,   rgba(167,139,250,.05) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40%  at 60% 110%, rgba(0,212,255,.05) 0%, transparent 60%) !important;
  background-attachment: fixed;
}

::selection { background: rgba(0,255,136,.28); color:#fff; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a1420; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1d3a4e, #16303f);
  border-radius: 6px; border: 2px solid #0a1420;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0,255,136,.5), rgba(0,212,255,.4)); }

/* Focus visible — accessibilité */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Header : verre + liseré dégradé ────────────────────────── */
header {
  background: rgba(6,13,20,.72) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid transparent !important;
  background-clip: padding-box;
  box-shadow: 0 1px 0 rgba(148,190,255,.08), 0 12px 40px -20px rgba(0,0,0,.8);
}
.logo { position: relative; }
.logo span {
  background: var(--sd-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-link { position: relative; }
.nav-link.active { color: var(--sd-accent) !important; }
.nav-link.active::after {
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background: var(--sd-grad); border-radius:2px;
  box-shadow: 0 0 8px rgba(0,255,136,.6);
}

/* Bouton bonus header */
.bonus-btn {
  background: var(--sd-grad) !important;
  color: #041018 !important;
  box-shadow: 0 2px 16px -2px rgba(0,255,136,.45);
  transition: transform .25s var(--sd-ease), box-shadow .25s var(--sd-ease), filter .2s !important;
}
.bonus-btn:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 24px -2px rgba(0,255,136,.6);
}

/* ── Boutons génériques ─────────────────────────────────────── */
.btn-primary, .inline-cta-btn, .bonus-cta-btn {
  background: var(--sd-grad) !important;
  color: #041018 !important;
  box-shadow: 0 6px 28px -6px rgba(0,255,136,.55);
  transition: transform .25s var(--sd-ease), box-shadow .25s var(--sd-ease), filter .2s !important;
}
.btn-primary:hover, .inline-cta-btn:hover, .bonus-cta-btn:hover {
  opacity: 1 !important;
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 10px 36px -6px rgba(0,255,136,.7);
}
.btn-ghost {
  backdrop-filter: blur(8px);
  transition: transform .25s var(--sd-ease), background .2s, border-color .2s, color .2s !important;
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--sd-line-h) !important; }

/* ── Titres : dégradé subtil sur les h1 ─────────────────────── */
.hero h1, .blog-hero h1, .article-h1 {
  background: linear-gradient(180deg, #ffffff 30%, #b8d4e8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 em, .blog-hero h1 em {
  background: var(--sd-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Cartes : verre + halo au survol ────────────────────────── */
.article-card,
.articles-box .article-row,
.tool-card,
.related-card,
.bonus-card,
.toc,
.lb-box, .leaderboard-box {
  background:
    linear-gradient(rgba(255,255,255,.028), rgba(255,255,255,.014)) padding-box !important;
  border: 1px solid var(--sd-line) !important;
  box-shadow: var(--sd-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--sd-ease), border-color .3s, box-shadow .3s var(--sd-ease) !important;
}
.article-card:hover,
.articles-box .article-row:hover,
.tool-card:hover,
.related-card:hover {
  border-color: var(--sd-line-h) !important;
  transform: translateY(-4px);
  box-shadow: var(--sd-glow), var(--sd-shadow);
}
.articles-box .article-row:hover { transform: translateY(-2px); }

/* Carte featured : liseré dégradé */
.article-card.featured {
  position: relative;
  border-color: rgba(0,255,136,.22) !important;
  background:
    linear-gradient(160deg, rgba(0,255,136,.05), rgba(0,212,255,.03) 60%, rgba(255,255,255,.015)) !important;
}
.featured-badge {
  background: var(--sd-grad) !important;
  color: #041018 !important;
  box-shadow: 0 2px 14px rgba(0,255,136,.5);
}

/* Badge "New" (index) */
.a-new {
  background: var(--sd-grad) !important;
  color: #041018 !important;
  box-shadow: 0 0 12px rgba(0,255,136,.45);
}

/* ── Cartes "Coming soon" : shimmer premium ─────────────────── */
.card-coming { position: relative; overflow: hidden; }
.card-coming::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.045) 50%, transparent 60%);
  background-size: 220% 100%;
  animation: sd-shimmer 3.2s var(--sd-ease) infinite;
  pointer-events: none;
}
@keyframes sd-shimmer {
  0%   { background-position: 130% 0; }
  60%, 100% { background-position: -90% 0; }
}
.coming-label .fire, .coming-badge .fire { display:inline-block; animation: sd-flame 1.6s ease-in-out infinite; }
@keyframes sd-flame {
  0%,100% { transform: scale(1) rotate(-4deg); }
  50%     { transform: scale(1.18) rotate(4deg); filter: brightness(1.25); }
}

/* ── Tables d'articles ──────────────────────────────────────── */
.compare-wrap {
  border: 1px solid var(--sd-line) !important;
  box-shadow: var(--sd-shadow);
}
.compare-table th {
  background: rgba(10,22,34,.92) !important;
  position: sticky; top: 0;
}
.compare-table tbody tr { transition: background .15s; }
.compare-table tbody tr:hover { background: rgba(0,255,136,.045); }
.compare-table tbody tr:nth-child(even) { background: rgba(255,255,255,.014); }
.compare-table tbody tr:nth-child(even):hover { background: rgba(0,255,136,.045); }

/* ── Blocs éditoriaux articles ──────────────────────────────── */
.key-takeaway {
  background: linear-gradient(135deg, rgba(0,255,136,.07), rgba(0,212,255,.04)) !important;
  border-left: 3px solid transparent !important;
  border-image: linear-gradient(180deg, #00ff88, #00d4ff) 1 !important;
  box-shadow: var(--sd-shadow);
}
.highlight-box {
  background: var(--sd-grad-soft) !important;
  border: 1px solid rgba(0,255,136,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sd-shadow);
}
.formula-box {
  background: linear-gradient(180deg, #0a1826, #081420) !important;
  border: 1px solid rgba(0,255,136,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--sd-shadow);
}
.warning-box {
  background: linear-gradient(135deg, rgba(255,93,93,.08), rgba(255,93,93,.03)) !important;
  box-shadow: var(--sd-shadow);
}
.red-flag { transition: border-color .2s, background .2s; }
.red-flag:hover { border-color: rgba(255,93,93,.35); background: rgba(255,93,93,.07); }
.checklist-item { transition: border-color .2s, transform .2s var(--sd-ease); }
.checklist-item:hover { border-color: rgba(0,255,136,.3); transform: translateX(3px); }
.ci-box {
  background: rgba(0,255,136,.08);
  box-shadow: inset 0 0 6px rgba(0,255,136,.15);
}

/* TOC : lien actif + hover */
.toc a { transition: color .15s, padding-left .2s var(--sd-ease); }
.toc a:hover { padding-left: 4px; }

/* Ancres : offset pour le header fixe */
.article-body h2[id] { scroll-margin-top: 96px; }

/* ── Barre de progression lecture ───────────────────────────── */
#sd-progress {
  background: var(--sd-grad) !important;
  box-shadow: 0 0 14px rgba(0,255,136,.7), 0 0 4px rgba(0,212,255,.8) !important;
  height: 3px !important;
}

/* ── CTA banners ────────────────────────────────────────────── */
.cta-banner, .inline-cta, .bonus-section {
  position: relative;
  background: linear-gradient(160deg, #0d2030, #0a1826 70%) !important;
  border: 1px solid rgba(0,255,136,.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--sd-shadow);
  overflow: hidden;
}
.cta-banner::before, .inline-cta::before, .bonus-section::before {
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(ellipse 40% 55% at 75% 20%, rgba(0,255,136,.12), transparent 60%),
              radial-gradient(ellipse 35% 50% at 15% 85%, rgba(0,212,255,.09), transparent 60%);
  pointer-events:none;
}
.cta-banner > *, .inline-cta > *, .bonus-section > * { position: relative; }

/* ── Footer ─────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--sd-line); padding-top: 24px !important; }
footer a { transition: color .15s; }
footer a:hover { color: var(--sd-accent); }

/* ── Reveal on scroll (activé par theme.js via .sd-in) ──────── */
.sd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sd-ease), transform .6s var(--sd-ease); }
.sd-reveal.sd-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sd-reveal { opacity:1; transform:none; } }

/* ── Bouton retour en haut (injecté par theme.js) ───────────── */
#sd-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,22,34,.85); color: var(--sd-accent);
  border: 1px solid rgba(0,255,136,.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; font-size: 18px;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s, transform .3s var(--sd-ease), border-color .2s, box-shadow .2s;
  box-shadow: var(--sd-shadow);
}
#sd-top.sd-show { opacity: 1; pointer-events: auto; transform: none; }
#sd-top:hover { border-color: var(--sd-accent); box-shadow: var(--sd-glow); }

/* ── Draft banner (visible admin uniquement) ────────────────── */
.draft-banner {
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px -8px rgba(255,200,0,.25);
}

/* ── Hero stats (index) ─────────────────────────────────────── */
.hero-stats {
  display: flex; align-items: center; gap: 22px;
  margin-top: 26px; padding: 14px 26px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--sd-line);
  border-radius: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sd-shadow);
}
.hs-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hs-item strong {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  background: var(--sd-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hs-item span {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #6e88a0;
}
.hs-sep { width: 1px; height: 30px; background: var(--sd-line); }
@media (max-width: 480px) {
  .hero-stats { gap: 14px; padding: 12px 16px; }
  .hs-item strong { font-size: 17px; }
  .hs-item span { font-size: 9px; }
}

/* ══════════ RÉTENTION (engage.js) ══════════ */

/* Toast streak */
#sd-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 600;
  transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 980px;
  background: rgba(10,22,34,.92);
  border: 1px solid rgba(0,255,136,.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #eaf3ff; font: 700 13px/1 'Sora', system-ui, sans-serif;
  box-shadow: var(--sd-glow), var(--sd-shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--sd-ease), transform .4s var(--sd-ease);
}
#sd-toast.sd-show { opacity: 1; transform: translate(-50%, 0); }
#sd-toast .sd-toast-fire { font-size: 17px; }

/* Panneau "Next up" fin d'article */
#sd-next {
  position: fixed; left: 18px; bottom: 18px; z-index: 500;
  width: min(320px, calc(100vw - 36px));
  padding: 16px 18px; border-radius: 18px;
  background: rgba(10,22,34,.92);
  border: 1px solid rgba(0,255,136,.25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sd-shadow);
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .45s var(--sd-ease), transform .45s var(--sd-ease);
}
#sd-next.sd-show { opacity: 1; pointer-events: auto; transform: none; }
#sd-next .sdn-label {
  font: 700 9px/1 'Sora', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--sd-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 7px;
}
#sd-next a {
  color: #eaf3ff; font: 700 14px/1.45 'Sora', system-ui, sans-serif;
  display: block; text-decoration: none;
}
#sd-next a:hover { color: var(--sd-accent); }
#sd-next .sdn-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: #4e6678;
  font-size: 15px; cursor: pointer; padding: 4px; line-height: 1;
}
#sd-next .sdn-close:hover { color: #eaf3ff; }
@media (max-width: 480px) { #sd-next { left: 12px; bottom: 74px; } }

/* Strip de progression (blog + fin d'article) */
.sd-progress-strip {
  display: flex; align-items: center; gap: 14px;
  margin: 0 auto 34px; max-width: 560px;
  padding: 13px 20px; border-radius: 16px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--sd-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sd-progress-strip .sdp-txt {
  font: 700 12px/1.4 'Sora', system-ui, sans-serif;
  color: #8fa8c0; white-space: nowrap;
}
.sd-progress-strip .sdp-txt strong { color: var(--sd-accent); }
.sd-progress-strip .sdp-bar {
  flex: 1; height: 6px; border-radius: 4px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.sd-progress-strip .sdp-fill {
  height: 100%; border-radius: 4px;
  background: var(--sd-grad);
  box-shadow: 0 0 10px rgba(0,255,136,.5);
  transition: width .8s var(--sd-ease);
}

/* Daily Edge (accueil) */
#daily-edge:not(:empty) { margin: 8px 0 44px; }
.sd-edge {
  position: relative; overflow: hidden;
  padding: 26px 26px 24px; border-radius: 20px;
  background: linear-gradient(160deg, #0d2030, #0a1826 70%);
  border: 1px solid rgba(0,255,136,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--sd-shadow);
}
.sd-edge::before {
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(ellipse 40% 55% at 80% 15%, rgba(0,255,136,.12), transparent 60%);
  pointer-events:none;
}
.sd-edge > * { position: relative; }
.sd-edge .sde-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 'Sora', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sd-accent); margin-bottom: 12px;
}
.sd-edge .sde-q {
  font: 800 clamp(17px, 2.6vw, 22px)/1.35 'Sora', system-ui, sans-serif;
  color: #eaf3ff; margin-bottom: 16px; letter-spacing: -.02em;
}
.sd-edge .sde-a {
  display: none;
  font: 400 15px/1.75 system-ui, sans-serif;
  color: #b6cbdd; margin-bottom: 14px;
}
.sd-edge.sde-open .sde-a { display: block; animation: sd-fadeup .5s var(--sd-ease); }
.sd-edge.sde-open .sde-btn { display: none; }
@keyframes sd-fadeup { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.sd-edge .sde-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 980px; border: none; cursor: pointer;
  background: var(--sd-grad); color: #041018;
  font: 800 13px/1 'Sora', system-ui, sans-serif;
  box-shadow: 0 6px 24px -6px rgba(0,255,136,.55);
  transition: transform .25s var(--sd-ease), filter .2s;
}
.sd-edge .sde-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.sd-edge .sde-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1 'Sora', system-ui, sans-serif;
  color: var(--sd-accent); text-decoration: none;
}
.sd-edge .sde-link:hover { text-decoration: underline; }

/* ── Mobile : tap targets confortables ──────────────────────── */
@media (max-width: 639px) {
  .nav-link { min-height: 42px; }
  .share-btn { width: 44px; height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════
   v3 — RAFFINEMENT "APPLE"
   Principes : retenue, hiérarchie optique, profondeur par couches,
   mouvement spring, jamais d'animation sur une propriété coûteuse.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sd-spring: cubic-bezier(.16,1,.3,1);        /* décélération Apple */
  --sd-snap:   cubic-bezier(.34,1.56,.64,1);    /* léger overshoot */
  --sd-e1: 0 1px 2px rgba(0,0,0,.30);
  --sd-e2: 0 4px 12px -2px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.25);
  --sd-e3: 0 12px 32px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.30);
  --sd-e4: 0 28px 70px -20px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.35);
}

/* ── Typographie : rendu optique ────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  letter-spacing: -.011em;
}
h1, h2, h3, .hero h1, .blog-hero h1, .article-h1, .card-title, .sec-label {
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  text-wrap: balance;
}
/* Plus le titre est gros, plus le tracking se resserre (règle optique) */
.hero h1, .blog-hero h1 { letter-spacing: -.038em !important; line-height: 1.04 !important; }
.article-h1            { letter-spacing: -.030em !important; line-height: 1.12 !important; }
.article-body h2       { letter-spacing: -.022em; line-height: 1.18; }
.article-body h3       { letter-spacing: -.014em; }
.card-title            { letter-spacing: -.014em; }

/* Corps de texte : mesure et rythme */
.article-body p, .article-body li {
  text-wrap: pretty;
  letter-spacing: -.003em;
  color: rgba(232,242,255,.80) !important;
}
.article-body p { line-height: 1.78 !important; }
.article-intro {
  font-size: clamp(16px, 2.4vw, 19px) !important;
  line-height: 1.68 !important;
  letter-spacing: -.014em;
  color: rgba(232,242,255,.88) !important;
  border-left-color: transparent !important;
  border-image: linear-gradient(180deg, #00ff88, #00d4ff) 1 !important;
}
.hero-sub {
  letter-spacing: -.012em;
  line-height: 1.65 !important;
  color: #93a9c0 !important;
}

/* Petites capitales : tracking généreux (inverse de la règle titres) */
.sec-label, .article-tag, .rc-tag, .card-tag, .a-tag,
.formula-title, .toc-title, .hero-badge {
  font-feature-settings: "kern" 1;
  letter-spacing: .085em !important;
}

/* ── Profondeur : les ombres remplacent les bordures dures ──── */
.article-card, .articles-box .article-row, .tool-card,
.related-card, .bonus-card, .toc {
  border-color: rgba(148,190,255,.075) !important;
  box-shadow: var(--sd-e2) !important;
  will-change: transform;
}
.article-card:hover, .tool-card:hover, .related-card:hover {
  box-shadow: var(--sd-e4), 0 0 0 1px rgba(0,255,136,.18) !important;
  transform: translateY(-5px) !important;
  transition-timing-function: var(--sd-spring) !important;
}
.articles-box .article-row:hover {
  box-shadow: var(--sd-e3) !important;
  transform: translateY(-2px) !important;
}
/* Le clic doit répondre — feedback tactile */
.article-card:active, .tool-card:active, .related-card:active,
.btn-primary:active, .btn-ghost:active, .bonus-btn:active {
  transform: scale(.985) !important;
  transition-duration: .09s !important;
}

/* ── Néon : retenue. Le glow devient un accent, pas un thème ── */
.article-card.featured {
  background: linear-gradient(165deg, rgba(0,255,136,.035), rgba(0,212,255,.018) 55%, rgba(255,255,255,.012)) !important;
  border-color: rgba(0,255,136,.16) !important;
}
#sd-progress { height: 2px !important; box-shadow: 0 0 10px rgba(0,255,136,.5) !important; }
.nav-link.active::after { box-shadow: 0 0 6px rgba(0,255,136,.45); }

/* ── Boutons : géométrie et poids Apple ─────────────────────── */
.btn-primary, .btn-ghost, .bonus-btn, .inline-cta-btn, .bonus-cta-btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.006em !important;
  transition: transform .4s var(--sd-spring), box-shadow .4s var(--sd-spring), filter .2s !important;
}
.btn-primary { box-shadow: var(--sd-e2), 0 6px 24px -8px rgba(0,255,136,.5) !important; }
.btn-primary:hover { box-shadow: var(--sd-e3), 0 10px 34px -8px rgba(0,255,136,.6) !important; }

/* ── Header : hairline et flou plus fins ────────────────────── */
header {
  background: rgba(6,13,20,.66) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  box-shadow: 0 0 0 .5px rgba(148,190,255,.10), 0 8px 32px -16px rgba(0,0,0,.9) !important;
}

/* ── Respiration ────────────────────────────────────────────── */
.article-body h2 { margin-top: 56px !important; padding-top: 40px !important; }
.article-body h2:first-child { margin-top: 0 !important; padding-top: 0 !important; }
.toc { padding: 22px 24px !important; }
.hero { padding-bottom: 56px !important; }

/* Séparateurs : hairline, jamais 1px opaque */
.article-body h2 { border-top-color: rgba(148,190,255,.09) !important; }
.share-block, .related { border-color: rgba(148,190,255,.09) !important; }


/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS DE RÉTENTION (pilotés par engage.js)
   ═══════════════════════════════════════════════════════════════ */

/* ── Toast de streak ────────────────────────────────────────── */
#sd-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 900;
  transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 14px;
  background: rgba(10,22,34,.90);
  border: 1px solid rgba(0,255,136,.28);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sd-e4);
  font-size: 13px; font-weight: 600; color: #eaf3ff;
  letter-spacing: -.008em; white-space: nowrap;
  transition: transform .6s var(--sd-snap), opacity .4s;
  opacity: 0;
}
#sd-toast.sd-show { transform: translate(-50%, 0); opacity: 1; }
.sd-toast-fire { font-size: 16px; animation: sd-flame 1.6s ease-in-out infinite; }

/* ── Strip "X of Y guides read" (blog) ──────────────────────── */
/* Discret par nature : c'est un indicateur, pas un élément d'UI majeur. */
.sd-progress-strip {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px;
  margin: 0 auto 22px;
  padding: 0 4px;
}
.sdp-txt {
  font-size: 11.5px; font-weight: 600; color: #6e88a0;
  white-space: nowrap; letter-spacing: -.004em;
}
.sdp-txt strong { color: #b8cfe4; font-weight: 750; }
.sdp-pct {
  font-size: 11px; font-weight: 700; color: var(--sd-accent);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: right;
}
.sdp-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.sdp-fill {
  height: 100%; border-radius: 2px; background: var(--sd-grad);
  box-shadow: 0 0 8px rgba(0,255,136,.4);
  transition: width 1.2s var(--sd-spring);
}
@media (max-width: 440px) {
  .sd-progress-strip { gap: 9px; }
  .sdp-txt { font-size: 10.5px; }
}

/* ── Panneau "Up next" (fin d'article) ──────────────────────── */
#sd-next {
  position: fixed; right: 18px; bottom: 74px; z-index: 480;
  max-width: 320px; padding: 15px 40px 15px 17px;
  border-radius: 16px;
  background: rgba(10,22,34,.90);
  border: 1px solid rgba(0,255,136,.24);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sd-e4);
  opacity: 0; pointer-events: none; transform: translateY(14px) scale(.97);
  transition: opacity .45s var(--sd-spring), transform .45s var(--sd-spring);
}
#sd-next.sd-show { opacity: 1; pointer-events: auto; transform: none; }
.sdn-label {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sd-accent); margin-bottom: 5px;
}
#sd-next a {
  display: block; font-size: 13.5px; font-weight: 650; line-height: 1.45;
  color: #eaf3ff; letter-spacing: -.01em;
  transition: color .2s;
}
#sd-next a:hover { color: var(--sd-accent); }
.sdn-close {
  position: absolute; top: 9px; right: 9px;
  width: 24px; height: 24px; border-radius: 7px;
  background: transparent; border: none; cursor: pointer;
  color: #5a7a92; font-size: 12px; line-height: 1;
  transition: background .2s, color .2s;
}
.sdn-close:hover { background: rgba(255,255,255,.07); color: #eaf3ff; }
@media (max-width: 560px) {
  #sd-next { right: 12px; left: 12px; max-width: none; bottom: 70px; }
}

/* ── Daily Edge (accueil) ───────────────────────────────────── */
.sd-edge {
  position: relative; overflow: hidden;
  padding: 26px 26px 24px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(0,255,136,.055), rgba(0,212,255,.025) 60%, rgba(255,255,255,.012));
  border: 1px solid rgba(0,255,136,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sd-e3);
}
.sd-edge::before {
  content: ""; position: absolute; inset: -50% -20%;
  background: radial-gradient(ellipse 40% 55% at 80% 15%, rgba(0,255,136,.10), transparent 62%);
  pointer-events: none;
}
.sd-edge > * { position: relative; }
.sde-label {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sd-accent); margin-bottom: 12px;
}
.sde-q {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(16px, 2.6vw, 20px); font-weight: 700;
  line-height: 1.35; letter-spacing: -.022em;
  color: #eaf3ff; margin-bottom: 16px; text-wrap: balance;
}
.sde-a {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 14px; line-height: 1.72; color: rgba(232,242,255,.80);
  letter-spacing: -.005em;
  transition: max-height .65s var(--sd-spring), opacity .45s .12s, margin .5s var(--sd-spring);
}
.sd-edge.sde-open .sde-a { max-height: 340px; opacity: 1; margin-bottom: 6px; }
.sde-link { color: var(--sd-accent); font-weight: 700; white-space: nowrap; }
.sde-link:hover { text-decoration: underline; }
.sde-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px; margin-top: 4px;
  border-radius: 11px; border: 1px solid rgba(0,255,136,.32);
  background: rgba(0,255,136,.07); color: var(--sd-accent);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 750; letter-spacing: -.005em;
  cursor: pointer;
  transition: background .25s, transform .35s var(--sd-spring), border-color .25s;
}
.sde-btn:hover { background: rgba(0,255,136,.13); transform: translateY(-1px); border-color: rgba(0,255,136,.5); }
.sde-btn:active { transform: scale(.97); }
.sd-edge.sde-open .sde-btn { display: none; }


/* ═══════════════════════════════════════════════════════════════
   FAQ D'ARTICLE (inject-faq.py)
   ═══════════════════════════════════════════════════════════════ */
.sd-faq { margin: 52px 0 8px; }
.sd-faq > h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(19px, 3vw, 24px); font-weight: 800;
  letter-spacing: -.022em; line-height: 1.2;
  color: #eaf3ff; margin-bottom: 18px;
  padding-top: 40px; border-top: 1px solid rgba(148,190,255,.09);
}
.sd-faq-item {
  border: 1px solid rgba(148,190,255,.09);
  border-radius: 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.022);
  box-shadow: var(--sd-e1);
  overflow: hidden;
  transition: border-color .25s, box-shadow .3s var(--sd-spring);
}
.sd-faq-item[open] { border-color: rgba(0,255,136,.22); box-shadow: var(--sd-e2); }
.sd-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 16px 46px 16px 18px; position: relative;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 650; line-height: 1.5;
  letter-spacing: -.012em; color: #eaf3ff;
  transition: color .2s;
}
.sd-faq-item summary::-webkit-details-marker { display: none; }
.sd-faq-item summary:hover { color: var(--sd-accent); }
.sd-faq-item summary::after {
  content: "+"; position: absolute; right: 17px; top: 50%;
  transform: translateY(-50%);
  font-size: 19px; font-weight: 400; line-height: 1;
  color: var(--sd-accent);
  transition: transform .35s var(--sd-spring);
}
.sd-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sd-faq-a { padding: 0 18px 17px; }
.sd-faq-a p {
  font-size: 14.5px !important; line-height: 1.75 !important;
  color: rgba(232,242,255,.76) !important;
  letter-spacing: -.004em; margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   RECHERCHE INSTANTANÉE (search.js)
   ═══════════════════════════════════════════════════════════════ */
.sd-search-wrap { width: 100%; max-width: 560px; margin: 0 auto 14px; position: relative; }
.sd-search-field { position: relative; display: flex; align-items: center; }
.sd-search-ico {
  position: absolute; left: 17px; font-size: 17px; line-height: 1;
  color: #5a7a92; pointer-events: none;
  transition: color .25s;
}
#sd-search:focus ~ .sd-search-ico,
.sd-search-field:focus-within .sd-search-ico { color: var(--sd-accent); }
#sd-search {
  width: 100%; height: 50px;
  padding: 0 74px 0 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(148,190,255,.10);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sd-e2);
  color: #eaf3ff; font-family: inherit;
  font-size: 14.5px; letter-spacing: -.01em;
  outline: none;
  transition: border-color .3s, box-shadow .3s var(--sd-spring), background .3s;
}
#sd-search::placeholder { color: #5a7a92; }
#sd-search:focus {
  border-color: rgba(0,255,136,.42);
  background: rgba(255,255,255,.05);
  box-shadow: var(--sd-e3), 0 0 0 4px rgba(0,255,136,.10);
}
.sd-search-kbd {
  position: absolute; right: 14px;
  display: flex; gap: 4px; pointer-events: none;
  transition: opacity .2s;
}
.sd-search-kbd kbd {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,190,255,.12);
  font-family: inherit; font-size: 10.5px; font-weight: 700; color: #6e88a0;
}
#sd-search:focus ~ .sd-search-kbd { opacity: 0; }
.sd-search-count {
  margin-top: 10px; text-align: center;
  font-size: 11.5px; font-weight: 600; color: #6e88a0;
  letter-spacing: -.004em;
  min-height: 16px;
  opacity: 0; transition: opacity .3s;
}
.sd-search-count.sd-show { opacity: 1; }
.sd-search-count strong { color: var(--sd-accent); }
.sd-empty {
  grid-column: 1 / -1;
  padding: 52px 20px; text-align: center;
  color: #6e88a0; font-size: 14px; letter-spacing: -.008em;
}
.sd-empty strong { display: block; font-size: 17px; color: #eaf3ff; margin-bottom: 7px; letter-spacing: -.02em; }
.sd-hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   v5 — "ULTRA PREMIUM"
   Référence : Linear, Vercel, Stripe, Raycast.
   Principe : le premium ne vient PAS d'ajouter de la couleur, il
   vient de surfaces presque noires + un liseré d'1px lumineux +
   une lumière rare et placée. Aucun dégradé ne recouvre du texte.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --p-bg:      #05090e;
  --p-card:    #0b1219;
  --p-card-2:  #0d151d;
  --p-ink:     #f2f7fc;
  --p-ink-2:   #a8bccd;
  --p-ink-3:   #64798c;
  --p-ease:    cubic-bezier(.16,1,.3,1);
}

/* ── Fond : noir profond + lumière ambiante visible ─────────── */
/* Le halo doit être VU. Centre dans le viewport, pas au-dessus. */
body {
  background-color: var(--p-bg) !important;
  background-image:
    radial-gradient(ellipse 120% 62% at 50% 0%,   rgba(0,255,136,.115) 0%, transparent 58%),
    radial-gradient(ellipse 75% 55%  at 88% 12%,  rgba(0,150,255,.075) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55%  at 8% 42%,   rgba(120,90,255,.050) 0%, transparent 62%),
    radial-gradient(ellipse 90% 45%  at 55% 100%, rgba(0,212,255,.045) 0%, transparent 62%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Voile de profondeur : assombrit les bords, concentre le regard */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse 85% 75% at 50% 38%, transparent 45%, rgba(0,0,0,.55) 100%) !important;
}

/* ══ CARTES : surface opaque + liseré dégradé d'1px ══
   Technique double background-clip : le dégradé ne vit QUE dans
   la bordure. Le contenu reste sur du noir → contraste maximal. */
.article-card,
.articles-box .article-row,
.tool-card,
.related-card,
.bonus-card,
.toc,
.panel,
.stat {
  background-color: var(--p-card) !important;
  background-image:
    linear-gradient(var(--p-card), var(--p-card-2)),
    linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 38%, rgba(255,255,255,.015) 70%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 1px 2px rgba(0,0,0,.5),
    0 12px 32px -12px rgba(0,0,0,.75) !important;
  transition: transform .45s var(--p-ease), box-shadow .45s var(--p-ease),
              background-image .45s var(--p-ease) !important;
}

.article-card:hover,
.articles-box .article-row:hover,
.tool-card:hover,
.related-card:hover {
  transform: translateY(-3px) !important;
  background-image:
    linear-gradient(var(--p-card), var(--p-card-2)),
    linear-gradient(150deg, rgba(0,255,136,.55), rgba(0,212,255,.20) 40%, rgba(255,255,255,.05) 75%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.5),
    0 24px 56px -18px rgba(0,0,0,.85),
    0 0 44px -20px rgba(0,255,136,.45) !important;
}

/* ── Carte à la une : liseré vert permanent, fond identique ── */
.article-card.featured {
  background-image:
    linear-gradient(var(--p-card), var(--p-card-2)),
    linear-gradient(150deg, rgba(0,255,136,.45), rgba(0,212,255,.16) 42%, rgba(255,255,255,.04) 78%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.5),
    0 16px 44px -16px rgba(0,0,0,.8),
    0 0 34px -22px rgba(0,255,136,.5) !important;
}
.article-card.featured::before,
.article-card.featured::after { display: none !important; }

/* ── Lisibilité : contraste plein, aucun texte délavé ───────── */
.card-title, .article-row h3   { color: var(--p-ink) !important; }
.card-excerpt, .article-row p  { color: var(--p-ink-2) !important; opacity: 1 !important; }
.card-date, .card-read, .card-sep, .article-meta-row span { color: var(--p-ink-3) !important; }
.article-body p, .article-body li { color: #cfe0ee !important; }

/* ── Tags : pastille sobre, texte coloré ────────────────────── */
.card-tag, .a-tag, .article-tag, .rc-tag {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  font-weight: 700 !important;
}

/* ── Badge "New" : la seule surface pleinement colorée ──────── */
.featured-badge, .a-new {
  background: linear-gradient(135deg,#00ff88,#00d4ff) !important;
  color: #04120b !important;
  box-shadow: 0 2px 10px -2px rgba(0,255,136,.55) !important;
  animation: none !important;
}

/* ── Boutons : verre net, pas de pulsation ──────────────────── */
.btn-primary, .bonus-btn, .inline-cta-btn, .bonus-cta-btn, .add-btn {
  background: linear-gradient(180deg,#00ff9d,#00d97a) !important;
  color: #04120b !important;
  border: none !important;
  animation: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 2px rgba(0,0,0,.4),
    0 8px 22px -10px rgba(0,255,136,.55) !important;
  transition: transform .35s var(--p-ease), box-shadow .35s var(--p-ease), filter .2s !important;
}
.btn-primary:hover, .bonus-btn:hover, .inline-cta-btn:hover,
.bonus-cta-btn:hover, .add-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 1px 2px rgba(0,0,0,.4),
    0 14px 34px -12px rgba(0,255,136,.7) !important;
}
.btn-ghost {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--p-ink-2) !important;
}
.btn-ghost:hover { background: rgba(255,255,255,.06) !important; color: var(--p-ink) !important; }

/* ── Header : hairline unique, aucun balayage ───────────────── */
header {
  background: rgba(5,9,14,.80) !important;
  backdrop-filter: saturate(160%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.055) !important;
}
header::after { display: none !important; }
.nav-link.active::after {
  height: 2px !important;
  background: linear-gradient(90deg,#00ff88,#00d4ff) !important;
  box-shadow: 0 0 10px rgba(0,255,136,.55) !important;
}

/* ── Tableaux : lignes nettes, survol discret ───────────────── */
.compare-wrap {
  background: var(--p-card) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.8) !important;
}
.compare-table th { background: #0a1017 !important; color: var(--p-ink-3) !important; }
.compare-table td { color: #c3d6e6 !important; }
.compare-table tbody tr:nth-child(even) { background: rgba(255,255,255,.018) !important; }
.compare-table tbody tr:hover {
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 2px 0 0 #00ff88 !important;
}
.compare-table .good, .compare-table .bad, .compare-table .ok { text-shadow: none !important; }

/* ── Blocs éditoriaux : fond noir, accent en bordure ────────── */
.key-takeaway, .highlight-box, .formula-box, .warning-box,
.red-flag, .checklist-item, .sd-faq-item {
  background: var(--p-card) !important;
  backdrop-filter: none !important;
}
.key-takeaway  { border-left: 2px solid #00ff88 !important; border-image: none !important; }
.highlight-box { border: 1px solid rgba(0,255,136,.28) !important; }
.formula-box   { border: 1px solid rgba(255,255,255,.09) !important; background: #080e14 !important; }
.warning-box   { border: 1px solid rgba(255,93,93,.28) !important; }
.formula-result, .formula-result.bad-result { text-shadow: none !important; }

/* ── Coming soon : sobre, sans shimmer ──────────────────────── */
.card-coming::after { display: none !important; }
.card-coming { opacity: .58; }
.card-coming:hover { opacity: .85; transform: none !important; }

/* ── Barre de lecture : fine et nette ───────────────────────── */
#sd-progress {
  height: 2px !important;
  background: linear-gradient(90deg,#00ff88,#00d4ff) !important;
  animation: none !important;
  box-shadow: 0 0 10px rgba(0,255,136,.5) !important;
}

/* ── Stats hero : chiffres nets ─────────────────────────────── */
.hero-stats {
  background: var(--p-card) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px -16px rgba(0,0,0,.8) !important;
}
.hs-item strong { text-shadow: none !important; }
.hs-sep { background: rgba(255,255,255,.09) !important; }

/* ── On coupe tout ce qui restait de la v4 ──────────────────── */
body::after { display: none !important; }
.hero h1 em, .blog-hero h1 em { filter: none !important; }
.hero-badge { animation: none !important; box-shadow: none !important; }
.stat-v.pos, .stat-v.neg, .sdp-pct { text-shadow: none !important; }

/* ── Liens contextuels internes (inject-links.py) ───────────── */
.article-body a.sd-ilink {
  color: #7fe8b8;
  text-decoration: underline;
  text-decoration-color: rgba(0,255,136,.32);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s, text-decoration-color .2s;
}
.article-body a.sd-ilink:hover {
  color: var(--sd-accent);
  text-decoration-color: var(--sd-accent);
}

/* ── Page pilier : index des guides (casino-odds-house-edge) ── */
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 26px 0 8px; }
@media (min-width: 620px) { .hub-grid { grid-template-columns: 1fr 1fr; } }
.hub-group {
  background: var(--p-card, #0b1219);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px -14px rgba(0,0,0,.8);
}
.hub-group h3 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 14.5px !important; font-weight: 800;
  letter-spacing: -.012em; color: #eaf3ff;
  margin: 0 0 5px !important;
}
.hub-sub {
  font-size: 12.5px !important; line-height: 1.55 !important;
  color: #6e88a0 !important; margin: 0 0 13px !important;
}
.hub-list { list-style: none; padding: 0 !important; margin: 0 !important; display: block !important; }
.hub-list li { margin: 0 0 2px; font-size: 13.5px; line-height: 1.5; }
.hub-list a {
  display: block; padding: 7px 10px; border-radius: 9px;
  color: #b8cfe4; text-decoration: none;
  transition: background .18s, color .18s, padding-left .22s cubic-bezier(.16,1,.3,1);
}
.hub-list a::before { content: "→ "; color: var(--sd-accent); opacity: .55; }
.hub-list a:hover {
  background: rgba(0,255,136,.07);
  color: #eaf3ff; padding-left: 15px;
}


/* ── Widget utilisateur de l'en-tête ──────────────────────────
   Vivait dans auth.js, qui est désormais chargé à la demande.
   Sorti ici pour que le widget soit stylé dès le premier rendu. */
.h-signin-btn{height:36px;padding:0 14px;background:transparent;border:1.5px solid rgba(255,255,255,.22);border-radius:9px;color:#e8f0fe;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s;}
.h-signin-btn:hover{border-color:#00ff88;color:#00ff88;}
.h-user-wrap{display:flex;align-items:center;gap:9px;cursor:pointer;}
.h-avatar-emoji{width:30px;height:30px;border-radius:50%;background:rgba(0,255,136,.15);border:2px solid #00ff88;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.h-initial{width:30px;height:30px;border-radius:50%;background:#00ff88;color:#0b141d;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.h-xp-wrap{display:flex;flex-direction:column;gap:3px;}
.h-level-name{font-size:10px;font-weight:800;color:#00ff88;letter-spacing:.07em;line-height:1;text-transform:uppercase;}
.h-xp-track{width:72px;height:4px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;}
.h-xp-fill{height:100%;background:linear-gradient(90deg,#00c96e,#00ff88);border-radius:4px;transition:width .5s ease;}
.h-rank-badge{font-size:10px;font-weight:800;color:#ffd700;letter-spacing:.02em;line-height:1;}
.h-rank-badge{display:none;}