/* ═══════════════════════════════════════════════════════════════
   Centre d'aide Wingman — prolonge pages.css (mêmes jetons, même
   typographie, même ciel). Une colonne de navigation à gauche, la
   lecture à droite ; sur téléphone la navigation passe en tête, repliée.

   Conventions des tutoriels, les mêmes partout :
   · .etapes      liste numérotée d'actions (une action = un verbe)
   · figure.cap   capture réelle, légende « Capture N — … » numérotée
                  par aide.js ; encadré bleu + pastille = où regarder
   · .encart      conseil (bleu), attention (orange), a-verifier (gris)
   · .resultat    ce que le pilote doit voir à la fin (vert)
   ═══════════════════════════════════════════════════════════════ */

.aide-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.aide-hero { padding: 48px 0 28px; }
.aide-hero .lead { max-width: 40em; }
.fil { font-size: 13px; color: var(--ink-mute); margin-bottom: 14px; }
.fil a { color: var(--ink-mute); text-decoration: none; }
.fil a:hover { color: var(--ink); text-decoration: underline; }
.fil span { margin: 0 6px; color: var(--ink-dim); }

.plateformes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.plat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--frost);
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.plat svg { width: 14px; height: 14px; color: var(--electric); }

/* ── Mise en page à deux colonnes ── */
.aide-layout {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 48px;
  align-items: start; padding-bottom: 24px;
}
.aide-toc {
  position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto;
  font-size: 14px; padding-right: 4px;
}
.aide-toc .grp { margin-bottom: 18px; }
.aide-toc .grp-t {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 6px;
}
.aide-toc a {
  display: block; padding: 5px 10px; margin-left: -10px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
}
.aide-toc a:hover { background: var(--accent-soft); color: var(--ink); }
.aide-toc a[aria-current] { background: var(--accent-soft); color: var(--electric); font-weight: 600; }
.aide-toc .sous { margin: 2px 0 6px 10px; border-left: 1px solid var(--line); }
.aide-toc .sous a { font-size: 13px; padding: 3px 10px; margin-left: 0; color: var(--ink-mute); border-radius: 0 8px 8px 0; }

.toc-bouton { display: none; }

/* ── Article ── */
.doc { min-width: 0; max-width: 760px; }
.doc > section { padding: 8px 0 20px; scroll-margin-top: 84px; }
.doc h2 {
  font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  margin: 28px 0 12px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  scroll-margin-top: 84px;
}
.doc > section:first-child h2, .doc h2.premier { border-top: none; padding-top: 0; margin-top: 8px; }
.doc h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; scroll-margin-top: 84px; }
.doc p { margin-top: 10px; }
.doc p:first-child { margin-top: 0; }
.doc ul, .doc ol { padding-left: 22px; margin: 10px 0; }
.doc li + li { margin-top: 5px; }
.doc li::marker { color: var(--sky-blue); }
.doc kbd {
  font: 600 12.5px var(--font); padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--frost); color: var(--ink);
}
.doc .ui {                     /* libellé exact de l'interface */
  font-weight: 700; color: var(--ink);
}
.doc code { font: 600 14px var(--font); color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.doc th, .doc td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.doc .tbl { overflow-x: auto; }

/* « À quoi ça sert ? » — le chapeau d'une fonctionnalité */
.chapeau {
  font-size: 17px; color: var(--ink-soft); line-height: 1.6;
  padding: 16px 20px; border-radius: var(--r-2xl);
  background: var(--frost); border: 1px solid var(--line);
}
.prerequis { margin-top: 12px; }
.prerequis li { list-style: none; position: relative; padding-left: 26px; }
.prerequis { padding-left: 0 !important; }
.prerequis li::before {
  content: ''; position: absolute; left: 2px; top: 6px; width: 14px; height: 14px; border-radius: 4px;
  border: 2px solid var(--sky-blue);
}

/* ── Étapes numérotées ── */
.etapes { list-style: none; padding-left: 0 !important; counter-reset: etape; margin-top: 16px; }
.etapes > li {
  counter-increment: etape; position: relative; padding-left: 46px; margin-top: 22px;
}
.etapes > li::before {
  content: counter(etape); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 15px;
  background: var(--electric); color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center; box-shadow: var(--shadow-btn-blue);
}
.etapes > li > .act { display: block; font-weight: 600; color: var(--ink); font-size: 16.5px; }
.etapes > li > p { margin-top: 6px; }

/* ── Captures ── */
figure.cap { margin: 16px 0 6px; }
figure.cap a { display: block; }
figure.cap img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(10,18,48,.05), 0 10px 30px -12px rgba(10,18,48,.25);
  background: #eef3fb;
}
figure.cap.tel { max-width: 300px; }
figure.cap.etroit { max-width: 400px; }   /* panneau latéral du site, recadré */
figure.cap.etroit.xs { max-width: 220px; }
figure.cap.moyen { max-width: 560px; }
figure.cap.tel img { border-radius: 26px; }
figure.cap.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; }
figure.cap.duo img { border-radius: 26px; }
figure.cap.duo figcaption { grid-column: 1 / -1; }
figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
figcaption b { color: var(--ink); font-weight: 700; }
.regarder { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.regarder::before { content: '→ '; color: var(--electric); font-weight: 700; }

/* ── Encarts ── */
.encart {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0; padding: 14px 18px; border-radius: var(--r-2xl);
  font-size: 15px; line-height: 1.55;
}
.encart .ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.encart p { margin: 0; }
.encart p + p { margin-top: 6px; }
.encart.conseil { background: var(--accent-soft); border: 1px solid rgba(0,54,255,.16); color: var(--ink-soft); }
.encart.conseil .ico { color: var(--electric); }
.encart.attention { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.encart.attention .ico { color: var(--warn); }
.encart.attention strong { color: var(--warn-ink); }
.encart.a-verifier { background: transparent; border: 1px dashed var(--ink-dim); color: var(--ink-mute); }
.encart.a-verifier .ico { color: var(--ink-mute); }

.resultat {
  margin: 20px 0 8px; padding: 16px 20px; border-radius: var(--r-2xl);
  background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.25);
}
.resultat .t { font-weight: 700; color: var(--go); font-size: 14px; letter-spacing: .02em; }
.resultat p { margin-top: 4px; color: var(--ink-soft); }

/* Problèmes fréquents : question / réponse */
.faq dt { font-weight: 600; color: var(--ink); margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--ink-soft); }

/* Pastilles de statut, aux couleurs de l'app */
.st { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; }
.st.vfr { background: #16a34a; } .st.mvfr { background: #2563eb; }
.st.ifr { background: #dc2626; } .st.lifr { background: #9333ea; }
.st.go { background: #16a34a; } .st.warn { background: #d97706; } .st.no { background: #dc2626; }

/* Parcours visuel « Étape 1 → … → Premier résultat » */
.parcours { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.parcours span {
  padding: 7px 13px; border-radius: var(--r-full); font-size: 14px; font-weight: 600;
  background: var(--frost); border: 1px solid var(--line); color: var(--ink);
}
.parcours span.fin { background: var(--go); border-color: var(--go); color: #fff; }
.parcours i { font-style: normal; color: var(--ink-dim); }

/* ── Accueil du centre d'aide ── */
.objectifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.objectif {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r-2xl);
  background: var(--frost); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; transition: transform .15s, border-color .15s;
}
.objectif:hover { transform: translateY(-2px); border-color: rgba(0,54,255,.3); }
.objectif .ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--electric);
}
.objectif .ico svg { width: 20px; height: 20px; }
.objectif b { display: block; color: var(--ink); font-weight: 600; }
.objectif span { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 2px; line-height: 1.45; }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.cat { padding: 18px 20px; border-radius: var(--r-2xl); background: var(--frost); border: 1px solid var(--line); }
.cat h3 { margin: 0 0 8px; font-size: 15px; }
.cat ul { list-style: none; padding: 0; margin: 0; }
.cat li + li { margin-top: 4px; }
.cat a { text-decoration: none; font-size: 14.5px; }
.cat a:hover { text-decoration: underline; }

/* ── Précédent / suivant ── */
.suite { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.suite a {
  display: block; padding: 14px 18px; border-radius: var(--r-2xl);
  border: 1px solid var(--line); background: var(--frost); text-decoration: none;
}
.suite a:hover { border-color: rgba(0,54,255,.3); }
.suite small { display: block; font-size: 12px; color: var(--ink-mute); }
.suite b { color: var(--ink); font-weight: 600; }
.suite .apres { text-align: right; grid-column: 2; }

@media (max-width: 900px) {
  .aide-layout { grid-template-columns: 1fr; gap: 12px; }
  .aide-toc { position: static; max-height: none; display: none; }
  .aide-toc.ouvert { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--frost); }
  .toc-bouton {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
    padding: 8px 14px; border-radius: var(--r-full); border: 1px solid var(--line);
    background: var(--frost); font: 600 14px var(--font); color: var(--ink); cursor: pointer;
  }
  .objectifs, .cats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .aide-hero { padding: 32px 0 20px; }
  figure.cap.duo { grid-template-columns: 1fr; max-width: 300px; }
  .suite { grid-template-columns: 1fr; }
  .suite .apres { grid-column: 1; }
}

@media (prefers-color-scheme: dark) {
  .encart.conseil { border-color: rgba(90,169,255,.25); }
  .encart.conseil .ico, .plat svg, .objectif .ico { color: #5aa9ff; }
  .aide-toc a[aria-current] { color: #7cc0ff; }
  .etapes > li::before { background: #2563eb; }
  figure.cap img { border-color: rgba(255,255,255,.1); }
  .resultat { background: rgba(22,163,74,.10); }
}