/* ============================================
   MON COMPTE — habillage éditorial (joy palette)
   Restyle renderAccount sans toucher à la logique (Stripe, push, CGU, export).
   Scopé sous .account-page. Règle d'or : zéro hex — tout en var(--*).
   Réf : handoff/MON-COMPTE.md
   ============================================ */

.account-page { position: relative; }
.account-page .section-header { margin-bottom: var(--space-6); }
.account-page .section-header .ed-eyebrow { margin-bottom: 6px; }

/* ─── Panneaux : titre split + filet or ─────────────────── */
.account-page .acct-panel-title {
  font-size: 1.4375rem !important; /* 23px — bat .card-header h3 */
  line-height: 1.15;
}
.account-page .card .card-header {
  position: relative;
  align-items: baseline;
}
.account-page .card .card-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 44px; height: 1px;
  background: var(--accent);
}
.account-page .card .card-body { padding-top: var(--space-5); }

/* ─── Avatar ────────────────────────────────────────────── */
.account-page .account-avatar {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent) !important;
  color: var(--surface) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 44%, transparent);
}
.account-page .account-name {
  font-family: var(--serif);
  font-weight: 400;
  white-space: nowrap;
}

/* ─── Carte de plan / abonnement ────────────────────────── */
.account-page .current-plan-banner {
  position: relative;
  overflow: hidden;
  border-left: none;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 12px;
  background: linear-gradient(150deg,
      color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%,
      var(--surface-tinted, var(--bg-deep)) 70%);
}
.account-page .current-plan-badge {
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-page .price-amount {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
}
.account-page .current-plan-desc {
  font-family: var(--serif);
  font-style: italic;
}

/* Barre de progression d'essai */
.acct-trial-bar {
  margin-top: 12px;
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.acct-trial-fill {
  height: 100%;
  background: var(--joy-rose-ink);
  border-radius: 999px;
}

/* ─── Liste des inclus → grille + pastilles sage ────────── */
.account-page .plan-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
}
@media (max-width: 560px) {
  .account-page .plan-features-list { grid-template-columns: 1fr; }
}
.account-page .plan-feature-item { color: var(--ink-soft); }

/* ─── Cartes de section sécurité / données / légal ──────── */
.account-page .account-info-label {
  font-family: var(--sans);
  letter-spacing: 0.18em;
}
.account-page .account-info-value { color: var(--ink-soft); }

/* ─── Notifications push — tokenisation (zéro hex) ──────── */
.account-page .account-push-state.state-on {
  background: color-mix(in srgb, var(--joy-sage-tint) 75%, var(--surface));
  color: var(--joy-sage-ink);
}
.account-page .account-push-state.state-on .account-push-dot {
  background: var(--joy-sage-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--joy-sage-ink) 18%, transparent);
}
.account-page .account-push-state.state-off {
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  color: var(--muted);
}
.account-page .account-push-state.state-off .account-push-dot { background: var(--muted-soft); }
.account-page .account-push-state.state-denied {
  background: color-mix(in srgb, var(--joy-rose-tint) 65%, var(--surface));
  color: var(--joy-rose-ink);
}
.account-page .account-push-state.state-denied .account-push-dot { background: var(--joy-rose-ink); }
.account-page .account-push-state.state-unsupported {
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  color: var(--muted);
}
.account-page .account-push-state.state-unsupported .account-push-dot { background: var(--muted-soft); }
.account-page .account-push-hint {
  background: color-mix(in srgb, var(--joy-apricot-tint) 60%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--joy-apricot-ink) 33%, transparent);
  color: var(--ink-soft);
}

/* ─── État vide historique factures ─────────────────────── */
.account-page .account-invoices-card .empty-state p:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
}