/* Clarté du parcours non technique : mode. Chargée après automode.css et explain.css. */

/* Le haut de page : la carte d'état, les étapes ou « Tout est prêt », puis le parcours. Sur ordinateur, le parcours remonte en tête
   (tant que le mode n'est pas lancé) ; sur téléphone, il reste après le bouton, pour que « Lancer AutoSEO » se voie à l'arrivée. */
.auto-start { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (min-width: 641px) { .auto-start .auto-flow { order: -1; } }
.auto-flow { display: grid; gap: 0; }
.auto-flow .xflow-steps { margin: 0; padding: 0; }

/* La carte d'état : sans boucle tant que le mode n'est pas lancé ; une action principale et, à côté, une secondaire. */
.auto-state.no-loop { gap: 14px; }
.auto-state-action { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.auto-state-foot { margin-top: -10px; padding-left: 20px; }
.auto-state.no-loop .auto-state-foot { margin-top: -4px; }
.auto-state-foot .text-btn, .auto-fix { min-height: 32px; padding: 0; font-size: 14px; }
.auto-fix { text-align: left; color: var(--pill-warning-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auto-state.is-off .auto-fix { color: var(--pill-warning-ink); }

/* Les étapes avant le lancement. */
.auto-needs-card .xsteps { margin: 0; padding: 0; }

/* Réglages repliés tant qu'une étape manque : les cartes gardent leur taille de texte habituelle. */
.auto-later > .xfold-body { gap: var(--gap); font-size: var(--fs-body); color: var(--text); padding-top: 4px; }
.auto-later > .xfold-body > .card { box-shadow: none; }

/* Le rythme : une ligne, puis les réglages sur « Changer ». */
.auto-rhythm .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rhythm-toggle { min-height: 36px; padding: 0 4px; font-size: 14px; }
.rhythm-line { margin: 0; color: var(--text); line-height: 1.5; }
.rhythm-line strong { font-weight: 600; }

/* Vos sécurités, repliées sous une ligne de résumé. */
.xfold.auto-guards { display: block; }
.auto-guards > .xfold-body { gap: 16px; font-size: var(--fs-body); color: var(--text); }
.guards-hint.is-warn { color: var(--pill-warning-ink); font-weight: 600; }
.xfold.auto-guards.is-warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }

/* L'avertissement du pilote automatique : une phrase, la case, puis le détail replié. */
.pilot-warning p { margin: 0; }
.pilot-more { background: transparent; border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.pilot-more > summary { padding: 10px 12px; }
.pilot-more > summary:hover { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.pilot-more .xfold-summary { font-size: 14px; color: var(--pill-warning-ink); }
.pilot-more .xfold-body { padding: 0 12px 12px; color: var(--pill-warning-ink); }
.pilot-more ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pilot-confirm { scroll-margin: 120px 0; }

/* La barre d'enregistrement : texte court sur téléphone, et un lien vers ce qui bloque. */
.savebar-short { display: none; }
.savebar-fix { padding: 0; min-height: 28px; color: var(--pill-warning-bg); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; }

/* En savoir plus. */
.auto-faq .xfold-body > p, .auto-faq .xfold-body h3 { margin: 0; }
.auto-faq .xsteps { margin: 0; padding: 0; }

@media (max-width: 640px) {
  /* Le parcours, en colonne serrée : le numéro à gauche, l'étape et sa précision à côté. */
  .auto-flow .xflow-steps { gap: 18px; }
  .auto-flow .xflow-step { grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; padding: 8px 12px; }
  .auto-flow .xflow-num { grid-row: span 2; padding-top: 1px; }
  .auto-flow .xflow-arrow { bottom: -19px; left: 14px; }
  .auto-state-action { display: grid; width: 100%; justify-content: stretch; }
  .auto-state-foot { padding-left: 0; }
  .savebar { flex-wrap: wrap; gap: 8px 12px; }
  .savebar-text { flex: 1 1 auto; }
  .savebar-long, .savebar-context { display: none; }
  .savebar-short { display: inline; }
  .savebar-actions { width: auto; flex-wrap: nowrap; }
  .savebar-actions .btn { flex: none; }
}