/* ════════════════════════════════════════════════════════════════
   Visual UP — Blog (SEO statique) · DA violet sombre, cohérente
   ════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0512; --bg2:#120a20; --bg3:#170d29;
  --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --line:rgba(186,140,255,.16); --line2:rgba(186,140,255,.32);
  --v300:#c084fc; --v500:#a855f7; --v600:#7c3aed; --lav:#e9d5f7;
  --txt:#f4effc; --mut:#a99cc4; --mut2:#7d6f9c;
  --grad:linear-gradient(135deg,#c084fc 0%,#a855f7 45%,#7c3aed 100%);
  --glow:0 0 40px rgba(168,85,247,.35), 0 0 120px rgba(124,58,237,.18);
  --r:18px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',sans-serif; font-size:17px; line-height:1.7;
  color:var(--txt); background:var(--bg); -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(50% 40% at 100% 8%, rgba(168,85,247,.14), transparent 55%),
    var(--bg);
}
h1,h2,h3,h4{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1.15}
a{color:var(--v300); text-decoration:none; transition:color .2s}
a:hover{color:var(--lav)}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.script{font-family:'Yellowtail',cursive; font-weight:400; color:var(--lav)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* ── Header ── */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  background:rgba(10,5,18,.62); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:70px}
.logo img{height:32px; display:block; filter:drop-shadow(0 0 14px rgba(168,85,247,.35))}
.nav-links{display:flex; gap:28px}
.nav-links a{color:var(--mut); font-weight:500; font-size:.95rem}
.nav-links a:hover{color:var(--lav)}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem;
  padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .25s}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--panel); color:var(--lav); border-color:var(--line2)}

/* ── Index du blog ── */
.blog-hero{text-align:center; padding:80px 0 50px}
.blog-hero .kicker{font-family:'DM Mono'; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--v300); margin-bottom:16px}
.blog-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:18px}
.blog-hero p{color:var(--mut); max-width:560px; margin:0 auto; font-size:1.05rem}
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:24px; padding-bottom:90px}
.post-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:transform .3s var(--ease), border-color .25s, box-shadow .3s}
.post-card:hover{transform:translateY(-6px); border-color:var(--line2); box-shadow:0 28px 64px rgba(0,0,0,.5), var(--glow)}
.post-thumb{aspect-ratio:16/9; display:flex; align-items:flex-end; padding:18px; position:relative}
.post-thumb .tag{font-family:'DM Mono'; font-size:.68rem; letter-spacing:.05em; padding:5px 11px; border-radius:999px;
  background:rgba(10,5,18,.55); color:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18)}
.post-body{padding:20px}
.post-body h2{font-size:1.18rem; line-height:1.3; margin-bottom:10px; color:var(--txt)}
.post-body p{color:var(--mut); font-size:.94rem; line-height:1.55; margin-bottom:14px}
.post-meta{font-family:'DM Mono'; font-size:.74rem; color:var(--mut2); display:flex; gap:10px}

/* ── Article ── */
.article{max-width:740px; margin:0 auto; padding:54px 28px 40px}
.article .back{font-family:'DM Mono'; font-size:.8rem; color:var(--mut); display:inline-block; margin-bottom:26px}
.article .a-kicker{font-family:'DM Mono'; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--v300); margin-bottom:14px}
.article h1{font-size:clamp(2rem,4.5vw,3rem); line-height:1.1; margin-bottom:18px}
.a-meta{font-family:'DM Mono'; font-size:.8rem; color:var(--mut2); display:flex; gap:14px; flex-wrap:wrap;
  padding-bottom:26px; margin-bottom:30px; border-bottom:1px solid var(--line)}
.prose{font-size:1.06rem; line-height:1.78; color:#e7ddf3}
.prose > p{margin:0 0 22px}
.prose h2{font-size:1.7rem; margin:46px 0 16px; letter-spacing:-.02em}
.prose h3{font-size:1.28rem; margin:34px 0 12px; color:var(--lav)}
.prose ul,.prose ol{margin:0 0 22px; padding-left:24px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--v500)}
.prose strong{color:#fff; font-weight:700}
.prose a{border-bottom:1px solid var(--line2)}
.prose blockquote{margin:26px 0; padding:18px 24px; border-left:3px solid var(--v500);
  background:linear-gradient(100deg, rgba(124,58,237,.12), transparent); border-radius:0 12px 12px 0;
  color:var(--lav); font-size:1.05rem}
.prose code{font-family:'DM Mono',monospace; font-size:.88em; background:rgba(168,85,247,.14);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--v300)}
.prose pre{background:#0d0618; border:1px solid var(--line2); border-radius:14px; padding:18px 20px;
  overflow:auto; margin:0 0 24px; font-family:'DM Mono',monospace; font-size:.84rem; line-height:1.55; color:#d2c7e8}
.prose pre code{background:none; border:0; padding:0; color:inherit}
.prose img{max-width:100%; border-radius:14px; margin:24px 0}

/* CTA in-article */
.cta-box{margin:46px 0 10px; padding:30px; border-radius:20px;
  background:linear-gradient(160deg, rgba(124,58,237,.18), rgba(168,85,247,.05));
  border:1px solid var(--line2); box-shadow:var(--glow); text-align:center}
.cta-box h3{font-size:1.4rem; margin-bottom:10px; font-family:'Unbounded'}
.cta-box p{color:var(--mut); margin-bottom:20px}

/* FAQ */
.faq{max-width:740px; margin:30px auto 0; padding:0 28px}
.faq h2{font-size:1.6rem; margin-bottom:20px}
.faq details{border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin-bottom:12px; background:var(--panel)}
.faq summary{cursor:pointer; font-weight:600; padding:14px 0; list-style:none; color:var(--txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--v300); font-family:'DM Mono'}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--mut); padding:0 0 16px; line-height:1.6}

/* ── Footer ── */
footer{border-top:1px solid var(--line); padding:42px 0 60px; color:var(--mut2); margin-top:70px}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.foot-links a{color:var(--mut); font-size:.9rem}
.foot small{font-family:'DM Mono'; font-size:.78rem}

@media(max-width:760px){
  .bar{height:auto; flex-wrap:wrap; padding:12px 0; gap:10px}
  .nav-links{display:flex; order:3; width:100%; justify-content:center; gap:18px; flex-wrap:wrap; font-size:.9rem}
  .post-grid{grid-template-columns:1fr}
  .article{padding:36px 20px 30px}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(168,85,247,.25);border-radius:10px}