/* Parcours guidé après l'inscription (CAHIER-PARCOURS-GUIDE.md) : fil des étapes, cartes de réponse, offre conseillée,
   écran du paiement, écran « Mise en route », page publique du lien des extensions. Thème clair, mobile d'abord (le
   restaurateur est sur son téléphone), lisible à 200 % : aucune largeur fixe, tout passe à la ligne. Une seule touche
   d'orange par écran : l'étape en cours et l'unique bouton principal. Aucun style en ligne (CSP). */

/* ---------- Écran sans menu latéral ---------- */
.shell--guided { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.topbar__help { font-weight: 600; font-size: .92rem; text-decoration: none; padding: 6px 4px; }
.topbar__help:hover, .topbar__help:focus-visible { text-decoration: underline; }

/* ---------- Fil des étapes ---------- */
.onb-steps { margin: 0 0 4px; }
.onb-steps__mobile { margin: 0; font-weight: 700; color: var(--ink); font-size: .95rem; }
/* Sur téléphone : la ligne « Étape 2 sur 4 » à l'écran, la liste gardée pour les lecteurs d'écran (aria-current). */
.onb-steps__list {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 640px) {
  .onb-steps__mobile { display: none; }
  .onb-steps__list {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0;
  }
}
.onb-steps__item { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: .95rem; }
.onb-steps__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75em; height: 1.75em; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: .85rem;
}
.onb-steps__item--done { color: var(--ink); }
.onb-steps__item--done .onb-steps__num { background: var(--sand); border-color: var(--sand-2); color: var(--ink); }
.onb-steps__item--current { color: var(--ink); font-weight: 700; }
.onb-steps__item--current .onb-steps__num { background: var(--ember); border-color: var(--ember); color: #fff; }

/* ---------- Écran 2 : la question et les trois réponses ---------- */
.onb-ribbon { margin: 0; color: var(--soft); font-size: .95rem; }
.onb-answers { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .onb-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.onb-answer {
  display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r-field);
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 400;
}
.onb-answer:hover { border-color: var(--ember-d); color: var(--ink); }
.onb-answer:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.onb-answer__title { font-weight: 700; font-size: 1.02rem; }
.onb-answer__sub { color: var(--soft); font-size: .92rem; }
.onb-answer[aria-current="true"] { border-color: var(--ember); border-width: 2px; background: var(--cream); }
.onb-unsure { margin: 0; font-size: .92rem; color: var(--soft); }

/* ---------- Offre conseillée, autres offres, offre gratuite ---------- */
.onb-advice { border: 2px solid var(--ember); }
.onb-advice__tag { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--sand); color: var(--ink); font-size: .8rem; font-weight: 700; }
.onb-advice__name { margin: 0; font-size: 1.25rem; }
.onb-advice__price { margin: 2px 0 10px; font-weight: 700; font-size: 1.1rem; }
.onb-advice__lines { margin: 10px 0; padding-left: 1.2em; }
.onb-advice__lines li + li { margin-top: 4px; }
.onb-advice .btn, .onb-pay .btn--primary { width: 100%; white-space: normal; }
@media (min-width: 640px) { .onb-advice .btn, .onb-pay .btn--primary { width: auto; } }
.onb-others { border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; padding: 0 16px; }
.onb-others > summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--ember-d); }
.onb-others > summary:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.onb-others__list { display: grid; gap: 12px; padding: 0 0 16px; }
.onb-other { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-field); }
.onb-other__name { margin: 0; font-weight: 700; }
.onb-other__price { margin: 0; font-weight: 600; }
.onb-free { padding: 16px 18px; border-radius: var(--r-field); background: var(--sand); }
.onb-free p { margin: 0 0 10px; }
.onb-accompany { margin: 0; font-size: .95rem; }

/* ---------- Écran 3 : résumé et coordonnées ---------- */
.onb-pay .deflist { margin-bottom: 8px; }
.onb-abroad > summary { cursor: pointer; font-size: .92rem; color: var(--ember-d); font-weight: 600; padding: 4px 0; }
.onb-abroad > summary:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.onb-pay__secure { font-size: .9rem; color: var(--soft); margin: 10px 0 0; }

/* ---------- Écran 4 : la suite ---------- */
.onb-next__steps { margin: 12px 0 16px; }
.onb-next__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.onb-next__actions .btn { white-space: normal; }
.onb-next__resend { margin: 14px 0 0; font-size: .92rem; color: var(--soft); }
.onb-next__resend form { display: inline; }
.onb-next__resend .btn { padding: 4px 10px; }

/* ---------- Page publique du lien des extensions ---------- */
.ext-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ext-list__item { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; }
.ext-list__name { margin: 0; font-weight: 700; }

/* ---------- Corrections de la relecture (0.39.51) ---------- */
/* Étape « Paiement » sans objet (offre gratuite) : ni cochée ni en cours. */
.onb-steps__item--skipped { color: var(--soft); }
.onb-steps__item--skipped .onb-steps__name { text-decoration: line-through; }
/* « Avec quoi votre site est-il fait ? » : le champ de l'adresse, juste sous les trois réponses. */
.onb-detect { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; }
.onb-detect__title { margin: 0; font-weight: 600; }
.onb-detect__form { display: grid; gap: 10px; }
.onb-detect .alert { margin: 0; }
/* Offre gratuite : un titre lu une fois, un bouton secondaire bien visible. */
.onb-free__title { margin: 0 0 6px; font-size: 1.05rem; }
/* Écran 4 : deux façons de faire (Pro), l'application pour plus tard (Basic). */
.onb-next__intro { margin: 12px 0 0; font-weight: 600; }
.onb-next__choices { padding-left: 1.2em; }
.onb-next__choices li + li { margin-top: 6px; }
.onb-next__app { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r-field); background: var(--sand); }
.onb-next__app p { margin: 0 0 10px; }
/* Page des extensions : ce qu'il faut, la liste numérotée dans l'ordre d'installation. */
.ext-need { margin: 0 0 6px; font-weight: 600; }
ol.ext-list { list-style: decimal; padding-left: 1.6em; }
ol.ext-list > .ext-list__item { display: list-item; }
.ext-list__item > div { display: inline-grid; gap: 2px; margin-right: 12px; }
.ext-list__item .btn { margin-top: 6px; }
.ext-list__role { margin: 0; color: var(--soft); font-size: .92rem; }