/* Manual page: two columns (contents + text) on wide screens, one column with a folding contents list on small ones. */
html[lang="fr"] .lang-en, html[lang="en"] .lang-fr { display: none !important; }

.manual { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
.toc { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow: auto; padding: 28px 0 40px; scrollbar-width: thin; }
.toc-toggle { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.35; transition: background .15s, color .15s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font: 700 11px/1 var(--mono); color: rgba(255,255,255,.3); flex: none; width: 18px; }
.toc a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.toc a.is-active { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--deck-a) 22%, transparent), transparent); box-shadow: inset 2px 0 0 var(--deck-a); }
.toc a.is-active::before { color: var(--deck-a); }

.doc { padding: 44px 0 40px; min-width: 0; }
.doc-head { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(38px, 5.5vw, 64px); font-weight: 900; letter-spacing: -0.035em; margin: 6px 0 18px; }
.doc-lead { font-size: 19px; color: #c9c9da; max-width: 46em; }
.doc section { padding-top: 56px; scroll-margin-top: 70px; }
.doc h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 850; margin-bottom: 18px; }
.doc h2 .num { font: 800 14px/1 var(--mono); color: #fff; padding: 7px 9px; border-radius: 9px; background: linear-gradient(135deg, var(--deck-a), var(--violet)); flex: none; }
.doc h3 { font-size: 19px; margin: 28px 0 12px; color: #fff; }
.doc p { color: #cfcfdd; margin: 0 0 14px; max-width: 46em; }
.doc a { color: var(--deck-a); }
.doc strong { color: #fff; }
.ui { font: 700 .86em/1 var(--mono); letter-spacing: .02em; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
td.ui { background: none; border: 0; padding: 12px 16px; white-space: normal; }
kbd { font: 700 13px/1 var(--mono); color: #fff; padding: 4px 7px; border-radius: 6px; background: linear-gradient(#2a2a34, #18181f); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 2px 0 rgba(0,0,0,.6); display: inline-block; min-width: 1.6em; text-align: center; }

.steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 48em; }
.steps li { counter-increment: step; position: relative; padding: 12px 16px 12px 54px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: #d8d8e6; }
.steps li::before {
  content: counter(step); position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 800 13px/1 var(--mono); color: #fff;
  background: radial-gradient(circle at 35% 30%, #5a5a68, #15151b 70%); box-shadow: 0 0 0 2px var(--deck-a), 0 0 12px -2px var(--deck-a);
}
.def { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 48em; }
.doc li, .doc p, .doc dd { overflow-wrap: anywhere; }
.def li { padding: 10px 0 10px 18px; border-left: 2px solid rgba(255,255,255,.1); color: #d0d0de; }
.tip, .note { padding: 14px 18px; border-radius: 12px; font-size: 15px; max-width: 48em; }
.tip { background: color-mix(in srgb, var(--green) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--green) 28%, transparent); }
.tip::before { content: "Astuce · "; font-weight: 800; color: var(--green); }
html[lang="en"] .tip::before { content: "Tip · "; }
.note { background: color-mix(in srgb, var(--orange) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); }
.tbl { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15px; background: var(--panel); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: block; overflow-x: auto; }
.tbl thead, .tbl tbody { display: table; width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; color: #d4d4e2; }
.tbl th { font-size: 13px; color: var(--muted); font-weight: 600; background: rgba(255,255,255,.02); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.kbd-table td { white-space: nowrap; }
.kbd-table td:first-child { white-space: normal; }
.faq { margin: 0; max-width: 48em; }
.faq dt { font-weight: 800; color: #fff; margin-top: 18px; }
.faq dd { margin: 6px 0 0; color: #cfcfdd; }
.c-vocal { color: #3ddc84 !important; } .c-inst { color: #f0524c !important; } .c-bass { color: #e05ad8 !important; } .c-drums { color: #4f8bff !important; }
.badge-soon { display: inline-block; vertical-align: middle; margin-left: 8px; font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); padding: 4px 7px; border-radius: 999px; }
.doc-foot { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.doc-foot p { margin: 0; }

/* Tablet and phone: contents fold above the text */
@media (max-width: 960px) {
  .manual { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: sticky; top: 57px; z-index: 20; max-height: none; overflow: visible; padding: 10px 0; background: rgba(7,7,11,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .toc-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; font: 700 14px/1 var(--sans); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
  .toc-toggle::after { content: "▾"; color: var(--muted); transition: transform .2s; }
  .toc-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .toc ol { display: none; margin-top: 8px; max-height: 60vh; overflow: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc.is-open ol { display: grid; }
  .doc { padding-top: 24px; }
  .doc section { scroll-margin-top: 130px; }
}
@media (max-width: 560px) {
  .ui { white-space: normal; line-height: 1.5; }
  .toc ol { grid-template-columns: minmax(0, 1fr); }
  .steps li { padding-left: 48px; }
  .doc-lead { font-size: 17px; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 10px 12px; }
}
/* Large screens: more room for the text */
@media (min-width: 1700px) {
  .manual { max-width: 1440px; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; }
  .doc p, .steps, .def, .tip, .note, .faq { max-width: 54em; }
}
@media print {
  .topbar, .toc, .footer, .doc-foot .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .manual { display: block; }
  .doc p, .def li, .steps li, .tbl td, .faq dd { color: #111; }
  .doc h2, .doc h3, .doc strong, .faq dt { color: #000; }
  .steps li, .tbl, .tip, .note { background: #fff; border-color: #ccc; }
}

/* Single-column pages (privacy, support) */
.page { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.page .doc { padding-top: 44px; }
.page .doc section { padding-top: 40px; }
.updated { font: 600 13px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 26px; margin: 8px 0 10px; border-radius: 18px;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, var(--deck-a), var(--violet), var(--deck-b)) border-box;
  border: 1.5px solid transparent;
}
.contact-card .mail { font: 800 clamp(20px, 3vw, 26px)/1.2 var(--mono); color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.contact-card .mail:hover { text-decoration: underline; }
.contact-card p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.contact-card .btn { margin-left: auto; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.summary-grid div { padding: 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.summary-grid strong { display: block; font-size: 22px; font-weight: 900; color: var(--green); }
.summary-grid span { color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .contact-card .btn { margin-left: 0; width: 100%; justify-content: center; } }