/* Statsmaker v2 — écran 3, Abonnement (phase 7).
 *
 * Portage de l'écran `subscribe` de `Statsmaker.dc.html`. Quatre étapes, un
 * seul gabarit : les formules, le récapitulatif, l'attente et la confirmation.
 *
 * 🛑 **Aucune couleur ne porte seule une information d'argent.** Un prix, un
 * crédit, un refus sont écrits en toutes lettres à côté de leur teinte : sur un
 * écran qui engage un paiement, un daltonien ne doit pas avoir à deviner.
 */

.sm-ab-tete {
  max-width: 620px;
  margin: 0 auto 22px;
  text-align: center;
}

.sm-ab-titre {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.2;
  text-wrap: balance;
}

.sm-ab-chapeau {
  margin: 0;
  font-size: 14.5px;
  color: var(--color-neutral-700);
  text-wrap: pretty;
}

/* ── Le sélecteur de cycle ─────────────────────────────────────────────────
 * Des LIENS, pas des boutons : chaque cycle est une adresse du serveur. La v1
 * le pilotait en JavaScript, si bien que le prix affiché ne survivait pas à un
 * rechargement de page. */
.sm-ab-cycles {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 22px;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--sm-border-field);
  border-radius: 999px;
  background: var(--color-bg);
}

.sm-ab-cycle {
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.sm-ab-cycle--actif { background: var(--color-accent); color: #fff; }

/* ── Les cartes de formule ─────────────────────────────────────────────── */
.sm-ab-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.sm-ab-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* La formule mise en avant. Le liseré ne porte pas seul : le ruban est écrit. */
.sm-ab-plan--phare { border-color: var(--color-accent); }

.sm-ab-ruban {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sm-ab-nom { margin: 0; font-size: 19px; }

.sm-ab-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-800);
}

.sm-ab-tag--mienne {
  margin: 0;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
}

/* Chiffres tabulaires : deux cartes côte à côte doivent aligner leurs prix,
 * sinon l'œil compare des largeurs au lieu de comparer des montants. */
.sm-ab-prix { margin: 0; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.sm-ab-prix-valeur { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-ab-prix-devise { font-size: 13px; font-weight: 600; }
.sm-ab-prix-suffixe { font-size: 12.5px; color: var(--color-neutral-700); }

.sm-ab-economie {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent-2-800);
}

.sm-ab-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-neutral-700);
  text-wrap: pretty;
}

/* ── Les catégories couvertes ──────────────────────────────────────────────
 * Les non incluses sont montrées ET marquées : une carte qui ne listerait que
 * ses inclusions laisserait croire qu'elle couvre tout ce qui n'est pas dit. */
.sm-ab-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.sm-ab-cat {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 13px;
  text-wrap: pretty;
}

.sm-ab-cat--on { color: var(--color-neutral-800); }

/* ⚠️ Une catégorie absente est ATTÉNUÉE, jamais barrée : un texte barré se lit
 * comme un prix promotionnel sur un écran de tarifs. */
.sm-ab-cat--off { color: var(--color-neutral-600); }

/* ── Les appels à l'action ─────────────────────────────────────────────── */
.sm-ab-cta { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }

.sm-ab-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sm-ab-btn:disabled { opacity: .55; cursor: not-allowed; }

.sm-ab-btn--fantome {
  background: transparent;
  border-color: var(--sm-border-field);
  color: inherit;
}

.sm-ab-active {
  margin: 0;
  padding: 8px 13px;
  border-radius: 999px;
  text-align: center;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  font-size: 13.5px;
  font-weight: 700;
}

.sm-ab-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-neutral-700);
  text-wrap: pretty;
}

.sm-ab-pied {
  margin: 18px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-neutral-700);
  text-wrap: pretty;
}

.sm-ab-vide {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-neutral-700);
}

/* ── L'étape « récapitulatif » ─────────────────────────────────────────── */
.sm-ab-fil { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.sm-ab-fil a { color: var(--color-accent-700); text-decoration: none; }
.sm-ab-fil a:hover { text-decoration: underline; }

.sm-ab-recap { max-width: 460px; margin: 0 auto; }
.sm-ab-recap-titre { margin: 0; font-size: 21px; display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }

.sm-ab-lignes { margin: 4px 0 0; display: flex; flex-direction: column; gap: 7px; }

.sm-ab-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

.sm-ab-ligne dt { color: var(--color-neutral-700); }
.sm-ab-ligne dd { margin: 0; font-variant-numeric: tabular-nums; }

.sm-ab-ligne--credit dd { color: var(--color-accent-2-800); font-weight: 600; }

/* Le total se distingue par le poids et un filet, pas seulement par la
 * couleur : c'est le seul chiffre qui engage. */
.sm-ab-ligne--total {
  padding-top: 8px;
  border-top: 1px solid var(--color-divider);
  font-size: 15.5px;
  font-weight: 700;
}

.sm-ab-refus {
  margin: 0;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--sm-border-field);
  font-size: 13.5px;
  color: var(--sm-loss-text);
  text-wrap: pretty;
}

.sm-ab-payer { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* La remise se lit comme le crédit prorata : c'est la meme nature de ligne
 * (quelque chose est retire du total), donc la meme teinte. */
.sm-ab-ligne--remise dd { color: var(--color-accent-2-800); font-weight: 600; }
.sm-ab-promo-code { font-weight: 700; letter-spacing: .02em; }

.sm-ab-promo { display: flex; flex-direction: column; gap: 5px; }
.sm-ab-promo label { font-size: 12.5px; font-weight: 600; }

/* Le champ et son bouton sur une meme ligne : « Appliquer » ne recharge que
 * l'apercu, il ne doit pas se confondre avec le bouton qui engage. */
.sm-ab-promo-champs { display: flex; gap: 8px; align-items: stretch; }
.sm-ab-promo-champs .sm-ab-champ { flex: 1 1 auto; min-width: 0; }
.sm-ab-promo-champs .sm-ab-btn { flex: 0 0 auto; }

.sm-ab-promo-etat { margin: 0; font-size: 12.5px; }
.sm-ab-promo-refus { margin: 0; font-size: 12.5px; color: var(--sm-loss-text); }

.sm-ab-champ {
  padding: 9px 13px;
  border: 1px solid var(--sm-border-field);
  border-radius: 10px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  font-size: 13.5px;
}

.sm-ab-btn--payer { width: 100%; }

/* ── Le retour de paiement ─────────────────────────────────────────────── */
.sm-ab-retour {
  max-width: 520px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* Chaque état a sa teinte de liseré — mais le titre le dit déjà en toutes
 * lettres : « Paiement confirmé », « Paiement en attente… ». */
.sm-ab-retour--confirme { border-color: var(--color-accent-2-600); }
.sm-ab-retour--attente { border-color: var(--color-accent); }
.sm-ab-retour--refuse { border-color: var(--sm-loss-text); }

.sm-ab-details {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  text-align: start;
  font-size: 13.5px;
}

.sm-ab-details dt { color: var(--color-neutral-700); }
.sm-ab-details dd { margin: 0; overflow-wrap: anywhere; }

.sm-ab-actions {
  margin: 20px 0 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}