:root{
  --sidebar-w:260px;
  --bg:#0f1115;
  --panel:#161a22;
  --text:#d7dbe7;
  --muted:#9aa4b2;
  --accent:#6b5cff;
  --hover:#1f2432;
  --border:#232838;
  --ring:rgba(107,92,255,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
     font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.layout{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  position:sticky; top:0; height:100vh; width:var(--sidebar-w);
  background:var(--panel); border-right:1px solid var(--border);
  padding:20px 16px; overflow:auto;
}
.brand{display:flex;align-items:center;gap:10px;margin:2px 6px 14px;
  text-decoration:none;color:var(--text);font-weight:700}
.brand img{height:22px}

.menu{list-style:none;padding:0;margin:0}
.menu>li{margin:6px 0}
.menu a{
  display:block; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:var(--text);
}
.menu a:hover{background:var(--hover)}
.menu a.active{
  background:rgba(107,92,255,.18);
  outline:1px solid var(--ring); color:#fff;
}

/* Groupes plieurs */
.group .group-toggle{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:10px 12px; border-radius:10px; color:var(--text)
}
.group .group-toggle:hover{background:var(--hover)}
.group .chev{float:right; transition:transform .18s ease}
.group.open .chev{transform:rotate(90deg)}

.submenu{
  display:none; list-style:none; margin:6px 0 6px 8px; padding-left:8px;
  border-left:1px dashed var(--border)
}
.group.open .submenu{display:block}
.submenu a{color:var(--muted); padding:8px 12px; border-radius:8px}
.submenu a:hover{color:#fff; background:var(--hover)}

/* Contenu */
.content{flex:1; max-width:100%; padding:32px 40px}
.content h1,.content h2{margin-top:0}

/* Mobile */
.mobile-toggle{
  display:none;
}
@media (max-width:900px){
  .sidebar{position:fixed; left:0; transform:translateX(-100%);
           transition:transform .25s ease; z-index:20}
  .sidebar.open{transform:translateX(0)}
  .content{padding:24px}
  .mobile-toggle{
    display:block; position:fixed; top:14px; left:14px; z-index:30;
    background:var(--panel); border:1px solid var(--border);
    color:var(--text); border-radius:8px; padding:8px 10px
  }
}

/***********/
/* Overlay pour mobile */
@media (max-width:900px){
  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
    height: 100vh;
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Overlay */
  .sidebar.open::after {
    content: '';
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
  }

  .mobile-toggle {
    display: block;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1001;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
  }
}