/* Page « Comptes » : le compte bancaire d'une personne suivie.

   Meme squelette que Carte SIM et Immobilier : un bandeau bleu nuit a la
   largeur commune (--largeur-bandeau, definie dans tableau-de-bord.css), puis
   des cartes en verre teinte (.carte). Le bandeau porte le solde et la
   courbe ; dessous, quatre cartes : avoirs, informations bancaires,
   activite recente, repartition des depenses.

   Les trois signaux (vert, ambre, rouge) ne servent qu'a dire l'etat de la
   synchronisation : jamais a colorer un montant ni une tendance. Les
   graphiques restent dans la famille indigo de la marque. */

/* Deux teintes claires, propres au fond bleu nuit : les jetons --signal-*
   sont calibres pour un fond blanc et s'y voient a peine. Meme teinte, plus
   claire. */
.cpt-hero {
  --cpt-point-ok: #3fd0a8;
  --cpt-point-attention: #f3bb5b;
}

.cpt-chargement { margin: 0; color: var(--on-dark-muted); }

/* ═════════════════════════ Bandeau : solde + courbe ═════════════════════════ */
.cpt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-xl);
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  border-radius: var(--radius-xl);
  color: var(--on-dark);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(115,111,182,.42) 0%, transparent 62%),
    radial-gradient(60% 110% at 0% 100%, rgba(18,135,111,.16) 0%, transparent 66%),
    linear-gradient(150deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 24px 50px -26px rgba(25,20,62,.62);
}
/* Filigrane : le symbole de la marque, tres pale, dans le coin bas droit. */
.cpt-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}

.cpt-hero__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.cpt-hero__titre {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-dark);
  text-wrap: balance;
}
.cpt-hero__banque {
  margin: 4px 0 0;
  font-size: var(--text-caption-size);
  color: var(--on-dark-muted);
}

/* Periodes du graphique : 7 j, 30 j, 3 m, 1 an. */
.cpt-periodes {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.10);
}
.cpt-periode {
  min-width: 52px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-dark-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cpt-periode:hover { color: var(--on-dark); }
.cpt-periode[aria-selected="true"] {
  background: var(--on-dark);
  color: var(--brand-1);
}
.cpt-hero :focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

.cpt-hero__corps {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: end;
  margin-top: var(--space-md);
}
.cpt-hero__solde { padding-bottom: var(--space-sm); }
.cpt-hero__montant {
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
}
.cpt-hero__legende {
  margin: 8px 0 0;
  font-size: var(--text-caption-size);
  color: var(--on-dark-muted);
}
.cpt-hero__variation {
  margin: 4px 0 0;
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}

/* Pastille de fraicheur : dit d'ou vient le chiffre et de quand il date. */
.cpt-fraicheur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-dark);
}
.cpt-fraicheur::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--point, var(--on-dark-muted));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--point, transparent) 28%, transparent);
}
.cpt-fraicheur--ok { --point: var(--cpt-point-ok); }
.cpt-fraicheur--attention { --point: var(--cpt-point-attention); }
.cpt-fraicheur--neutre { --point: var(--on-dark-muted); }

/* ── Courbe ──
   Le SVG est etire sur toute la largeur (preserveAspectRatio="none") : les
   etiquettes sont donc du HTML pose par-dessus, jamais du <text> SVG, qui
   serait deforme avec lui. */
.cpt-graphique {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 150px;
  min-width: 0;
}
.cpt-trace { position: relative; flex: 1 1 auto; min-height: 0; touch-action: pan-y; cursor: crosshair; }
.cpt-point {
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--on-dark);
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cpt-point[hidden] { display: none; }
.cpt-trace svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cpt-axe-x {
  position: relative;
  flex: 0 0 auto;
  height: 22px;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.cpt-axe-x span { position: absolute; top: 0; white-space: nowrap; }
.cpt-graphique__vide {
  margin: auto;
  max-width: 24em;
  text-align: center;
  font-size: var(--text-caption-size);
  color: var(--on-dark-muted);
}
.cpt-bulle {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--on-dark);
  color: var(--brand-1);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  box-shadow: 0 10px 24px -10px rgba(8,5,30,.7);
  pointer-events: none;
}
.cpt-bulle strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.cpt-bulle span { color: var(--ink-muted-80); }
.cpt-bulle[hidden] { display: none; }

/* Aucune banque reliee : la carte d'accueil claire (memes styles que la vue
   d'ensemble, .solde-vide__*) a la place du bandeau. */
.cpt-vide {
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-xl);
}

/* ═════════════════════════ Cartes ═════════════════════════
   Le conteneur porte la requete de conteneur : les colonnes suivent la
   largeur reelle de la zone (barre laterale ouverte, repliee ou absente),
   pas celle de l'ecran. */
.cpt-conteneur {
  container-type: inline-size;
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-xxl);
}
.cpt-conteneur[hidden] { display: none; }
.cpt-grille {
  display: grid;
  gap: var(--space-lg);
  /* L'activite est un peu plus large : un nom de commerce et un montant
     doivent tenir sur la meme ligne sans etre coupes. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr);
  /* Rien ne « flotte » : les cartes d'une meme rangee ont la meme hauteur
     (stretch), et la colonne de droite est aussi haute que celle de gauche.
     Fonds alternes : bleu nuit (bandeau, mois, depenses) et clair (le reste). */
  grid-template-areas:
    "avoirs infos activite"
    "mois mois activite"
    "categories categories depenses";
  align-items: stretch;
}
.cpt-mois { grid-area: mois; }
.cpt-avoirs { grid-area: avoirs; }
.cpt-infos { grid-area: infos; }
.cpt-activite { grid-area: activite; }
.cpt-depenses { grid-area: depenses; }
.cpt-categories { grid-area: categories; }
.cpt-carte { min-width: 0; }
.cpt-carte .carte__titre { font-size: 18px; font-weight: 700; margin-bottom: var(--space-md); }
.cpt-carte .carte__note { margin-top: calc(-1 * var(--space-sm)); }
.cpt-vide-note { margin: 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); line-height: 1.5; }

@container (max-width: 819px) {
  .cpt-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "avoirs infos"
      "mois mois"
      "activite activite"
      "categories depenses";
  }
}
@container (max-width: 559px) {
  .cpt-grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "avoirs" "infos" "mois" "activite" "categories" "depenses";
  }
}

/* ── Mes avoirs suivis ── */
.cpt-avoirs__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cpt-avoir {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cpt-avoir:hover { background: rgba(255,255,255,.55); }
.cpt-avoir:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.cpt-avoir[aria-pressed="true"] {
  background: rgba(115,111,182,.14);
  border-color: rgba(115,111,182,.38);
}
.cpt-avoir__nom { min-width: 0; overflow-wrap: anywhere; }
.cpt-avoir__montant { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.cpt-avoirs__total { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--hairline-alpha); }
.cpt-avoirs__total .cpt-avoir { font-weight: 700; }
.cpt-avoirs__total .cpt-avoir__nom,
.cpt-avoirs__total .cpt-avoir__montant { font-weight: 700; }
.cpt-avoirs__note { margin: var(--space-sm) 0 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); line-height: 1.5; }

/* ── Informations bancaires ── */
.cpt-infos__liste { margin: 0; display: grid; gap: 12px; }
.cpt-infos__liste div { display: grid; gap: 1px; }
.cpt-infos__liste dt { font-size: 13px; color: var(--ink-muted-80); }
.cpt-infos__liste dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cpt-etat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--space-md) 0 0;
  font-size: var(--text-caption-size);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.cpt-etat::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--point, var(--signal-neutre));
}
.cpt-etat--ok { --point: var(--signal-sur); }
.cpt-etat--attention { --point: var(--signal-vigilance); }
.cpt-etat__detail { display: block; font-weight: 400; color: var(--ink-muted-80); }
.cpt-infos .btn { margin-top: var(--space-md); width: 100%; justify-content: center; }

/* ── Activite recente ── */
.cpt-op-liste { list-style: none; margin: 0; padding: 0; }
.cpt-op {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--hairline-alpha);
}
.cpt-op:first-child { border-top: 0; padding-top: 0; }
.cpt-op__icone {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--action-tint);
  color: var(--brand-3);
}
.cpt-op__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cpt-op__corps { min-width: 0; }
/* Deux lignes au plus, puis des points de suspension : un nom long ne
   pousse jamais le montant hors de la carte. */
.cpt-op__nom, .cpt-op__detail {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.cpt-op__nom { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cpt-op__detail { font-size: 13px; line-height: 1.35; color: var(--ink-muted-80); }
.cpt-op__montant { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.cpt-op__montant--credit { color: var(--brand-3); }
.cpt-activite__note { margin: var(--space-sm) 0 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); line-height: 1.5; }

/* ── Repartition des depenses ── */
.cpt-depenses__corps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg) var(--space-xl);
}
.cpt-donut { position: relative; width: 180px; height: 180px; }
.cpt-donut svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.cpt-donut__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.cpt-donut__total { font-size: 22px; font-weight: 700; color: var(--brand-1); font-variant-numeric: tabular-nums; }
.cpt-donut__legende { font-size: 13px; color: var(--ink-muted-80); }
.cpt-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; flex: 1 1 220px; min-width: 0; }
.cpt-legende li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.cpt-legende__nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--ink); }
.cpt-legende__nom i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--couleur); }
.cpt-legende__montant { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cpt-legende__barre { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--action-tint-strong); overflow: hidden; }
.cpt-legende__barre b { display: block; height: 100%; border-radius: 999px; background: var(--couleur); }
.cpt-vide-carte { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--ink-muted-80); }

/* ═════════════════════════ Etroit ═════════════════════════ */
@container (max-width: 559px) {
  .cpt-legende { width: 100%; flex-basis: 100%; }
}

@media (max-width: 860px) {
  .cpt-hero { padding: var(--space-lg) var(--space-lg) var(--space-md); }
  .cpt-hero__corps { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .cpt-hero__solde { padding-bottom: 0; }
  .cpt-hero__montant { font-size: 40px; }
  .cpt-graphique { height: 190px; }
  .cpt-periodes { width: 100%; }
  .cpt-periode { flex: 1 1 0; min-width: 0; padding: 0 6px; }
}
/* Cibles tactiles de 44 px partout ou l'on touche, comme sur les autres pages. */
@media (max-width: 860px), (pointer: coarse) {
  .cpt-periode { min-height: 44px; }
  .cpt-avoir { min-height: 48px; }
}
@media (max-width: 380px) {
  .cpt-hero { padding-left: var(--space-md); padding-right: var(--space-md); }
  .cpt-hero__montant { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpt-periode, .cpt-avoir { transition: none; }
}

/* Etat « aucune banque » : dit DE QUI est le compte, pour ne jamais confondre
   deux personnes protegees. */
.cpt-vide-pour {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-caption-size);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--action);
}


/* ── Depenses par categorie (estimees) ── */
.cpt-cat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cpt-cat__ligne {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cpt-cat__ligne:hover { background: rgba(255,255,255,.55); }
.cpt-cat__ligne:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.cpt-cat__ligne[aria-expanded="true"] { background: rgba(115,111,182,.12); border-color: rgba(115,111,182,.3); }
.cpt-cat__icone {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--action-tint); color: var(--brand-3);
}
.cpt-cat__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cpt-cat__corps { min-width: 0; display: grid; gap: 6px; }
.cpt-cat__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 600; }
.cpt-cat__nb { font-size: 13px; font-weight: 400; color: var(--ink-muted-80); }
.cpt-cat__barre { height: 8px; border-radius: 999px; background: var(--action-tint-strong); overflow: hidden; }
.cpt-cat__barre b { display: block; height: 100%; border-radius: 999px; background: var(--brand-4); }
.cpt-cat--autres .cpt-cat__barre b { background: var(--ink-muted-48); }
.cpt-cat__montant { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpt-cat__part { display: block; font-size: 13px; font-weight: 400; color: var(--ink-muted-80); }
.cpt-cat__detail { list-style: none; margin: 2px 0 8px 62px; padding: 0; display: grid; gap: 2px; }
.cpt-cat__detail[hidden] { display: none; }
.cpt-cat__detail li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hairline-alpha); font-size: 14px; color: var(--ink-muted-80); }
.cpt-cat__detail li:first-child { border-top: 0; }
.cpt-cat__detail span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.cpt-cat__note { margin: var(--space-md) 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted-80); }
@media (max-width: 860px), (pointer: coarse) { .cpt-cat__ligne { min-height: 60px; } }
@container (max-width: 559px) {
  .cpt-cat__ligne { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .cpt-cat__icone { width: 36px; height: 36px; }
  .cpt-cat__detail { margin-left: 46px; }
}


/* ── Depenses du mois : petite carte bleu nuit, meme fond que le bandeau du haut ── */
.cpt-bleu.carte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(70% 130% at 100% 0%, rgba(115,111,182,.45) 0%, transparent 62%),
    linear-gradient(150deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -30px rgba(25,20,62,.62);
}
.cpt-mois__titre {
  margin: 0 0 var(--space-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.cpt-mois__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: end; }
.cpt-mois__montant { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cpt-mois__periode { margin: 6px 0 0; font-size: var(--text-caption-size); color: var(--on-dark-muted); }
.cpt-mois__compare { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.cpt-mois__trace { position: relative; height: 84px; min-width: 0; }
.cpt-mois__trace svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cpt-mois__point {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--on-dark);
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
  transform: translate(-50%, -50%);
}
.cpt-mois__vide { margin: 0; color: var(--on-dark-muted); font-size: var(--text-caption-size); line-height: 1.5; }
@container (max-width: 559px) {
  .cpt-mois__corps { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .cpt-mois__trace { height: 72px; }
}


/* ── Depenses sur fond bleu nuit : textes et traces clairs ── */
.cpt-depenses.cpt-bleu .carte__titre { color: var(--on-dark); }
.cpt-depenses.cpt-bleu .carte__note { color: var(--on-dark-muted); }
.cpt-depenses.cpt-bleu .cpt-donut__total { color: var(--on-dark); }
.cpt-depenses.cpt-bleu .cpt-donut__legende { color: var(--on-dark-muted); }
.cpt-depenses.cpt-bleu .cpt-legende__nom,
.cpt-depenses.cpt-bleu .cpt-legende__montant { color: var(--on-dark); }
.cpt-depenses.cpt-bleu .cpt-legende__barre { background: rgba(255,255,255,.14); }
.cpt-depenses.cpt-bleu .cpt-vide-carte { color: var(--on-dark-muted); }

/* ── Avoirs : mini-statistiques sur 30 jours, sous les comptes ── */
.cpt-avoirs__stats { margin: var(--space-md) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--hairline-alpha); display: grid; gap: 10px; }
.cpt-avoirs__stats-titre { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted-80); }
.cpt-avoirs__stats div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cpt-avoirs__stats dt { font-size: 14px; color: var(--ink-muted-80); }
.cpt-avoirs__stats dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* La carte des depenses est etiree a la hauteur de sa voisine : son contenu se
   centre dans l'espace au lieu de laisser un grand vide en bas. */
.cpt-depenses { display: flex; flex-direction: column; }
.cpt-depenses > #cpt-depenses { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.cpt-depenses > #cpt-depenses > .cpt-depenses__corps { width: 100%; }


/* ═════════ Etat « Connectez la banque » : un bandeau bleu, puis trois etapes ═════════ */
.cpt-accueil { max-width: var(--largeur-bandeau); margin: 0 auto var(--space-xl); }

.cpt-accueil__haut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-xl);
  color: var(--on-dark);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(115,111,182,.42) 0%, transparent 62%),
    radial-gradient(60% 110% at 0% 100%, rgba(18,135,111,.16) 0%, transparent 66%),
    linear-gradient(150deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -26px rgba(25,20,62,.62);
}
.cpt-accueil__haut::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  top: -120px;
  width: 360px;
  height: 360px;
  background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.cpt-accueil__oeil {
  margin: 0 0 var(--space-xs);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.cpt-accueil__titre {
  margin: 0 0 var(--space-sm);
  max-width: 22em;
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-dark);
  text-wrap: balance;
}
.cpt-accueil__texte {
  margin: 0 0 var(--space-md);
  max-width: 36em;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--on-dark-muted);
  text-wrap: pretty;
}
.cpt-accueil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.cpt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--on-dark);
  color: var(--brand-1);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(8,5,30,.7);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cpt-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(8,5,30,.8); }
.cpt-cta:focus-visible { outline: 3px solid var(--action-on-dark); outline-offset: 3px; }
.cpt-garanties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--on-dark); }
.cpt-garanties li { display: inline-flex; align-items: center; gap: 8px; }
.cpt-garanties li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cpt-point-ok, #3fd0a8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319143e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ── Bandes de logos : elles defilent lentement en sens inverse ── */
.cpt-defile {
  display: grid;
  gap: 14px;
  margin: var(--space-xl) calc(-1 * var(--space-xl)) 0;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.cpt-defile__rang { overflow: hidden; }
.cpt-defile__piste { display: flex; width: max-content; animation: cpt-defile 75s linear infinite; }
.cpt-defile__rang--inverse .cpt-defile__piste { animation-direction: reverse; animation-duration: 90s; }
.cpt-defile__piste ul { display: flex; gap: 14px; margin: 0; padding: 0 14px 0 0; list-style: none; }
@keyframes cpt-defile { to { transform: translateX(-50%); } }
.cpt-banque {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 84px;
  height: 60px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--on-dark);
  box-shadow: 0 10px 22px -12px rgba(8,5,30,.7);
}
.cpt-banque img { display: block; max-height: 36px; width: auto; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .cpt-defile__piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .cpt-defile__piste ul { flex-wrap: wrap; justify-content: center; padding: 0; }
  .cpt-defile__piste ul + ul { display: none; }
  .cpt-defile__rang { overflow: visible; margin: 0 var(--space-xl); }
  .cpt-defile { -webkit-mask-image: none; mask-image: none; }
}

/* ── Comment ca marche ── */
.cpt-etapes { margin-top: var(--space-xl); }
.cpt-etapes__titre { margin: 0 0 var(--space-md); font-size: 22px; font-weight: 700; color: var(--brand-1); }
.cpt-etapes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); counter-reset: etape; }
.cpt-etape { position: relative; padding: var(--space-lg); }
.cpt-etape h3 { margin: var(--space-md) 0 var(--space-xs); font-size: 18px; font-weight: 700; color: var(--brand-1); }
.cpt-etape p { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--ink-muted-80); text-wrap: pretty; }
.cpt-etape__num {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-2), var(--brand-4));
  color: var(--on-dark); font-size: 18px; font-weight: 700;
  box-shadow: 0 10px 20px -10px rgba(25,20,62,.7);
}

@media (max-width: 860px) {
  .cpt-accueil__haut { padding: var(--space-lg) var(--space-lg) var(--space-md); }
  .cpt-defile { margin-left: calc(-1 * var(--space-lg)); margin-right: calc(-1 * var(--space-lg)); }
  .cpt-etapes__liste { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .cpt-cta { width: 100%; justify-content: center; min-height: 56px; }
}


/* Hauteur commune des bandeaux (voir --hauteur-bandeau) : le bandeau du solde se
   range en colonne pour que son contenu occupe la hauteur, courbe en bas. */
@media (min-width: 861px) {
  .cpt-hero { display: flex; flex-direction: column; }
  .cpt-hero__corps { flex: 1 1 auto; }
  .cpt-hero__solde { align-self: end; }
}


/* Etat « Connectez la banque » : le bandeau bleu a la hauteur commune, puis une carte
   claire pour les banques compatibles (la bande de logos n'est plus DANS le bandeau). */
.cpt-accueil__haut { display: flex; flex-direction: column; justify-content: center; }
.cpt-accueil__haut .cpt-accueil__texte { max-width: 40em; }
.cpt-banques { position: relative; overflow: hidden; margin-top: var(--space-lg); padding: var(--space-lg) 0 var(--space-md); }
.cpt-banques .carte__titre, .cpt-banques .carte__note { padding: 0 var(--space-lg); }
.cpt-banques .carte__note { margin-bottom: var(--space-md); }
.cpt-banques .cpt-defile { margin: 0; }
.cpt-banques .cpt-banque { background: var(--canvas); box-shadow: 0 1px 2px rgba(25,20,62,.08), 0 8px 18px -10px rgba(25,20,62,.28); border: 1px solid var(--hairline-alpha); }