/* ===== TOKENS (repris de ton style de base) ===== */
:root {
  --rose-nacre:#1c0e17; --rose-pale:#2a1420; --rose-doux:#6e3450;
  --rose-vif:#f48fb1; --rose-accent:#ff8fc0; --rose-fonce:#ff8fbf;
  --texte:#f7e6ee; --texte-doux:#cf9bb8; --noir:#0f070c;
  --surface:rgba(255,255,255,0.045); --surface-border:rgba(255,143,192,0.16);
  --nav-bg:rgba(20,10,16,0.75); --shadow-color:rgba(0,0,0,0.45);
  color-scheme: dark;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  background:radial-gradient(circle at 15% 0%,rgba(233,30,140,0.18),transparent 55%),
             radial-gradient(circle at 85% 30%,rgba(244,143,177,0.10),transparent 50%),var(--rose-nacre);
  color:var(--texte);font-family:'DM Mono',monospace;display:flex;height:100vh;overflow:hidden;
}
.bg-blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.28}
.blob1{width:520px;height:520px;background:var(--rose-doux);top:-120px;left:-160px}
.blob2{width:380px;height:380px;background:var(--rose-vif);top:45%;right:-90px}

/* ===== SIDEBAR ===== */
aside{width:290px;flex-shrink:0;z-index:2;overflow-y:auto;padding:1.5rem 1rem;
  background:var(--nav-bg);backdrop-filter:blur(14px);border-right:1px solid var(--surface-border)}
.nav-logo{font-family:'Playfair Display',serif;font-style:italic;font-size:1.35rem;
  color:var(--rose-fonce);margin:0 0 1.5rem .6rem;cursor:pointer}
.item{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;font-size:.74rem;
  letter-spacing:.06em;color:var(--texte-doux);cursor:pointer;user-select:none;transition:color .2s,background .2s}
.item:hover{color:var(--rose-fonce);background:var(--surface)}
.item.active{color:var(--rose-fonce);background:rgba(255,143,192,0.1);border-left:2px solid var(--rose-fonce)}
.arrow{width:10px;font-size:.55rem;transition:transform .15s}
.open>.item .arrow{transform:rotate(90deg)}
.children{display:none;margin-left:.9rem;border-left:1px solid var(--surface-border)}
.open>.children{display:block}

/* ===== CONTENU ===== */
main{flex:1;z-index:1;overflow-y:auto;padding:4rem 6vw}
article{max-width:820px;margin:0 auto}
article h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,4.5vw,3rem);
  letter-spacing:-.03em;margin-bottom:1.5rem}
article h2{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--rose-fonce);
  margin:2.2rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--surface-border)}
article p{font-size:.82rem;color:var(--texte-doux);line-height:1.9;margin-bottom:1rem}
article ul{margin:0 0 1rem 1.3rem;font-size:.82rem;color:var(--texte-doux);line-height:1.9}

/* ===== CODE + BOUTON COPIER ===== */
.codebox{position:relative;margin:1.2rem 0;border:1px solid var(--surface-border);background:var(--noir)}
.codebox pre{padding:2.4rem 1.2rem 1.2rem;overflow-x:auto;font-family:'DM Mono',monospace;
  font-size:.78rem;line-height:1.7;color:var(--texte)}
.lang{position:absolute;top:.6rem;left:1rem;font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--rose-vif)}
.copy{position:absolute;top:.5rem;right:.5rem;padding:.3rem .8rem;font-family:'DM Mono',monospace;
  font-size:.62rem;letter-spacing:.05em;cursor:pointer;color:var(--rose-fonce);
  background:var(--rose-pale);border:1px solid var(--rose-doux);transition:all .2s}
.copy:hover{background:var(--rose-fonce);color:#fff;border-color:var(--rose-fonce)}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:2rem;right:2rem;z-index:300;padding:.9rem 1.4rem;font-size:.74rem;
  background:#241019;border:1px solid var(--rose-doux);box-shadow:0 10px 40px var(--shadow-color);
  transform:translateY(120px);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.toast.show{transform:translateY(0);opacity:1}

/* ===== MOBILE ===== */
#burger{display:none;position:fixed;top:.8rem;left:.8rem;z-index:20;padding:.5rem .8rem;font-size:1.1rem;
  color:var(--rose-fonce);background:var(--nav-bg);border:1px solid var(--rose-doux);cursor:pointer}
@media(max-width:768px){
  #burger{display:block}
  aside{position:fixed;inset:0 auto 0 0;z-index:15;width:80%;transform:translateX(-100%);transition:transform .25s}
  aside.show{transform:none}
  main{padding:4.5rem 1.2rem 2rem}
}