/* ============================================================
   RUBRIQUE AIDE (/aide) — une colonne de 760 px, des cartes comme les
   Paramètres. Un tuto = des étapes numérotées, chacune avec un schéma
   d'écran (pas une capture) où l'endroit où agir est cerclé de l'accent.
   ============================================================ */
.wd-aide { max-width: 760px; margin: 8px auto 64px; }
.wd-aide-back { margin: 0 0 14px; font-size: 0.86rem; }
.wd-aide-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--ep-text-secondary); text-decoration: none; }
.wd-aide-back a:hover { color: var(--wd-onyx); }
.wd-aide-back .ms { font-size: 19px; }
.wd-aide-head h1 { font-size: 1.75rem; margin: 0 0 6px; }
.wd-aide-head p { margin: 0 0 24px; max-width: 62ch; font-size: 0.94rem; color: var(--ep-text-secondary); }
.wd-aide-head a { color: var(--wd-onyx); }

/* La liste des tutos */
.wd-aide-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--wd-card-border); border-radius: var(--wd-r-card); background: #fff; box-shadow: var(--wd-card-shadow); overflow: hidden; }
.wd-aide-list li + li { border-top: 1px solid var(--wd-hairline); }
.wd-aide-list a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: inherit; text-decoration: none; }
.wd-aide-list a:hover { background: var(--wd-papier); }
.wd-aide-list .ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wd-papier); font-size: 21px; color: var(--wd-onyx); }
.wd-aide-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wd-aide-list .t b { font-weight: 600; color: var(--wd-onyx); }
.wd-aide-list .t small { font-size: 0.84rem; color: var(--ep-text-secondary); }
.wd-aide-list .chev { flex: none; color: var(--ep-text-muted); }

/* Un tuto */
.wd-aide-sec { margin: 0 0 16px; padding: 22px 24px 24px; border: 1px solid var(--wd-card-border); border-radius: var(--wd-r-card); background: #fff; box-shadow: var(--wd-card-shadow); }
.wd-aide-sec > h2 { margin: 0 0 14px; font-size: 1.02rem; letter-spacing: -0.01em; }
.wd-aide-p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ep-text-secondary); }
.wd-aide-hosts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.wd-aide-hosts a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--wd-hairline-2); border-radius: 999px; background: #fff; font-size: 0.88rem; font-weight: 500; color: var(--wd-onyx); text-decoration: none; }
.wd-aide-hosts a:hover { border-color: var(--wd-onyx); }
.wd-aide-hosts a.is-on { border-color: var(--wd-onyx); background: var(--wd-onyx); color: #fff; }
.wd-aide-hosts small { font-size: 0.72rem; opacity: 0.7; }
.wd-aide-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 28px; counter-reset: wd-aide; }
.wd-aide-steps > li { position: relative; padding-left: 38px; counter-increment: wd-aide; }
.wd-aide-steps > li::before { content: counter(wd-aide); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wd-onyx); color: #fff; font-size: 0.8rem; font-weight: 600; }
.wd-aide-steps h3 { margin: 0 0 6px; font-size: 0.98rem; font-weight: 600; }
.wd-aide-steps p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.55; color: var(--ep-text-secondary); }
.wd-aide-steps p b { font-weight: 600; color: var(--wd-onyx); }
.wd-aide-steps p a { color: var(--wd-onyx); }
.wd-aide code { padding: 1px 6px; border-radius: 6px; background: var(--wd-papier); color: var(--wd-onyx); font-size: 0.86em; }
.wd-aide-steps .note { margin: 10px 0 0; font-size: 0.82rem; color: var(--ep-text-muted); }
.wd-aide-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.wd-aide-code code { padding: 8px 12px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.wd-aide-code .wd-gf-hint { margin: 0; }
.wd-aide-wait, .wd-aide-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.88rem; color: var(--ep-text-secondary); }
.wd-aide-wait .ms { font-size: 19px; color: var(--ep-text-muted); }
.wd-aide-ok { margin: 0; color: var(--wd-onyx); }
.wd-aide-ok .ms { color: var(--wd-st-ok); }
.wd-aide-wait a, .wd-aide-ok a { color: var(--wd-onyx); }

/* Schéma d'écran */
.wd-aide-screen { max-width: 520px; margin: 0; border: 1px solid var(--wd-hairline-2); border-radius: 12px; background: #fff; overflow: hidden; }
.wd-aide-screen .bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--wd-hairline); background: var(--wd-papier); font-size: 0.74rem; color: var(--ep-text-muted); }
.wd-aide-screen .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--wd-hairline-2); }
.wd-aide-screen .bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-aide-screen .body { display: flex; flex-direction: column; gap: 10px; padding: 14px; font-size: 0.8rem; color: var(--wd-onyx); }
.wd-aide-screen .tabs { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--wd-hairline); color: var(--ep-text-muted); }
.wd-aide-screen .tabs span, .wd-aide-screen .menu span { padding: 2px 6px; border-radius: 6px; }
.wd-aide-screen .cols { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.wd-aide-screen .menu { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--ep-text-muted); }
.wd-aide-screen .ln { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.wd-aide-screen .ln.end { justify-content: flex-end; }
.wd-aide-screen .ln .field { flex: 1; min-width: 120px; }
.wd-aide-screen .k { color: var(--ep-text-muted); }
.wd-aide-screen .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wd-aide-screen .field .l { font-size: 0.74rem; color: var(--ep-text-muted); }
.wd-aide-screen .field .v { display: block; padding: 6px 10px; border: 1px solid var(--wd-hairline-2); border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-aide-screen .bt { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--wd-hairline-2); border-radius: 8px; background: #fff; font-weight: 500; white-space: nowrap; }
.wd-aide-screen .bt.is-primary { border-color: var(--wd-onyx); background: var(--wd-onyx); color: #fff; }
.wd-aide-screen .check { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wd-aide-screen .check .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-aide-screen .check .box { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--wd-hairline-2); border-radius: 4px; }
.wd-aide-screen .check .box.on { border-color: var(--wd-onyx); background: var(--wd-onyx); }
.wd-aide-screen .check .box.radio { border-radius: 50%; }
.wd-aide-screen .check .box.radio.on { border: 4px solid var(--wd-onyx); background: #fff; }
/* L'endroit où agir */
.wd-aide-screen .is-target { outline: 2px solid var(--wd-jaune); outline-offset: 2px; border-radius: 8px; color: var(--wd-onyx); }
.wd-aide-screen .field.is-target .v { border-color: var(--wd-jaune); }

@media (max-width: 560px) {
    .wd-aide-sec { padding: 18px 16px 20px; }
    .wd-aide-steps > li { padding-left: 36px; }
    .wd-aide-screen .cols { grid-template-columns: minmax(0, 1fr); }
}