/* Tableau de bord — bloc « année en cours, mois par mois » (07/10/2026).
   Classes préfixées `dba-` : ce bloc ne partage rien avec le reste de
   app.css, pour pouvoir évoluer sans effet de bord. */

.dba {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* La clé de lecture, posée avant le premier chiffre : sans elle, une courbe
   qui s'arrête se lit comme une chute à zéro. */
.dba-avis {
  margin: 0;
  padding: 11px 14px;
  border-left: 3px solid #d2802d;
  background: var(--sf);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.55;
}

.dba-avis strong { color: var(--t); font-weight: 600; }

.dba-carte {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  overflow: hidden;
}

.dba-tete {
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--bd);
}

.dba-tete h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t);
  letter-spacing: .01em;
}

.dba-sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--t3);
}

.dba-toile {
  position: relative;
  height: 280px;
  padding: 14px 16px 10px;
}

.dba-large .dba-toile { height: 360px; }

/* Deux colonnes sur grand écran : les quatre cartes de détail se lisent par
   paires (CA face aux dépenses, marge brute face à marge nette). */
.dba-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .dba-grille { grid-template-columns: 1fr; }
  .dba-toile { height: 240px; padding: 10px 8px 6px; }
  .dba-large .dba-toile { height: 300px; }
}