/* Clarté du parcours non technique : arrivée (étapes 1 à 7) et accueil. Chargée en dernier : elle ajuste sans changer
   l'identité (couleurs et tailles de tokens.css). */

/* Étape 2 et 5 : une aide sous le champ, une légende au-dessus des sujets */
.onb-legend { margin: 0; }

/* Étape 4 : les trois points à confirmer, numérotés en gros chiffres verts */
.onb-points { counter-reset: onb-point; }
.onb-point { position: relative; padding-left: 44px; counter-increment: onb-point; }
.onb-point::before {
  content: counter(onb-point); position: absolute; left: 0; top: -2px; width: 30px; text-align: center;
  font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums;
}

/* Étape 5 : la raison de chaque sujet tient en deux lignes ; les idées suivantes et les sujets déjà validés sont repliés */
.choices-group { display: grid; gap: 8px; min-width: 0; }
.choices-group > .xfold .xfold-body { padding-top: 4px; }
.onb-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.choice-main { min-width: 0; }
.onb-validated { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Étape 7 : la mise en ligne en trois gestes */
.onb-publish { display: grid; gap: 4px; }
.onb-publish-subject { margin: 0 0 4px; color: var(--text); overflow-wrap: anywhere; }
.onb-publish .xstep-action > * { flex: 1 1 100%; min-width: 0; }
.onb-publish .xstep-action > .btn { flex: 0 0 auto; }
.onb-publish .connect-panel { gap: 16px; }
.onb-publish-now { gap: 10px; }
.onb-skip { display: grid; justify-items: start; gap: 2px; }
.onb-skip .btn { margin-left: -14px; }
.onb-skip p { margin: 0; }
.onb-rhythm .xfold-body { gap: 16px; }
.onb-rhythm .xfold-body > p { margin: 0; }

/* Accueil : un petit sur-titre, un seul grand titre (l'action) */
.next-kicker { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.next-action h2.next-title { margin: 8px 0 4px; font-size: 22px; line-height: 1.25; }
.setup-compact.is-last { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.setup-last { margin: 0; display: grid; gap: 2px; font-size: var(--fs-small); flex: 1 1 320px; min-width: 0; }
.setup-compact.is-last > p.small { flex: 1 1 100%; margin: 0; }

/* Préparation en version courte : l'état reste sur la ligne de son étiquette, même sur téléphone */
@media (max-width: 640px) {
  .prep.is-compact .prep-item:not(.is-failed) { flex-wrap: nowrap; }
  .prep.is-compact .prep-item .setup-main { flex: 1 1 auto; min-width: 0; }
  .prep.is-compact .prep-state { text-align: right; }
}
.onb-publish .xsteps { margin: 0; padding: 0; }

/* Étape 4 : l'exemple de ton coupé à trois lignes, « Lire la suite » dessous */
.onb-sample { display: grid; gap: 6px; }
.onb-sample > .text-btn { justify-self: start; }
.onb-sample.is-clamped .tone-sample p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Au téléphone, le formulaire de connexion reprend toute la largeur de la carte, sous le numéro du point */
@media (max-width: 640px) {
  .onb-publish .xstep-action > .connect-panel { margin-left: -40px; }
}
.onb-rhythm .xflow-steps { margin: 0; padding: 0; }

/* Un libellé long passe à la ligne au lieu d'élargir la carte (étape 6 au téléphone, étape 7 sans droit de publier) */
.card.form > * { min-width: 0; }
.form .btn-lg, .onb-publish .btn { white-space: normal; text-align: center; max-width: 100%; }
.form .btn-lg, .onb-publish .btn-lg { padding-top: 10px; padding-bottom: 10px; line-height: 1.3; }
.form .btn-lg svg, .onb-publish .btn svg { flex-shrink: 0; }

/* Étape 7, point 3 : l'envoi refusé dit quoi faire, avec un seul bouton pour y aller */
.onb-publish-block { display: grid; gap: 10px; justify-items: start; }
.onb-publish-block p { margin: 0; }

/* Étape 7, point 2 : les sous-étapes de la connexion sont repérées par des lettres, plus discrètes que les numéros des points */
.onb-publish .howto-n { background: transparent; border: 1px solid var(--control); color: var(--text); font-weight: 600; }