/* ═══════════════════════════════════════════════════════════════
   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);
}

/* ── 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; }
}

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