/* Page « Mode AutoSEO », tableau de bord vivant. Cartes à plat (pas d'ombre au repos) ; la couleur dit l'état : vert pour ce qui
   tourne ou est prêt, ambre pour une pause ou un blocage, rouge pour un seuil trop souple, gris pour l'arrêt. Le mouvement est court
   (transform et opacité), sauf le point de la boucle qui tourne doucement tant que le mode est actif ; tout s'arrête si l'appareil
   demande moins d'animations. */
.auto-card, .auto-pilot, .auto-rhythm, .auto-guards, .auto-timeline { display: grid; gap: 16px; }
.auto-card > .card-head, .auto-pilot > .card-head, .auto-rhythm > .card-head, .auto-guards > .card-head, .auto-timeline > .card-head { margin-bottom: 0; }
.auto-card p, .auto-card h3 { margin: 0; }
.auto-intro { margin: 0; max-width: 760px; color: var(--body); }
.auto-list-title { font-size: 15px; font-weight: 600; margin-top: 6px; }

/* ---------------------------------------------------------------- l'état et sa boucle */
.auto-state { display: grid; gap: 26px; padding: 24px 24px 22px; transition: background-color var(--medium), border-color var(--medium); }
.auto-state.is-on { background: var(--accent-soft); border-color: var(--accent-track); }
.auto-state.is-paused { background: var(--pill-warning-bg); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.auto-state.is-off { background: var(--raised); border-color: var(--border); }
.auto-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.auto-state-text { flex: 1 1 420px; min-width: 0; display: grid; gap: 6px; }
.auto-state-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.auto-state-mark { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); transform: translateY(-1px); }
.is-on .auto-state-mark { background: var(--accent); animation: pulse 1.8s infinite; }
.is-paused .auto-state-mark { background: var(--warning); }
.auto-state-note { margin: 0; padding-left: 20px; max-width: 760px; color: var(--body); font-size: 14.5px; line-height: 1.5; }
.is-paused .auto-state-note { color: var(--pill-warning-ink); }
.auto-state-action { flex: none; }

.loop { --dot: 48px; position: relative; }
.loop.has-lane { padding-top: 52px; }
.loop-stages { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.loop-stage { display: flex; justify-content: center; min-width: 0; }
.loop-node { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; color: inherit; font: inherit; }
button.loop-node { margin: -6px; padding: 6px; border: 0; border-radius: var(--radius-card); background: none; cursor: pointer; }
button.loop-node:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }
.loop-dot { position: relative; width: var(--dot); height: var(--dot); margin-bottom: 4px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--accent-track); background: var(--surface); transition: border-color var(--medium), background-color var(--medium); }
.loop-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.loop-count { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-ink); transition: color var(--medium); }
.loop-icon { position: absolute; top: -5px; right: -7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-track); transition: color var(--medium), background-color var(--medium), box-shadow var(--medium); } /* taste-skill-ignore : anneau de la pastille, pas une ombre */
.loop-icon svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.loop-label { font-size: 14px; font-weight: 600; line-height: 1.25; }
.loop-caption { font-size: var(--fs-meta); line-height: 1.3; color: var(--muted); }

/* L'étape où se trouve une fiche s'allume : fond teinté, anneau qui pulse, icône qui bouge un instant. */
.loop-stage.is-active .loop-dot { border-color: var(--accent); background: var(--accent-soft); }
.loop-stage.is-active .loop-dot::after { animation: loop-ring 1.2s var(--ease-out) infinite; }
.loop-stage.is-active .loop-icon { color: var(--accent-on); background: var(--accent); box-shadow: 0 0 0 2px var(--surface); animation: loop-nudge 520ms var(--ease-back); } /* taste-skill-ignore */
.loop.is-held .loop-stage.is-active .loop-dot::after { animation-play-state: paused; }

/* Les liaisons : une piste pâle, et deux remplissages (un par fiche) qui suivent la fiche. */
.loop-links { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.loop-link { position: absolute; overflow: hidden; border-radius: 2px; background: var(--accent-track); }
.loop-fill { position: absolute; inset: 0; background: var(--accent); opacity: 0; transform: scaleX(0); transform-origin: left top; }

/* La fiche d'article qui voyage. */
.loop-fiche { position: absolute; z-index: 2; left: 0; top: 0; width: 28px; height: 36px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.loop-fiche svg { display: block; overflow: visible; }
.lf-paper { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.lf-title { fill: var(--faint); }
.lf-line { fill: var(--control); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.lf-check { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lf-pen { fill: none; stroke: var(--accent-ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.lf-live { position: absolute; left: 50%; bottom: -9px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: var(--accent-on);
  font-size: 11px; font-weight: 600; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translateX(-50%) scale(0.6); }

/* Mode en pause ou arrêté : tout est figé et grisé ; une étape bloquée garde son ambre. */
.loop-paused .loop-dot, .loop-off .loop-dot { border-color: var(--control); }
.loop-paused .loop-count, .loop-off .loop-count, .loop-paused .loop-icon, .loop-off .loop-icon { color: var(--muted); }
.loop-paused .loop-icon, .loop-off .loop-icon { box-shadow: 0 0 0 2px var(--control); } /* taste-skill-ignore */
.loop-paused .loop-link, .loop-off .loop-link { background: var(--control); }
.loop-off .loop-label { color: var(--muted); }
.loop-paused .lf-paper { stroke: var(--warning); }
.loop-paused .lf-check { stroke: var(--muted); }
.loop-stage.is-alert .loop-dot { border-color: var(--warning); background: var(--pill-warning-bg); }
.loop-stage.is-alert .loop-count, .loop-stage.is-alert .loop-icon { color: var(--pill-warning-ink); }
.loop-stage.is-alert .loop-icon { box-shadow: 0 0 0 2px var(--warning); } /* taste-skill-ignore */
.loop-stage.is-alert .loop-caption { color: var(--pill-warning-ink); font-weight: 600; }
.loop-paused .loop-stage.is-alert ~ .loop-stage .loop-dot { opacity: 0.7; }
button.loop-node:hover .loop-dot { border-color: var(--warning); }
@keyframes loop-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes loop-nudge { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.25) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } }

/* ---------------------------------------------------------------- comment piloter */
.pilot-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pilot-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 20px 20px; border-radius: var(--radius-card); border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; transition: border-color var(--medium), background-color var(--medium), transform var(--fast) var(--ease-out); }
.pilot-card:hover:not(.is-disabled) { border-color: var(--control-hover); }
.pilot-card:active:not(.is-disabled) { transform: scale(0.99); }
.pilot-card.is-on, .pilot-card.is-on:hover { border-color: var(--accent); background: var(--accent-soft); }
.pilot-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pilot-card.is-disabled { cursor: not-allowed; opacity: 0.6; }
.pilot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pilot-check { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-on);
  opacity: 0; transform: scale(0.5); transition: opacity var(--medium), transform var(--medium) var(--ease-back); }
.pilot-card.is-on .pilot-check { opacity: 1; transform: none; }
.pilot-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pilot-text { color: var(--body); font-size: 14.5px; line-height: 1.5; }
.pilot-warning { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-control); background: var(--pill-warning-bg); color: var(--pill-warning-ink); animation: enter var(--medium) var(--ease-out); }
.pilot-warning ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pilot-confirm { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 6px; color: var(--text); font-weight: 500; cursor: pointer; }
.pilot-confirm input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }

/* ---------------------------------------------------------------- petits réglages partagés */
.stepper { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); transition: border-color var(--fast); } /* taste-skill-ignore : bord du champ, comme .input */
.stepper:focus-within { border-color: var(--accent); }
.stepper-btn { width: 40px; height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); cursor: pointer; border-radius: var(--radius-control); transition: background-color var(--fast); }
.stepper-btn:hover:not(:disabled) { background: var(--raised); }
.stepper-btn svg { transition: transform var(--fast) var(--ease-out); }
.stepper-btn:active:not(:disabled) svg { transform: scale(0.8); }
.stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-value { width: 56px; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; color: var(--text); font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper-value::-webkit-inner-spin-button, .stepper-value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-value:focus { outline: none; }
.auto-seg button { min-height: 34px; font-weight: 500; }
.auto-seg button.is-on { color: var(--text); }

/* ---------------------------------------------------------------- votre rythme */
.rhythm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.rhythm-controls { display: grid; gap: 22px; min-width: 0; }
.rhythm-count { display: grid; gap: 8px; }
.rhythm-count-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rhythm-days { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.rhythm-days legend { padding: 0; margin-bottom: 8px; }
.rhythm-days .small { margin: 0; }
.day-pills { display: grid; grid-template-columns: repeat(7, 44px); gap: 4px; }
.day-pill { position: relative; isolation: isolate; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--body); transition: color var(--fast); }
.day-pill::before { content: ''; position: absolute; z-index: -1; inset: 3px; border-radius: 50%; border: 1.5px solid var(--control); background: var(--surface);
  transition: background-color var(--fast), border-color var(--fast), transform var(--medium) var(--ease-back); }
.day-pill:hover:not(:disabled)::before { border-color: var(--control-hover); }
.day-pill:active:not(:disabled)::before { transform: scale(0.82); transition-duration: 80ms; }
.day-pill.is-on { color: var(--accent-on); }
.day-pill.is-on::before { background: var(--accent); border-color: var(--accent); }
.day-pill:focus-visible { outline: none; }
.day-pill:focus-visible::before { box-shadow: 0 0 0 3px var(--accent-track); } /* taste-skill-ignore : anneau de focus */
.day-pill:disabled { cursor: not-allowed; color: var(--faint); }
.day-pill:disabled::before { border-style: dashed; }
.rhythm-time { max-width: 260px; }
.rhythm-time .input { font-variant-numeric: tabular-nums; }

.mini-cal { margin: 0; padding: 18px; display: grid; gap: 12px; border-radius: var(--radius-card); background: var(--raised); min-width: 0; }
.mini-cal-cap { display: grid; gap: 2px; }
.mini-cal-cap strong { font-size: 15px; }
.mini-cal-cap span { font-size: var(--fs-small); color: var(--muted); }
.mini-cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.mini-cal-table th { padding: 0 0 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.mini-cal-table td { height: 40px; padding: 0; vertical-align: middle; }
.mc-day { position: relative; display: grid; place-items: center; width: 34px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; font-size: 13.5px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--body); transition: background-color var(--medium), color var(--medium); }
.mc-day.is-past { color: var(--faint); opacity: 0.7; }
.mc-day.is-today { font-weight: 700; color: var(--text); }
.mc-day.is-today::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.mc-day.is-pub { background: var(--accent); color: var(--accent-on); font-weight: 600; }
.mc-day.is-pub.is-today::after { background: var(--accent-on); }
.mc-day.is-new { animation: cal-pop 340ms var(--ease-back); }
.mini-cal-next { margin: 0; font-size: 14px; color: var(--body); }
@keyframes cal-pop { from { opacity: 0; transform: scale(0.4); } }

/* ---------------------------------------------------------------- vos garde-fous */
.guards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.guard { display: grid; gap: 10px; align-content: start; min-width: 0; }
.guard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; }
.guard-head .field-label { line-height: 1.35; }
.guard-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guard-unit { font-size: 14px; font-weight: 500; color: var(--muted); }
.tone-low { --tone: var(--negative); }
.tone-mid { --tone: var(--warning); }
.tone-high { --tone: var(--accent); }
.guard-range { position: relative; height: 32px; }
.guard-zones { position: absolute; left: 11px; right: 11px; top: 50%; height: 6px; margin-top: -3px; display: flex; gap: 3px; }
.guard-zone { height: 100%; flex-basis: 0; border-radius: 3px; opacity: 0.3; transition: opacity var(--medium); }
.guard-zone.is-current { opacity: 1; }
.zone-low { background: var(--negative); }
.zone-mid { background: var(--warning); }
.zone-high { background: var(--accent); }
.guard-range input[type='range'] { position: relative; display: block; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.guard-range input[type='range']:disabled { cursor: not-allowed; opacity: 0.6; }
.guard-range input[type='range']:focus { outline: none; }
.guard-range input[type='range']::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.guard-range input[type='range']::-moz-range-track { height: 100%; background: transparent; }
.guard-range input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: 5px; border-radius: 50%;
  border: 3px solid var(--tone); background: var(--surface); transition: transform var(--fast) var(--ease-out), border-color var(--medium); }
.guard-range input[type='range']::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--tone); background: var(--surface); }
.guard-range input[type='range']:active::-webkit-slider-thumb { transform: scale(1.15); }
.guard-range input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-track); } /* taste-skill-ignore : anneau de focus */
.guard-text { margin: 0; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--body); }
.guard-text .roll { display: block; }
.credit-gauge { position: relative; height: 10px; overflow: hidden; border-radius: 5px; background: var(--raised); }
.gauge-used, .gauge-reserved { position: absolute; inset: 0; transform-origin: left; transition: transform var(--slow) var(--ease-out); }
.gauge-used { background: var(--accent); transform: scaleX(var(--used)); }
.gauge-reserved { background: var(--accent-track); transform: translateX(calc(var(--used) * 100%)) scaleX(var(--reserved)); }
.guard-credits.is-full .gauge-used { background: var(--warning); }
.guard-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--body); }
.guard-legend span { display: inline-flex; align-items: center; gap: 6px; }
.guard-legend i { width: 10px; height: 10px; border-radius: 3px; }
.key-used { background: var(--accent); }
.key-reserved { background: var(--accent-track); }
.guard-credits .small.muted { margin: 0; }

/* ---------------------------------------------------------------- la barre d'enregistrement */
.savebar { position: sticky; z-index: 25; bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
  padding: 12px 14px 12px 20px; border-radius: var(--radius-card); background: var(--primary); color: var(--primary-on); box-shadow: var(--float-shadow); /* taste-skill-ignore : barre flottante */
  animation: savebar-in var(--medium) var(--ease-out); }
.savebar-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; font-size: 14.5px; }
.savebar-text span { opacity: 0.85; }
.savebar-error { color: var(--pill-warning-bg); opacity: 1 !important; font-weight: 500; }
.savebar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.savebar .btn-quiet, .savebar .btn-quiet:hover:not(:disabled) { color: var(--primary-on); background: transparent; }
.savebar .btn-quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-on) 12%, transparent); }
.savebar .btn-primary, .savebar .btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.savebar .btn-primary:disabled { opacity: 0.5; }
@keyframes savebar-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------------------------------------------------------------- ce qui arrive */
.auto-timeline:focus { outline: none; }
.frise { list-style: none; margin: 0; padding: 0; display: grid; }
.frise-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 12px 0; }
.frise-item::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.frise-item:first-child::before { top: 22px; }
.frise-item:last-child::before { bottom: calc(100% - 22px); }
.frise-item:only-child::before { display: none; }
.frise-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 3px 0 0 3px; border-radius: 50%; border: 2.5px solid var(--control); background: var(--surface); }
.kind-scheduled .frise-dot, .kind-unreviewed .frise-dot { border-color: var(--accent); background: var(--accent); }
.kind-review .frise-dot { border-color: var(--accent); }
.kind-blocked .frise-dot { border-color: var(--warning); background: var(--warning); }
.kind-failed .frise-dot { border-color: var(--negative); background: var(--negative); }
.kind-writing .frise-dot { border-color: var(--text); animation: pulse 1.8s infinite; }
.frise-body { display: grid; gap: 2px; min-width: 0; }
.frise-date { font-size: var(--fs-meta); color: var(--muted); }
.frise-title { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.frise-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.frise-reason { font-size: 14px; color: var(--body); }
.kind-blocked .frise-reason { color: var(--pill-warning-ink); }
.kind-failed .frise-reason { color: var(--negative); }
.frise-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; }

/* ---------------------------------------------------------------- prérequis */
.auto-ready { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-card); background: var(--accent-soft); }
.auto-ready-text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.auto-needs-card:focus { outline: none; }
.auto-needs .row { gap: 12px; }
.need-mark { flex: none; box-sizing: border-box; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--control); border-radius: 50%; }
.need-mark.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.auto-needs .is-todo .need-mark { border-color: var(--warning); }

/* ---------------------------------------------------------------- en savoir plus */
.auto-faq { display: grid; gap: 10px; }
.auto-faq > .card-title { margin: 8px 0 2px; }
.flow-kept { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flow-kept li { display: flex; align-items: flex-start; gap: 10px; }
.flow-kept svg { flex: none; margin-top: 2px; color: var(--accent); }
.auto-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auto-ways li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-control); background: var(--raised); }
.auto-cohabit { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------------------------------------------------------------- formulaire du mode (fenêtre des réglages, ailleurs dans l'application) */
.auto-autonomy label { align-items: flex-start; }
.auto-autonomy input[type='radio'] { margin-top: 3px; flex: none; }
.auto-warning { display: grid; gap: 8px; color: var(--body); }
.auto-warning ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

@media (max-width: 900px) {
  .rhythm-grid, .guards-grid { grid-template-columns: minmax(0, 1fr); }
  .guards-grid { gap: 24px; }
}
@media (max-width: 1024px) {
  .savebar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .stepper { height: 46px; }
  .stepper-btn { width: 44px; }
  .auto-seg button { min-height: 44px; }
  .rhythm-time .input { min-height: 44px; }
  .guard-range { height: 44px; }
  .guard-range input[type='range']::-webkit-slider-thumb { margin-top: 11px; }
  .auto-timeline .btn-sm, .auto-needs .btn-sm { min-height: 44px; }
}
@media (max-width: 640px) {
  .auto-state { padding: 18px 16px; gap: 22px; }
  .auto-state-title { font-size: 18px; }
  .auto-state-note { padding-left: 0; }
  .auto-state-action, .auto-state-action .btn { width: 100%; }
  /* Sur téléphone, la boucle se lit de haut en bas : un rond, l'étape, son chiffre ; la fiche descend sur la droite. */
  .loop, .loop.has-lane { --dot: 40px; padding-top: 0; }
  .loop-stages { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-right: 48px; }
  .loop-stage { justify-content: flex-start; }
  .loop-node { grid-template-columns: var(--dot) minmax(0, auto) minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 12px; text-align: left; }
  button.loop-node { margin: -4px; padding: 4px; }
  .loop-dot { margin: 0; }
  .loop-count { font-size: 16px; }
  .loop-label { font-size: 15px; }
  .loop-caption { font-size: 13.5px; }
  .loop-fill { transform: scaleY(0); }
  .pilot-cards, .auto-ways { grid-template-columns: minmax(0, 1fr); }
  .auto-rhythm { padding: var(--pad) 14px; }
  .day-pills { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
  .day-pill { width: 100%; min-width: 44px; }
  .mini-cal { padding: 14px 12px; }
  .frise-item { grid-template-columns: 20px minmax(0, 1fr); }
  .frise-side { grid-column: 2; justify-content: flex-start; }
  .savebar { padding: 12px; }
  .savebar-actions { width: 100%; }
  .savebar-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loop.has-lane { padding-top: 0; }
  .loop-fiche, .loop-fill, .loop-dot::after { display: none; }
}

/* Les sections atteintes par un clic (étape bloquée, étape à faire) ne passent pas sous la barre du haut sur téléphone. */
#ce-qui-arrive, #prerequis, #piloter { scroll-margin-top: 80px; }