@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --brand:#4F46E5;--brand-700:#4338CA;--brand-50:#EEF2FF;--violet:#7C3AED;
  --grad:linear-gradient(135deg,#6366F1 0%,#8B5CF6 55%,#A855F7 100%);
  --emerald:#10B981;--emerald-50:#ECFDF5;--amber:#F59E0B;
  --ink:#0F172A;--head:#1E293B;--muted:#64748B;--line:#E5E9F0;--bg:#F8FAFC;--surface:#fff;--dark:#0B1020;
  --r:14px;--r-md:18px;--r-lg:24px;
  --sh-sm:0 1px 2px rgba(15,23,42,.04),0 2px 6px rgba(15,23,42,.06);
  --sh-md:0 6px 16px -4px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.05);
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:'Plus Jakarta Sans',var(--font);
  /* compat anciens tokens */
  --navy:#312E81;--navy2:#4F46E5;--gold:#7C3AED;--goldl:#EEF2FF;--green:#10B981;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:780px;margin:0 auto;padding:0 22px}

/* Navbar (glass sticky) */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.topnav{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:13px 22px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;color:var(--ink);text-decoration:none;font-size:1.08rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px;border-radius:8px}
.brand b{color:var(--brand)}
.topnav nav{display:flex;align-items:center;gap:4px}
.topnav .lnk{color:var(--muted);text-decoration:none;font-size:.93rem;font-weight:500;margin-left:8px;padding:8px 12px;border-radius:10px;transition:color .18s,background .18s}
.topnav .lnk:hover{color:var(--brand);background:var(--brand-50);text-decoration:none}
.topnav .lnk:last-child{color:#fff;background:var(--brand);box-shadow:var(--sh-sm)}
.topnav .lnk:last-child:hover{background:var(--brand-700);color:#fff}

/* Breadcrumb + article */
.crumb{font-size:.85rem;color:var(--muted);margin:24px 0 4px}
.crumb a{color:var(--muted)}
article h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.02em;color:var(--head);margin:8px 0 12px}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:18px}
article h2{font-family:var(--display);color:var(--head);font-size:1.45rem;letter-spacing:-.01em;margin:34px 0 10px}
article h3{font-family:var(--display);color:var(--head);font-size:1.12rem;margin:22px 0 6px}
article p{margin:12px 0}
article ul,article ol{margin:12px 0 12px 22px}
article li{margin:6px 0}
.lead{font-size:1.16rem;color:#334155;line-height:1.6}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;font-size:.95rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
th{background:var(--brand-50);color:var(--brand-700);text-align:left;padding:12px 14px;font-size:.88rem;font-weight:700;letter-spacing:.01em}
td{padding:11px 14px;border-top:1px solid var(--line)}
tr:nth-child(even) td{background:#F9FAFE}

/* Note / info */
.note{background:var(--brand-50);border-left:4px solid var(--brand);padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:20px 0;font-size:.97rem;color:#334155}

/* CTA block */
.cta{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:30px;margin:30px 0;text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 50% -20%,rgba(124,58,237,.45),transparent 70%);pointer-events:none}
.cta h3{position:relative;font-family:var(--display);color:#fff;font-size:1.3rem;margin-bottom:8px;letter-spacing:-.01em}
.cta p{position:relative;color:#C7D2FE;margin-bottom:18px}

/* Buttons */
.btn{display:inline-block;background:var(--grad);color:#fff;font-family:var(--display);font-weight:700;text-decoration:none;padding:14px 28px;border-radius:12px;box-shadow:0 8px 20px -6px rgba(99,102,241,.55);transition:transform .18s ease,box-shadow .18s ease;position:relative}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(99,102,241,.65);text-decoration:none;color:#fff}

/* Related + disclaimer */
.related{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;margin:26px 0;box-shadow:var(--sh-sm)}
.related b{color:var(--head);font-family:var(--display)}
.related a{display:block;margin:9px 0;text-decoration:none;color:var(--brand);font-weight:500}
.related a:hover{text-decoration:underline}
.disc{color:#94A3B8;font-size:.82rem;margin:28px 0}

/* Footer */
footer{position:relative;background:var(--dark);color:#94A3B8;padding:34px 0;font-size:.88rem;margin-top:36px}
footer a{color:#C7D2FE}

/* Blog index hero + cards */
.hero-b{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:clamp(48px,7vw,72px) 0}
.hero-b::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 18% -10%,rgba(99,102,241,.55),transparent 60%),radial-gradient(600px 300px at 100% 0%,rgba(168,85,247,.35),transparent 55%);pointer-events:none}
.hero-b .container{position:relative}
.hero-b h1{font-family:var(--display);color:#fff;font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-.02em;margin-bottom:10px;line-height:1.12}
.hero-b p{color:#C7D2FE;font-size:1.1rem;max-width:640px}
.cardlist{display:grid;gap:16px;margin:28px 0}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;text-decoration:none;display:block;box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease}
.acard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);text-decoration:none}
.acard h2{font-family:var(--display);color:var(--head);font-size:1.2rem;margin:6px 0 6px;letter-spacing:-.01em}
.acard p{color:var(--muted);font-size:.97rem}
.acard span{display:inline-block;color:var(--brand-700);background:var(--brand-50);font-weight:700;font-size:.72rem;letter-spacing:.08em;padding:4px 10px;border-radius:999px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.btn:hover,.acard:hover{transform:none}}