/* ═══════════════════════════════════════════════════════════════
   compte-page-plan.css — Plan & facturation
   Vient APRÈS compte-page.css. Réutilise .cpt-donna-card / .cpt-plan-*
   / .cpt-table existants ; n'ajoute que le détail de consommation.
   ═══════════════════════════════════════════════════════════════ */

/* ── la jauge répond aux deux questions du handoff ───────────────
   1. Elle change de couleur près de la limite — mais tard (80%) et
      sans rouge d'alarme (tiede, pas chaud) tant qu'il reste une
      marge : ça se réinitialise chaque jour, ce n'est pas un incident.
      Le rouge n'arrive qu'au-delà de 95%, quand c'est vraiment tendu.
   2. Le detail dessous dit CE QUI consomme, pas seulement combien il
      reste — "pourquoi" plutôt que juste "combien". */
.cpt-donna-gauge-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.cpt-donna-gauge-val{font-family:var(--font-display,inherit);font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cpt-donna-gauge-val small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}
.cpt-donna-gauge-reset{font-size:11px;color:var(--muted)}
.cpt-donna-gauge-track{height:6px;background:var(--s3);border-radius:3px;overflow:hidden;position:relative}
.cpt-donna-gauge-fill{height:100%;background:var(--text);border-radius:3px;transition:width .3s ease,background .2s}
.cpt-donna-gauge-fill.warn{background:var(--tiede)}
.cpt-donna-gauge-fill.danger{background:var(--chaud)}
.cpt-donna-gauge-note{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tiede);margin-top:7px;font-weight:500}
.cpt-donna-gauge-note svg{width:13px;height:13px;flex:none}
.cpt-donna-gauge-note.danger{color:var(--chaud)}

.cpt-donna-break{display:flex;flex-direction:column;margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb, var(--accent) 14%, var(--border))}
.cpt-donna-break-lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.cpt-donna-break-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12px}
.cpt-donna-break-dot{width:6px;height:6px;border-radius:50%;flex:none}
.cpt-donna-break-name{color:var(--text-dim)}
.cpt-donna-break-pct{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* plan card : badge d'état à côté du prix */
.cpt-plan-name-row .cpt-badge{font-size:10px}