:root{
  --bg:#07111f; --panel:#101e34; --line:rgba(147,177,255,.18);
  --text:#eef5ff; --muted:#a9bad2; --accent:#58a6ff; --accent2:#7c5cff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%,rgba(88,166,255,.16),transparent 32%),
    radial-gradient(circle at 90% 5%,rgba(124,92,255,.14),transparent 35%),
    linear-gradient(180deg,var(--bg),#050913 88%);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
.siteHeader{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px clamp(18px,4vw,60px);
  background:rgba(7,17,31,.8);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.brandMark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.brand small{display:block;color:var(--muted);font-size:.82rem}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer}
.btnPrimary{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:800}
.hero{max-width:1200px;margin:auto;padding:56px clamp(18px,5vw,90px) 18px}
.eyebrow{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:rgba(88,166,255,.08);color:#cfe3ff;margin-bottom:16px}
h1{font-size:clamp(2.15rem,4vw,4rem);line-height:1;letter-spacing:-.045em;margin:0 0 14px}
.hero p{color:var(--muted);max-width:900px;font-size:1.08rem}
.layout{max-width:1280px;margin:auto;display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;padding:24px clamp(18px,5vw,90px) 80px}
.toc{position:sticky;top:88px;align-self:start;border:1px solid var(--line);border-radius:22px;background:rgba(16,30,52,.74);padding:18px}
.toc h2{font-size:1rem;margin:0 0 10px}
.toc a{display:block;color:var(--muted);padding:7px 0;border-bottom:1px solid rgba(147,177,255,.08);font-size:.94rem}
.toc a:hover{color:var(--text)}
.doc{border:1px solid var(--line);border-radius:26px;background:rgba(16,30,52,.78);padding:clamp(22px,4vw,44px)}
.doc section{padding:18px 0;border-bottom:1px solid rgba(147,177,255,.12)}
.doc section:last-child{border-bottom:0}
.doc h2{margin:0 0 10px;font-size:1.62rem;letter-spacing:-.02em}
.doc p,.doc li{color:#d6e4f5}
.doc ul{padding-left:22px}
.lang-fr{display:none}
html[lang="fr"] .lang-en{display:none}
html[lang="fr"] .lang-fr{display:block}
html[lang="en"] .lang-en{display:block}
.footer{border-top:1px solid var(--line);padding:26px clamp(18px,5vw,90px);color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:900px){.layout{grid-template-columns:1fr}.toc{position:relative;top:auto}.siteHeader{flex-wrap:wrap}}