/* ─── Carte rythme S3 « haplat » : rythme actuel vs plafond max ──────────────────────────────
 * Trois états : .haplat-card--good (vert) · --warning (jaune) · --danger (rose corail).
 *
 * Échelle : les tailles ci-dessous sont celles de la maquette (libellé 16px, segments 22×8px,
 * chiffre héros 48px…), atteintes quand la carte fait ≥ ~430px de large.
 *
 * Responsive : la carte est un « conteneur » (container-type: inline-size) et TOUT (marges, textes,
 * segments) est exprimé en cqw = 1 % de la largeur de la CARTE (pas de l'écran), plafonné à la taille
 * de la maquette. Le design rétrécit donc proportionnellement : le bilan en mots et ses segments
 * restent sur UNE seule ligne, quelle que soit la largeur de l'écran.
 * Les sélecteurs à 2 classes (.haplat-card .x) l'emportent sur d'éventuelles anciennes règles.
 */

.haplat-card {
  --haplat-accent: #2EF0A0;                    /* vert menthe */
  --haplat-glow:   rgba(46, 240, 160, 0.45);

  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;                                 /* toute la largeur du conteneur… */
  max-width: none;                             /* …jamais de max-width */
  margin: var(--s-8) 0;
  padding: 0;                                  /* le padding est dans .haplat-inner (il suit la largeur de la carte) */
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background-color: #4C58DE;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 16px 36px -8px rgba(76, 88, 222, 0.36);
  color: #FFFFFF;
  font-family: inherit;                        /* police de l'app : pas de police dédiée */
  -webkit-font-smoothing: antialiased;
}

/* Imbriquée dans l'en-tête du plan (S3) : pas de marge au-dessus (celle des dates suffit),
 * 32px en dessous avant « Restant ». Le sélecteur à 2 classes l'emporte sur la marge de base. */
.plan-header-card .haplat-card { margin: 0 0 var(--s-8); }

.haplat-card.haplat-card--warning {
  --haplat-accent: #FFE17D;                    /* jaune doré */
  --haplat-glow:   rgba(255, 225, 125, 0.45);
}
.haplat-card.haplat-card--danger {
  --haplat-accent: #FFB4C0;                    /* rose corail */
  --haplat-glow:   rgba(255, 180, 192, 0.45);
}

.haplat-card .haplat-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 6.2cqw, 27px);
  padding: clamp(14px, 7.2cqw, 33px);
}

/* ── Ligne de statut : bilan en mots + segments, TOUJOURS sur une seule ligne ──────────────── */

.haplat-card .haplat-status-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2.6cqw, 12px);
  min-width: 0;
}

.haplat-card .haplat-status-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;                     /* dernier recours (zoom extrême) : jamais de retour à la ligne */
  white-space: nowrap;
  font-size: clamp(11px, 4cqw, 16px);          /* 16px dès que la place le permet */
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;                           /* laisse la place aux accents (É) : overflow:hidden les rognait */
  color: var(--haplat-accent);
}

.haplat-card .haplat-segments {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(3px, 1.6cqw, 8px);
}

.haplat-card .haplat-segment {
  width: clamp(9px, 5.3cqw, 22px);            /* 22 × 8 px dès que la place le permet */
  height: clamp(5px, 2cqw, 8px);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.22); /* segment éteint */
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.haplat-card .haplat-segment.active {
  background-color: var(--haplat-accent);
  box-shadow: 0 0 10px var(--haplat-glow);
}

.haplat-card .haplat-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.18);
}

/* ── Métriques : rythme actuel (héros, à gauche) · plafond max (repère, à droite) ──────────── */

.haplat-card .haplat-metrics-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(8px, 3.7cqw, 16px);
}

.haplat-card .haplat-main-metric {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.haplat-card .haplat-value-hero {
  display: flex;
  align-items: baseline;
  gap: 0.22em;
  font-size: clamp(22px, 10cqw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.haplat-card .haplat-value-hero--md { font-size: clamp(18px, 8.2cqw, 39px); }   /* IDR, VND… */
.haplat-card .haplat-value-hero--sm { font-size: clamp(15px, 6.6cqw, 31px); }

.haplat-card .haplat-unit-accent {
  font-size: 0.5625em;                         /* 27px quand le chiffre fait 48px */
  font-weight: 700;
  color: var(--haplat-accent);
}

.haplat-card .haplat-ref-metric {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-bottom: 1px;
}

.haplat-card .haplat-value-ref {
  font-size: clamp(14px, 5.3cqw, 25px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.haplat-card .haplat-unit-muted {
  margin-left: 0.3em;
  font-size: 0.7em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.haplat-card .haplat-sublabel {
  margin-top: clamp(4px, 2cqw, 9px);
  font-size: clamp(9px, 3.3cqw, 15px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
}