/* Le peu de style propre aux deux pages du compte.
 *
 * Tout le reste vient de `site.css` — cartes, boutons, champs, curseur,
 * accordéons : ces pages n'inventent pas une seconde identité, elles reprennent
 * celle du site. Ne vivent ici que trois choses qui n'existaient nulle part
 * ailleurs : la jauge du solde, et les lignes du relevé.
 */

/* La jauge : le solde par rapport à un plein — la recharge mensuelle quand il
   y en a une, le solde lui-même sinon (voir `creditGauge` côté app, même
   règle). Une barre pleine sur un compte qui vit de packs ne dirait rien. */
.jauge {
  height: 6px;
  margin: 10px 0 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}

.jauge > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* Basse, puis vide. L'ambre du site (`--warning`) porte les deux : il n'y a
   pas de rouge dans cette palette, et il n'y a rien de cassé — au plafond,
   enregistrer marche toujours, c'est la transcription qui attend. Le vide se
   distingue par la barre à zéro, pas par une couleur de plus. */
.jauge.basse > span,
.jauge.vide > span { background: var(--warning); }

/* Le relevé : une liste qu'on parcourt, pas une liste où l'on clique. */
.conso {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.conso-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.conso-ligne:last-child { border-bottom: 0; }
.conso-ligne > span { color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }

/* Sur la page tarifs, un pack est une carte qu'on LIT ; ici, c'est un bouton
   qui ouvre une page de paiement. Il porte donc une troisième ligne (le prix à
   l'heure, vérifiable là où l'on paie) et les repères d'un bouton — sans quoi
   rien ne dit qu'il est cliquable. */
.pack-grid button.pack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.pack-grid button.pack:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.pack-grid button.pack:disabled { opacity: 0.6; cursor: default; }