/* Hors fil — mes blocages : bilan, carte à partager, comptes indiqués. */

.bilan {
  display: grid; gap: 1.5rem; margin-top: 2rem; align-items: center;
  background: var(--nuit); color: var(--fond); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--ombre-haute);
}
@media (min-width: 52rem) { .bilan { grid-template-columns: minmax(12rem, auto) 1fr; gap: 2.5rem; } }
.bilan :focus-visible { outline-color: var(--accent-vif); }
.bilan__chiffre { display: grid; gap: .25rem; }
.bilan__nombre { font-size: clamp(3.5rem, 10vw, 5.5rem); line-height: 1; color: var(--accent-vif); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bilan__texte { font-weight: 700; font-size: 1.2rem; max-width: 14rem; line-height: 1.3; }
.bilan__corps { min-width: 0; }
.bilan__etat { margin: 0 0 .25rem; display: flex; align-items: center; gap: .6rem; color: var(--fond); }
.bilan__etat::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--encre-doux); }
.bilan__etat.est-a-jour::before { background: var(--accent-vif); border-color: var(--accent-vif); }
.bilan__resultat { margin: .5rem 0 0; color: var(--fond); }
.bilan__resultat:empty { display: none; }
.bilan__resultat.statut--ok::before { content: "✓ "; content: "✓ " / ""; color: var(--accent-vif); font-weight: 700; }
.bilan__suivre { margin: .25rem 0 0; font-weight: 700; }
.bilan__suivre a { color: var(--accent-vif); display: inline-flex; align-items: center; min-height: 44px; }
.bilan__suivre a:hover { color: var(--fond); }
.bilan .actions { margin: 1.25rem 0 1rem; }
.bilan .btn { border-color: var(--accent-vif); background: var(--accent-vif); color: var(--encre); }
.bilan .btn:hover { background: var(--fond); border-color: var(--fond); color: var(--encre); }
.bilan .btn--secondaire { background: transparent; color: var(--fond); border-color: var(--fond); }
.bilan .btn--secondaire:hover { background: var(--fond); color: var(--encre); }
.bilan .btn--discret { background: transparent; border-color: transparent; color: var(--fond); }
.bilan .btn--discret:hover { background: transparent; color: var(--accent-vif); border-color: transparent; }
.bilan .btn:focus-visible { outline-color: var(--accent-vif); }
.bilan__note { margin: 0; color: var(--encre-doux); font-size: 1rem; }

/* La carte */
.zone-carte { margin-top: var(--section); scroll-margin-top: 1rem; }
.zone-carte h2 { margin-top: 0; }
.zone-carte__cadre { max-width: 46rem; border-radius: var(--rayon-grand); overflow: hidden; box-shadow: var(--ombre-haute); background: var(--encre); }
.carte-image { display: block; width: 100%; height: auto; }
.zone-carte__note { color: var(--encre-2); font-size: 1rem; max-width: 46rem; }

/* Rien pour le moment */
.vide-perso { margin-top: 2rem; padding: clamp(1.5rem, 5vw, 3rem); background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; box-shadow: var(--ombre); max-width: 46rem; }
.vide-perso__signe { width: 3.5rem; height: 3.5rem; display: block; margin-bottom: 1.25rem; }
.vide-perso h2 { margin-top: 0; }
.vide-perso h2:focus { outline: none; }
.vide-perso .actions { margin-bottom: 0; }

/* Les comptes indiqués */
.perso { margin-top: var(--section); }
.perso > h2 { margin-top: 0; }
.perso > h2:focus { outline: none; }
.perso__plateforme { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 .75rem; font-size: 1.3rem; }
.perso__plateforme::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--trait); }
.perso__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 48rem) { .perso__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perso__liste li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: .35rem .4rem .35rem 1rem;
}
.perso__compte { display: grid; min-width: 0; line-height: 1.35; padding: .3rem 0; }
.perso__nom { font-weight: 700; overflow-wrap: anywhere; }
.perso__compte .identifiant { overflow-wrap: anywhere; }
.perso__retirer { flex: none; min-height: 44px; }