/* ==========================================================================
   Documentation VDS — shell (sidebar + article) rendu DANS le layout du site.
   Le corps de l'article reutilise .vds-prose (typo premium) + vds-highlight.js
   (fenetres IDE + coloration). Ici : grille, sidebar accordion, badges OS.
   Palette = tokens.css / vds.css (memes variables que tout le site).
   ========================================================================== */

.help { background: var(--vds-paper); }
.help__wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(26px, 4vw, 52px) 24px clamp(56px, 7vw, 96px);
  align-items: start;
}

/* ---- Sidebar (sommaire) ---- */
.help__nav {
  position: sticky; top: 88px;
  max-height: calc(100vh - 110px); overflow: auto;
  border: 1px solid var(--vds-line); border-radius: 16px; background: #fff;
  padding: 14px 12px; font-family: var(--font-sans); font-size: .93rem;
  box-shadow: 0 24px 50px -36px rgba(20, 40, 90, .35);
}
.help__navhead {
  font-family: var(--font-display); font-weight: 800; font-size: .76rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--vds-muted);
  padding: 4px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--vds-line);
}
.help__nav ul { list-style: none; margin: 0; padding: 0; }
.help__nav details > ul { padding-left: 11px; margin-left: 9px; border-left: 1px solid var(--vds-line); }
.help__nav li { margin: 1px 0; }
.help__nav a {
  display: block; text-decoration: none; color: var(--vds-fg);
  padding: 4px 9px; border-radius: 8px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.help__nav a:hover { background: #eef3fb; color: var(--vds-blue); }
.help__nav a.cur {
  background: linear-gradient(95deg, var(--vds-blue), var(--vds-cyan));
  color: #fff; font-weight: 600;
}
.help__nav summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 8px; font-weight: 600; color: var(--vds-fg);
}
.help__nav summary::-webkit-details-marker { display: none; }
.help__nav summary::before {
  content: ""; flex: 0 0 auto;
  border-left: 5px solid var(--vds-muted);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.help__nav details[open] > summary::before { transform: rotate(90deg); }
.help__nav summary:hover { background: #eef3fb; }
.help__nav summary:hover::before { border-left-color: var(--vds-blue); }
.help__nav summary > a { flex: 1 1 auto; padding: 0; background: none; }
.help__nav summary > a:hover { background: none; }
.help__nav summary > a.cur { padding: 2px 8px; }
.help__nav summary > span { flex: 1 1 auto; }

/* ---- Article ---- */
.help__article { min-width: 0; }
.help__article > h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1;
  margin: 0 0 .25em; color: var(--vds-fg);
}
/* .vds-prose impose max-width:760px;margin:auto — en colonne on veut pleine largeur, aligne a gauche */
.help__article.vds-prose { max-width: none; margin: 0; padding: 0; font-size: 1.06rem; }

/* ---- Badges de compatibilite OS (Windows / Linux / macOS) ---- */
.osbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: .5em 0 1.9em; }
.osb {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; line-height: 1;
  padding: 5px 11px; border-radius: 99px; border: 1px solid transparent;
  letter-spacing: .02em; white-space: nowrap;
}
.osb b { font-size: .78rem; font-weight: 700; }
.osb.ok      { background: #e7f6ec; color: #1e7a34; border-color: #bfe3c8; }
.osb.partial { background: #fff4e0; color: #9a6400; border-color: #f0d59a; }
.osb.gated   { background: #fdece8; color: #b23c17; border-color: #f3c6b8; }
.osb.planned { background: #eef1f5; color: #5b6b7b; border-color: #d7dee7; }

/* ---- Bandeau "doc en anglais" (locales non-EN) ---- */
.help__langnote {
  margin: 0 0 1.8em; padding: .7em 1em;
  border: 1px solid var(--vds-line); border-left: 3px solid var(--vds-blue);
  border-radius: 0 9px 9px 0; background: #eef3fb;
  color: #33405e; font-size: .92rem; line-height: 1.5;
}

/* ---- Badge de version [VDS6]/[VDS7] inline ---- */
.help__article .badge {
  display: inline-block; font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 6px;
  background: #eef3fb; color: var(--vds-blue); border: 1px solid #d6e2f5;
  vertical-align: middle; margin-right: 6px;
}

/* ---- Mobile : sidebar repliee au-dessus du contenu ---- */
@media (max-width: 900px) {
  .help__wrap { grid-template-columns: 1fr; gap: 0; }
  .help__nav { position: static; max-height: none; margin-bottom: 26px; }
}