/* Documentation VisualGUI — layout style ReadTheDocs, thème du site */
.docs-shell{display:flex; min-height:calc(100vh - 64px)}

.docs-sidebar{
  flex:0 0 300px; max-width:300px; background:var(--card); border-right:1px solid var(--border);
  padding:20px 16px 60px; position:sticky; top:64px; align-self:flex-start;
  height:calc(100vh - 64px); overflow-y:auto;
}
.docs-search-wrap{position:relative; margin-bottom:20px}
.docs-search{
  width:100%; box-sizing:border-box; padding:9px 12px 9px 34px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg-1); color:var(--text); font-size:.85em;
}
.docs-search-icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none}

.docs-nav-group{margin-bottom:6px}
.docs-nav-group-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; color:var(--text); font-weight:700; font-size:.82em;
  text-transform:uppercase; letter-spacing:.03em; padding:9px 6px; cursor:pointer; opacity:.85;
  border-radius:6px;
}
.docs-nav-group-btn:hover{opacity:1; background:color-mix(in srgb, var(--accent) 8%, transparent)}
.docs-nav-group-btn .docs-caret{transition:transform .18s ease; opacity:.6; font-size:.75em}
.docs-nav-group.collapsed .docs-caret{transform:rotate(-90deg)}
.docs-nav-list{margin:0; padding:0; list-style:none; overflow:hidden}
.docs-nav-group.collapsed .docs-nav-list{display:none}
.docs-nav-list li{margin:0}
.docs-nav-list a{
  display:block; padding:7px 10px 7px 20px; font-size:.87em; color:var(--text-dim);
  text-decoration:none; border-radius:6px; line-height:1.35; border-left:2px solid transparent;
}
.docs-nav-list a:hover{color:var(--text); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.docs-nav-list a.active{color:var(--accent-2); font-weight:700; border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent)}
.docs-nav-list li.docs-hidden{display:none}

.docs-main{flex:1; min-width:0; padding:32px 40px 80px; max-width:900px}
.docs-breadcrumb{font-size:.85em; opacity:.65; margin:0 0 22px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.docs-breadcrumb a{color:var(--text-dim); text-decoration:none}
.docs-breadcrumb a:hover{color:var(--accent-2)}
.docs-breadcrumb .sep{opacity:.5}
.docs-breadcrumb .home-ic{opacity:.7}

.docs-note{
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  border-left:4px solid var(--accent); border-radius:0 10px 10px 0;
  padding:16px 20px; margin:0 0 26px; font-size:.92em; line-height:1.6;
}
.docs-note strong.docs-note-title{display:block; margin-bottom:6px; color:var(--accent-2)}

.docs-main h1{font-size:1.9em; margin:0 0 18px}
.docs-main h2{font-size:1.3em; margin:34px 0 12px; padding-top:6px; border-top:1px solid var(--border)}
.docs-main h2:first-of-type{border-top:none; padding-top:0}
.docs-main h3{font-size:1.05em; margin:22px 0 8px}
.docs-main p{line-height:1.7; color:var(--text-dim); margin:0 0 14px}
.docs-main ul, .docs-main ol{line-height:1.75; color:var(--text-dim); margin:0 0 16px; padding-left:22px}
.docs-main code{background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:.9em}
.docs-main a{color:var(--accent-2)}

.docs-soon{
  display:inline-flex; align-items:center; gap:6px; font-size:.75em; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; color:var(--accent-2);
  background:color-mix(in srgb, var(--accent) 14%, transparent); padding:4px 10px; border-radius:20px;
  margin-bottom:18px;
}

.docs-pager{display:flex; justify-content:space-between; gap:14px; margin-top:48px; padding-top:20px; border-top:1px solid var(--border)}
.docs-pager a{
  flex:1; max-width:48%; border:1px solid var(--border); border-radius:10px; padding:12px 16px;
  text-decoration:none; color:var(--text); font-size:.85em; transition:border-color .2s ease;
}
.docs-pager a:hover{border-color:var(--accent)}
.docs-pager .lbl{display:block; opacity:.55; font-size:.78em; margin-bottom:3px}
.docs-pager .next{text-align:right; margin-left:auto}

.docs-shot{
  border:1.5px dashed var(--border); border-radius:12px; background:var(--card-2);
  padding:34px 18px; text-align:center; margin:18px 0 26px; position:relative;
}
.docs-shot .docs-shot-num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:.78em; margin-bottom:8px;
}
.docs-shot .docs-shot-label{display:block; font-size:.82em; color:var(--text-dim)}
.docs-shot img{max-width:100%; border-radius:8px; margin-top:10px}

.docs-mobile-toggle{display:none}

@media (max-width:900px){
  .docs-shell{flex-direction:column}
  .docs-sidebar{position:static; height:auto; max-height:none; width:100%; max-width:100%; flex:1 1 auto; border-right:none; border-bottom:1px solid var(--border)}
  .docs-main{padding:24px 18px 60px; max-width:100%}
}