/* Athern Canvas · interface /v2 : écrans « À venir » (v2-roadmap.js).
   Tout est préfixé rm- et limité à .rm-root pour ne pas toucher au reste de l'interface.
   « Atelier calme » : en-tête at-page, sections à plat séparées par un filet,
   aperçu dessiné dans un cadre à filet, aucune pastille ni carte. */

.rm-root {
  --rm-navy: var(--ink);
  --rm-blue: var(--blue);
  --rm-blue-strong: var(--blue-strong);
  --rm-violet: var(--ink-2);
  --rm-green: var(--green);
  --rm-amber: var(--amber);
  --rm-ink: var(--ink);
  --rm-muted: var(--muted);
  --rm-line: var(--line);
  --rm-line-strong: var(--line-strong);
  --rm-canvas: var(--canvas);
  --rm-surface: var(--surface);
  --rm-surface-blue: var(--surface-2);
  --rm-surface-violet: var(--surface-2);
  --rm-surface-green: var(--surface-green);
  --rm-sketch-line: var(--line-strong);
  --rm-sketch-fill: var(--surface-3);
  --rm-radius: var(--radius-sm);
  --rm-radius-lg: var(--radius);

  box-sizing: border-box;
  min-width: 0;
  padding-bottom: var(--space-9);
  color: var(--rm-ink);
  line-height: 1.5;
}
.rm-root *, .rm-root *::before, .rm-root *::after { box-sizing: border-box; }
.rm-root h1, .rm-root h2, .rm-root h3, .rm-root p, .rm-root ul, .rm-root figure { margin: 0; }
.rm-root button { font: inherit; }
.rm-root :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rm-root .rm-title:focus { outline: none; }

.rm-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-icon-sm { width: 15px; height: 15px; }

/* ---------- En-tête : titre, intention, disponibilité en texte ---------- */
.rm-root .rm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; color: var(--muted); font-size: var(--text-sm); }

/* ---------- Mise en page : travail à gauche, aperçu collant à droite ---------- */
.rm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.rm-layout > .at-section ~ .at-section { padding-top: var(--space-6); border-top: 1px solid var(--line); }
@media (min-width: 1100px) {
  .rm-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    grid-template-areas: "benefits preview" "wait preview" "interest preview";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-9);
    align-items: start;
  }
  .rm-benefits { grid-area: benefits; }
  .rm-preview { grid-area: preview; position: sticky; top: var(--space-6); }
  .rm-wait { grid-area: wait; }
  .rm-interest { grid-area: interest; }
}

/* ---------- Ce que vous pourrez faire : liste simple ---------- */
.rm-list { display: grid; gap: 6px; max-width: 65ch; padding-left: 18px; color: var(--ink-2); font-size: var(--text-md); }
.rm-list li::marker { color: var(--subtle); }

/* ---------- En attendant : lignes de liste ---------- */
.rm-alt { padding: 0; border: 0; color: inherit; background: none; text-align: left; cursor: pointer; }
.rm-alt:disabled { cursor: not-allowed; }
.rm-alt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.rm-alt-row .at-row-main { position: static; }
.rm-alt-title { color: var(--blue-strong); }
.rm-alt-row:hover .rm-alt-title { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rm-alt-arrow { width: 16px; height: 16px; color: var(--muted); }
.rm-alt-row .at-row-actions { pointer-events: none; }

/* ---------- Aperçu : planche dans un cadre à filet ---------- */
.rm-preview { display: grid; gap: var(--space-2); min-width: 0; }
.rm-preview > .rm-sketch { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.rm-preview-cap { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.rm-preview-cap strong { color: var(--ink-2); font-weight: 500; }

/* Planche d’esquisse : fond uni, traits pointillés, on voit que c’est un dessin. */
.rm-sketch {
  position: relative;
  padding: 22px;
  background-color: var(--surface-2);
  user-select: none;
  pointer-events: none;
  font-size: 13px;
  color: var(--ink-2);
}

.rm-sk-window {
  border: 1.5px dashed var(--rm-sketch-line);
  border-radius: var(--rm-radius);
  background: var(--surface);
  overflow: hidden;
}
.rm-sk-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1.5px dashed var(--rm-sketch-line);
  background: var(--surface-2);
}
.rm-sk-chrome > i { width: 8px; height: 8px; border-radius: 50%; background: var(--rm-sketch-fill); }
.rm-sk-chrome > span { margin-left: 8px; font-weight: 700; color: var(--rm-ink); font-size: 13px; }
.rm-sk-body { padding: 12px; display: grid; gap: 10px; }

.rm-sk-bar { display: block; height: 8px; border-radius: 4px; background: var(--rm-sketch-fill); }
.rm-sk-bar.rm-sk-dark { background: var(--line-strong); height: 9px; }
.rm-sk-bar.rm-sk-blue { background: var(--blue-soft); }
.rm-w20 { width: 20%; } .rm-w25 { width: 25%; } .rm-w30 { width: 30%; } .rm-w35 { width: 35%; }
.rm-w40 { width: 40%; } .rm-w45 { width: 45%; } .rm-w50 { width: 50%; } .rm-w55 { width: 55%; }
.rm-w60 { width: 60%; } .rm-w65 { width: 65%; } .rm-w70 { width: 70%; } .rm-w75 { width: 75%; }
.rm-w80 { width: 80%; } .rm-w85 { width: 85%; } .rm-w90 { width: 90%; }
.rm-sk-stack { display: grid; gap: 6px; flex: 1; min-width: 0; }
.rm-sk-stack > b { font-weight: 650; color: var(--rm-ink); font-size: 13px; }
.rm-sk-stack > span { color: var(--rm-muted); font-size: 12.5px; }
.rm-sk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--rm-sketch-fill); }
.rm-sk-dot.rm-sk-blue { background: var(--rm-blue); }
.rm-sk-tag {
  flex: none;
  padding: 2px 8px;
  border: 1px dashed var(--rm-sketch-line);
  border-radius: var(--radius-pill);
  color: var(--rm-muted);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
}
.rm-sk-tag-blue { border-color: color-mix(in srgb, var(--blue) 40%, var(--surface)); color: var(--rm-blue-strong); background: var(--rm-surface-blue); }
.rm-sk-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--rm-line); }
.rm-sk-row:last-child { border-bottom: 0; }
.rm-sk-note { color: var(--rm-muted); font-size: 12.5px; font-style: italic; }
.rm-sk-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--rm-sketch-fill); border: 1.5px dashed var(--rm-sketch-line); }

/* Colonnes */
.rm-sk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rm-sk-col { display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.rm-sk-col > b { font-size: 12px; color: var(--rm-ink); font-weight: 650; }
.rm-sk-card { display: grid; gap: 6px; padding: 8px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); background: var(--surface); }

/* Agenda */
.rm-sk-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rm-sk-day { display: grid; gap: 5px; }
.rm-sk-day > b { font-size: 12px; text-align: center; color: var(--rm-ink); font-weight: 650; }
.rm-sk-slot { height: 22px; border-radius: 5px; border: 1px dashed var(--rm-line-strong); background: var(--surface); }
.rm-sk-slot-on { background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--surface)); }
.rm-sk-slot-on-v { background: var(--surface-3); border: 1px solid var(--line-strong); }

/* Google */
.rm-sk-search { padding: 8px 12px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-pill); }
.rm-sk-serp { display: grid; gap: 4px; }
.rm-sk-url { color: #3c5a3c; font-size: 12.5px; }
.rm-sk-serp-title { color: #1a3fa0; font-size: 16px; font-weight: 500; }
.rm-sk-serp-desc { color: #4b5566; font-size: 13px; }
.rm-sk-faded { opacity: 0.6; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--rm-line); }

/* Formulaire */
.rm-sk-field { display: grid; gap: 4px; }
.rm-sk-field > span { font-size: 12.5px; font-weight: 600; color: var(--rm-ink); }
.rm-sk-input {
  display: flex; align-items: center; min-height: 34px; padding: 6px 10px;
  border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--rm-muted); font-size: 13px;
}
.rm-sk-input .rm-sk-bar { width: 50%; }
.rm-sk-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.rm-sk-toggle { position: relative; width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--rm-sketch-fill); flex: none; }
.rm-sk-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); }
.rm-sk-toggle-on { background: color-mix(in srgb, var(--blue) 40%, var(--surface)); }
.rm-sk-toggle-on::after { left: 17px; }

/* Enchaînement */
.rm-sk-flow { display: grid; justify-items: center; gap: 0; padding: 4px 0; }
.rm-sk-node {
  display: grid; gap: 2px; width: min(100%, 260px); padding: 10px 12px;
  border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); background: var(--surface); text-align: center;
}
.rm-sk-node > b { font-size: 12px; color: var(--rm-violet); font-weight: 700; }
.rm-sk-node > span { font-size: 13px; color: var(--rm-ink); }
.rm-sk-node-start { border-style: solid; border-color: var(--blue-soft); background: var(--surface-blue); }
.rm-sk-link { width: 0; height: 18px; border-left: 2px dashed var(--rm-sketch-line); }

/* Conversation */
.rm-sk-chat { display: grid; gap: 8px; }
.rm-sk-bubble { max-width: 85%; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.4; }
.rm-sk-bubble-in { justify-self: end; background: var(--rm-surface-blue); color: var(--rm-ink); border-bottom-right-radius: 4px; }
.rm-sk-bubble-out { justify-self: start; background: var(--surface); color: var(--rm-ink); border: 1px dashed var(--rm-sketch-line); border-bottom-left-radius: 4px; }
.rm-sk-composer { padding: 10px 12px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-pill); }

/* Site + bandeau */
.rm-sk-hero { display: grid; gap: 7px; padding: 14px 4px; }
.rm-sk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rm-sk-tile { display: block; height: 52px; border-radius: var(--radius-sm); background: var(--rm-sketch-fill); }
.rm-sk-banner { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--rm-navy); background: var(--surface); }
.rm-sk-banner > b { font-size: 13px; color: var(--rm-navy); }
.rm-sk-banner > span { font-size: 12.5px; color: var(--rm-muted); }
.rm-sk-banner-top { background: var(--surface-amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.rm-sk-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.rm-sk-btns em { font-style: normal; padding: 4px 10px; border-radius: var(--radius-xs); border: 1px solid var(--rm-line-strong); font-size: 12px; color: var(--rm-ink); }
.rm-sk-btns em.rm-sk-em-primary { background: var(--rm-navy); color: #fff; border-color: var(--rm-navy); }

/* Grille de cartes */
.rm-sk-grid, .rm-sk-fan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rm-sk-gcard { display: grid; gap: 6px; padding: 10px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); background: var(--surface); }
.rm-sk-gcard > b { font-size: 13px; color: var(--rm-ink); font-weight: 650; }
.rm-sk-gcard > span { font-size: 12px; color: var(--rm-muted); }
.rm-sk-gcard-hi { border-style: solid; border-color: var(--blue-soft); background: var(--surface-blue); }

/* Formation */
.rm-sk-progress { display: grid; gap: 6px; font-size: 12.5px; color: var(--rm-muted); }
.rm-sk-progress > i { display: block; height: 8px; border-radius: 4px; background: var(--rm-sketch-fill); overflow: hidden; }
.rm-sk-progress > i > i { display: block; height: 100%; background: color-mix(in srgb, var(--blue) 40%, var(--surface)); }
.rm-sk-module { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); }
.rm-sk-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rm-line-strong); flex: none; margin-top: 1px; }
.rm-sk-check-on { background: color-mix(in srgb, var(--blue) 40%, var(--surface)); border-color: color-mix(in srgb, var(--blue) 40%, var(--surface)); }

/* QR */
.rm-sk-qr-wrap { display: flex; gap: 16px; align-items: center; }
.rm-sk-qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 96px; flex: none; padding: 6px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); background: var(--surface); }
.rm-sk-qr > i { aspect-ratio: 1; background: var(--surface-3); border-radius: 1px; }
.rm-sk-qr > i.rm-on { background: var(--ink-2); }
.rm-sk-chip { justify-self: start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--rm-surface-blue); color: var(--rm-blue-strong); font-weight: 650; font-size: 13px; }

/* Classement */
.rm-sk-rank { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); }
.rm-sk-rank > b { width: 7.5em; flex: none; font-size: 13px; font-weight: 650; color: var(--rm-ink); }
.rm-sk-rank > .rm-sk-bar { flex: 1; }
.rm-sk-rank-you { background: var(--rm-surface-blue); border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--surface)); }
.rm-sk-pos {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; border: 1.5px dashed var(--rm-sketch-line); font-size: 12px; font-weight: 700; color: var(--rm-ink); background: var(--surface);
}

/* Identité */
.rm-sk-swatches { display: flex; gap: 8px; }
.rm-sk-swatches > i { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1.5px dashed var(--rm-sketch-line); }
.rm-sw-1 { background: #c8d7ec; } .rm-sw-2 { background: #e6d3c0; } .rm-sw-3 { background: #d7e8dc; } .rm-sw-4 { background: #f3f5f8; }
.rm-sk-type { display: flex; align-items: center; gap: 12px; }
.rm-sk-aa { font-size: 32px; font-weight: 800; color: var(--subtle); font-family: Georgia, "Times New Roman", serif; }
.rm-sk-tone { display: flex; flex-wrap: wrap; gap: 6px; }

/* Carte */
.rm-sk-menu-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.rm-sk-menu-row > b { font-weight: 650; color: var(--rm-ink); }
.rm-sk-menu-row > span { color: var(--rm-muted); }
.rm-sk-leader { flex: 1; border-bottom: 2px dotted var(--rm-line-strong); }

/* Canaux */
.rm-sk-source { display: flex; gap: 12px; align-items: center; }
.rm-sk-photo { width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm); background: var(--rm-sketch-fill); border: 1.5px dashed var(--rm-sketch-line); }
.rm-sk-fan { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Vidéo */
.rm-sk-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: var(--radius-sm); background: var(--surface-3); }
.rm-sk-play { width: 0; height: 0; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.rm-sk-live { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface); color: var(--rm-ink); font-size: 12px; font-weight: 650; }
.rm-sk-people { display: flex; align-items: center; gap: 4px; }
.rm-sk-people > span { margin-left: 6px; color: var(--rm-muted); font-size: 12.5px; }

/* Espace client */
.rm-sk-portal { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; }
.rm-sk-side { display: grid; gap: 4px; align-content: start; }
.rm-sk-side > span { padding: 5px 8px; border-radius: var(--radius-xs); font-size: 12.5px; color: var(--rm-muted); }
.rm-sk-side > span.rm-sk-side-on { background: var(--rm-surface-blue); color: var(--rm-blue-strong); font-weight: 650; }
.rm-sk-main { display: grid; }
.rm-sk-file { width: 22px; height: 26px; flex: none; border-radius: 3px; border: 1.5px dashed var(--rm-sketch-line); background: var(--surface); }

/* Choix */
.rm-sk-choices { display: grid; gap: 8px; }
.rm-sk-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1.5px dashed var(--rm-sketch-line); border-radius: var(--radius-sm); background: var(--surface); }
.rm-sk-choice-on { border-style: solid; border-color: color-mix(in srgb, var(--blue) 40%, var(--surface)); background: var(--surface-blue); }
.rm-sk-radio { width: 16px; height: 16px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--rm-line-strong); background: var(--surface); }
.rm-sk-choice-on .rm-sk-radio { border: 5px solid color-mix(in srgb, var(--blue) 40%, var(--surface)); }

/* Vérifications */
.rm-sk-check-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.rm-sk-mark { width: 18px; height: 18px; flex: none; border-radius: 50%; margin-top: 1px; border: 1.5px dashed var(--rm-sketch-line); }
.rm-sk-st-ok .rm-sk-mark { border: 0; background: color-mix(in srgb, var(--green) 30%, var(--surface)); }
.rm-sk-st-warn .rm-sk-mark { border: 0; background: color-mix(in srgb, var(--amber-bright) 40%, var(--surface)); }
.rm-sk-st-ok b { color: var(--rm-muted); }

/* Avis */
.rm-sk-stars-head { display: flex; align-items: center; gap: 10px; }
.rm-sk-stars { color: var(--amber-bright); font-size: 18px; letter-spacing: 1px; }
.rm-sk-stars-sm { font-size: 12px; }
.rm-sk-review { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--rm-line); }

/* Parrainage */
.rm-sk-gift { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-blue); border: 1px dashed var(--blue-soft); }
.rm-sk-gift > b { color: var(--rm-ink); font-size: 14px; }
.rm-sk-gift > span { color: var(--rm-muted); font-size: 12.5px; }

/* Téléphone */
.rm-sk-phone-wrap { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.rm-sk-phone {
  position: relative; display: grid; gap: 8px; align-content: start;
  width: 150px; height: 270px; padding: 26px 12px 12px;
  border: 2px dashed var(--rm-sketch-line); border-radius: 22px; background: var(--surface);
}
.rm-sk-notch { position: absolute; top: 9px; left: 50%; width: 44px; height: 6px; margin-left: -22px; border-radius: 4px; background: var(--rm-sketch-fill); }
.rm-sk-phone .rm-sk-hero { padding: 6px 0; }
.rm-sk-pin {
  position: absolute; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--rm-violet); color: #fff; font-size: 12px; font-weight: 700;
}
.rm-sk-pin-1 { top: 44px; right: -10px; }
.rm-sk-pin-2 { top: 120px; left: -10px; }
.rm-sk-steps { display: grid; gap: 8px; max-width: 16rem; }
.rm-sk-steps > p { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--rm-ink); }

/* ---------- Intérêt du compte : états, erreur, reprise des anciens choix ----------
   Les états ne reposent jamais sur la couleur seule : icône, texte « Erreur : » et libellé du bouton. */
.rm-root .rm-interest-help { max-width: 62ch; margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.rm-interest-btn { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 44px; margin-top: var(--space-2); }
.rm-interest-btn .rm-icon { width: 16px; height: 16px; }
.rm-interest-btn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rm-interest-btn:disabled { cursor: not-allowed; opacity: .75; }
.rm-interest-btn[aria-busy="true"] { cursor: progress; }
.rm-interest-state { color: var(--ink-2); font-size: var(--text-sm); }
.rm-interest-state:empty { display: none; }
.rm-interest-note:empty { display: none; }
.rm-interest-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-2); }
.rm-interest-note > span { flex: 1 1 14rem; min-width: 0; }
.rm-interest-note.rm-note-ok { color: var(--green); }
.rm-interest-note.rm-note-warn { color: var(--amber); }
.rm-interest-note.rm-note-error, .rm-recover-error { color: var(--red); }
.rm-interest-note .rm-icon, .rm-recover-status .rm-icon { flex: none; width: 15px; height: 15px; }
.rm-retry { min-height: 44px; }
.rm-recover { display: grid; gap: 6px; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.rm-recover[hidden] { display: none; }
.rm-root .rm-recover-title { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
.rm-recover-text { color: var(--ink-2); font-size: var(--text-sm); }
.rm-recover-list { padding-left: 18px; font-size: var(--text-sm); font-weight: 500; }
.rm-recover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rm-recover-actions .button { min-height: 44px; }
.rm-recover-status:empty { display: none; }
.rm-recover-status { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); }
.rm-spin { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .rm-spin { animation: rm-spin 0.9s linear infinite; }
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* ---------- Petits écrans ---------- */
@media (max-width: 720px) {
  .rm-sketch { padding: 14px; }
  .rm-sk-fan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-sk-cols { grid-template-columns: minmax(0, 1fr); }
  .rm-sk-col:nth-child(n + 2) { display: none; }
  .rm-sk-qr-wrap { flex-direction: column; align-items: flex-start; }
  .rm-sk-portal { grid-template-columns: minmax(0, 1fr); }
  .rm-sk-side { grid-auto-flow: column; overflow: hidden; }
  .rm-alt { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-root * { transition: none !important; }
}
@media (forced-colors: active) {
  .rm-sk-bar, .rm-sk-tile, .rm-sk-slot-on { forced-color-adjust: none; }
  .rm-interest-btn { border: 1px solid ButtonText; }
}

/* ---------- Premier pas d'un écran vide (AthernV2Start.html, partagé) ----------
   Utilisé par les écrans de fonctions quand il n'y a encore rien : une phrase,
   l'action principale, et à côté les étapes à venir en lignes numérotées.
   Posé sur le fond, sans encadré ni icône. Deux colonnes dès que la place le permet. */
.v2-start { container: v2start / inline-size; min-width: 0; max-width: 1040px; }
.v2-start-in { display: grid; gap: var(--space-5); padding-block: var(--space-2) var(--space-4); }
.v2-start-lead { display: grid; align-content: start; justify-items: start; gap: var(--space-2); min-width: 0; max-width: 60ch; }
.v2-start-title { margin: 0; color: var(--ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }
.v2-start-text { margin: 0; color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.v2-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.v2-start-plan { display: grid; gap: var(--space-2); min-width: 0; }
.v2-start-plan-title { margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.v2-start-steps { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.v2-start-steps > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2); padding: 10px 0; border-bottom: 1px solid var(--line); }
.v2-start-num { color: var(--subtle, var(--muted)); font-size: var(--text-sm); font-variant-numeric: tabular-nums; line-height: 1.45; }
.v2-start-step { display: grid; gap: 1px; min-width: 0; }
.v2-start-step-title { color: var(--ink); font-size: var(--text-md); font-weight: 500; line-height: 1.45; }
.v2-start-step-text { color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
@container v2start (min-width: 680px) {
  .v2-start-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-9, 48px); align-items: start; }
  .v2-start.is-single .v2-start-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .v2-start-actions .button { min-height: 44px; }
}
.v2-start-actions:has(> .at-link:only-child) { margin-top: 0; }