/* =========================================================================
   Écrans — ce qui n'appartient qu'à un seul endroit de l'application.
   =========================================================================
   Tout ce qui est réutilisable vit dans components.css. Ici, seulement les
   compositions propres à un écran : la salutation du tableau de bord, la
   pastille de santé, la carte d'enveloppe, la carte de projet.
   ========================================================================= */

/* =========================================================================
   Tableau de bord
   ========================================================================= */

/* ── La salutation ───────────────────────────────────────────────────────
   Le premier élément de l'application n'est pas un chiffre mais une phrase.
   « Il vous reste 1 240 € pour 13 jours » se comprend instantanément ;
   « Solde : 1 240 € » demande un calcul mental que personne ne fait.
   C'est le cœur du parti pris : l'application parle, elle n'affiche pas. */

.salutation {
  margin-bottom: var(--e4);
  /* Le bouton d'aide se cale en haut à droite plutôt que dans le flux : la
     salutation est un bloc de texte de hauteur variable, et l'y insérer le
     laissait orphelin sur une ligne à lui. */
  position: relative;
  padding-right: 3rem;
}
.salutation .aide-bouton {
  position: absolute;
  top: 0;
  right: 0;
}
.salutation-bonjour {
  font-size: var(--t-petit);
  font-weight: var(--graisse-moyenne);
  color: var(--encre-tenue);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.salutation-phrase {
  font-size: var(--t-titre);
  font-weight: var(--graisse-forte);
  letter-spacing: -.025em;
  line-height: 1.25;
  max-width: 26ch;
  margin-top: 2px;
}
.salutation-phrase em {
  font-style: normal;
  color: var(--accent);
}
.salutation-appui {
  margin-top: var(--e1);
  color: var(--encre-douce);
  max-width: 56ch;
}

/* ── La carte maîtresse ──────────────────────────────────────────────────
   Reste à vivre, jauge du mois, et les deux chiffres qui l'expliquent. */

.carte-maitresse {
  background: linear-gradient(160deg,
      color-mix(in oklab, var(--accent) 10%, var(--surface)),
      var(--surface) 62%);
  border-color: color-mix(in oklab, var(--accent) 22%, var(--trait));
}
.reste-a-vivre {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  flex-wrap: wrap;
}
.reste-a-vivre .chiffre-heros { color: var(--encre); }
.reste-jours {
  font-size: var(--t-base);
  color: var(--encre-douce);
}
.rythme-mois { margin-top: var(--e3); }
.rythme-ligne {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-petit);
  color: var(--encre-douce);
  margin-bottom: 5px;
}

/* ── La note de santé ────────────────────────────────────────────────────
   Un anneau plutôt qu'une barre : une note globale n'a pas de direction,
   elle a un niveau de remplissage. Le chiffre est au centre, la phrase en
   dessous, et le détail des quatre critères se déplie à la demande. */

.sante { display: flex; align-items: center; gap: var(--e3); }
.sante-anneau { position: relative; flex: none; width: 104px; height: 104px; }
.sante-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sante-piste { fill: none; stroke: var(--surface-creuse); stroke-width: 9; }
.sante-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--sortie);
}
.sante-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: var(--graisse-forte);
  letter-spacing: -.03em;
}
.sante-note span { font-size: var(--t-petit); color: var(--encre-tenue); font-weight: var(--graisse-normale); }
.sante-texte { flex: 1; min-width: 0; }
.sante-criteres { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.sante-critere-entete {
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  font-size: var(--t-petit);
  margin-bottom: 4px;
}
.sante-critere-points { color: var(--encre-tenue); font-variant-numeric: tabular-nums; }
.sante-critere-detail { font-size: var(--t-petit); color: var(--encre-tenue); margin-top: 4px; }

@container (max-width: 380px) {
  .sante { flex-direction: column; align-items: flex-start; }
}

/* ── Les observations ────────────────────────────────────────────────────
   Chaque observation porte un ton, une icône et une phrase qui explique
   pourquoi elle apparaît. Jamais d'alerte sans raison affichée. */

.observations { display: flex; flex-direction: column; gap: var(--e1); }
.observation {
  display: flex;
  gap: var(--e2);
  padding: var(--e2);
  border-radius: var(--r-moyen);
  background: var(--surface-creuse);
  border-left: 3px solid var(--trait-marque);
}
.observation-bien     { background: var(--bien-voile);      border-left-color: var(--bien); }
.observation-watch    { background: var(--attention-voile); border-left-color: var(--attention-vif); }
.observation-critical { background: var(--critique-voile);  border-left-color: var(--critique); }
.observation-icone { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.observation-titre { font-weight: var(--graisse-moyenne); }
.observation-detail { font-size: var(--t-petit); color: var(--encre-douce); margin-top: 1px; }

/* =========================================================================
   Enveloppes
   ========================================================================= */

.enveloppe {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e3);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  transition: border-color var(--v-court) var(--sortie), box-shadow var(--v-court) var(--sortie);
}
.enveloppe:hover { border-color: var(--trait-marque); box-shadow: var(--ombre-1); }
/* Une enveloppe dépassée se signale par sa bordure, pas par un fond rouge
   criard : l'information passe, la culpabilisation non. */
.enveloppe.depassee { border-color: color-mix(in oklab, var(--critique) 45%, var(--trait)); }

.enveloppe-entete { display: flex; align-items: center; gap: var(--e1); }
.enveloppe-icone { font-size: 1.1rem; line-height: 1; }
.enveloppe-nom { font-weight: var(--graisse-moyenne); flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enveloppe-chiffres {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e1);
}
.enveloppe-depense { font-size: var(--t-moyen); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
.enveloppe-plafond { font-size: var(--t-petit); color: var(--encre-tenue); font-variant-numeric: tabular-nums; }
.enveloppe-reste { font-size: var(--t-petit); color: var(--encre-douce); }
.enveloppe-reste.negatif { color: var(--critique); font-weight: var(--graisse-moyenne); }
.enveloppe-report {
  font-size: var(--t-micro);
  color: var(--accent);
  font-weight: var(--graisse-moyenne);
}

/* =========================================================================
   Projets
   ========================================================================= */

.projet {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-1);
  container-type: inline-size;
}
.projet-entete { display: flex; align-items: flex-start; gap: var(--e2); }
.projet-titre { flex: 1; min-width: 0; }
.projet-nom { font-size: var(--t-moyen); font-weight: var(--graisse-forte); letter-spacing: -.015em; }
.projet-echeance { font-size: var(--t-petit); color: var(--encre-tenue); }

.projet-montants {
  display: flex;
  align-items: baseline;
  gap: var(--e1);
  font-variant-numeric: tabular-nums;
}
.projet-epargne { font-size: var(--t-grand); font-weight: var(--graisse-forte); }
.projet-cible { font-size: var(--t-petit); color: var(--encre-tenue); }

/* Deux jauges superposées : l'argent réuni, et les étapes franchies. Un
   projet financé mais dont rien n'est fait n'est pas un projet terminé. */
.projet-jauges { display: flex; flex-direction: column; gap: var(--e1); }
.projet-jauge-nom {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-micro);
  color: var(--encre-tenue);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

.projet-conseil {
  font-size: var(--t-petit);
  color: var(--encre-douce);
  padding: var(--e1) var(--e2);
  background: var(--surface-creuse);
  border-radius: var(--r-petit);
}

.jalons { display: flex; flex-direction: column; gap: 2px; }
.jalon {
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: 5px var(--e1);
  border-radius: var(--r-petit);
  width: 100%;
  text-align: left;
  font-size: var(--t-petit);
  transition: background var(--v-court) var(--sortie);
}
.jalon:hover { background: var(--surface-creuse); }
.jalon-case {
  width: 18px; height: 18px;
  flex: none;
  border-radius: 6px;
  border: 1.5px solid var(--trait-marque);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background var(--v-court) var(--sortie), border-color var(--v-court) var(--sortie),
              color var(--v-court) var(--sortie);
}
.jalon.fait .jalon-case {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-encre);
}
.jalon.fait .jalon-nom { color: var(--encre-tenue); text-decoration: line-through; }
.jalon-nom { flex: 1; min-width: 0; }

/* Une pulsation brève quand une étape est cochée. Le seul moment de
   l'application où l'on se permet de fêter quelque chose. */
@keyframes pulsation-reussite {
  0%   { box-shadow: 0 0 0 0 var(--accent-halo); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.jalon.vient-de-basculer .jalon-case { animation: pulsation-reussite 700ms var(--sortie); }

/* =========================================================================
   Équilibrage du couple
   ========================================================================= */

.equilibrage {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.equilibrage-membre {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e3);
  border-radius: var(--r-grand);
  background: color-mix(in oklab, var(--teinte) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--teinte) 25%, transparent);
}
.equilibrage-nom {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-weight: var(--graisse-moyenne);
}
.equilibrage-solde {
  font-size: var(--t-grand);
  font-weight: var(--graisse-forte);
  font-variant-numeric: tabular-nums;
}
.equilibrage-detail { font-size: var(--t-petit); color: var(--encre-douce); }

.equilibrage-verdict {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-moyen);
  background: var(--accent-voile);
  color: var(--encre);
}
.equilibrage-verdict.soldes { background: var(--bien-voile); }

/* =========================================================================
   Prévisionnel
   ========================================================================= */

.faisceau-legende {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  font-size: var(--t-petit);
  color: var(--encre-douce);
  margin-top: var(--e2);
}
.faisceau-bande {
  width: 22px; height: 12px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--sequentiel-450) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--sequentiel-450) 40%, transparent);
}
.faisceau-trait { width: 22px; height: 2px; border-radius: 2px; background: var(--sequentiel-450); }

.risque {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-moyen);
  background: var(--surface-creuse);
}
.risque.eleve { background: var(--critique-voile); }
.risque.modere { background: var(--attention-voile); }
.risque.faible { background: var(--bien-voile); }
.risque-valeur { font-size: var(--t-grand); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Transactions
   ========================================================================= */

.barre-filtres {
  display: flex;
  gap: var(--e1);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--e3);
}
.barre-filtres .champ { width: auto; min-width: 130px; }
.barre-filtres .recherche { flex: 1; min-width: 180px; }

.tx-libelle { display: flex; align-items: center; gap: var(--e1); min-width: 0; }
.tx-icone {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-creuse);
  font-size: 1rem;
}
.tx-nom { font-weight: var(--graisse-moyenne); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-sous { font-size: var(--t-petit); color: var(--encre-tenue); }

/* Sur téléphone, le tableau devient une liste de cartes : sept colonnes ne
   tiennent pas sur 375 px, et un tableau qu'on fait défiler latéralement
   est illisible. */
@media (max-width: 720px) {
  .tableau-tx thead { display: none; }
  .tableau-tx tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--e2);
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--trait-cheveu);
  }
  .tableau-tx td { display: block; padding: 0; border: none; }
  .tableau-tx .col-libelle { grid-row: 1 / 3; }
  .tableau-tx .col-montant { text-align: right; font-size: var(--t-moyen); }
  .tableau-tx .col-date, .tableau-tx .col-qui, .tableau-tx .col-type { display: none; }
  .tableau-tx .col-actions { grid-row: 1 / 3; align-self: center; }
}

/* =========================================================================
   Réglages
   ========================================================================= */

.reglage-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--trait-cheveu);
  flex-wrap: wrap;
}
.reglage-ligne:last-child { border-bottom: none; }
.reglage-texte { flex: 1; min-width: 200px; }
.reglage-nom { font-weight: var(--graisse-moyenne); }
.reglage-aide { font-size: var(--t-petit); color: var(--encre-tenue); }

.nuancier { display: flex; gap: var(--e1); flex-wrap: wrap; }
.nuance {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: relative;
  transition: transform var(--v-court) var(--ressort);
}
.nuance:hover { transform: scale(1.12); }
.nuance[aria-pressed="true"] {
  border-color: var(--encre);
  transform: scale(1.06);
}
.nuance[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.zone-danger {
  border-color: color-mix(in oklab, var(--critique) 30%, var(--trait));
  background: color-mix(in oklab, var(--critique) 4%, var(--surface));
}

/* =========================================================================
   Graphiques
   ========================================================================= */

.graphique { width: 100%; overflow: visible; }
.graphique text {
  font-family: var(--police);
  font-size: var(--t-micro);
  fill: var(--encre-tenue);
}
.graphique .axe-ligne { stroke: var(--axe); stroke-width: 1; }
.graphique .grille-ligne { stroke: var(--grille); stroke-width: 1; }
.graphique .etiquette-directe {
  font-size: var(--t-petit);
  font-weight: var(--graisse-moyenne);
  fill: var(--encre);
}
/* Un anneau de la couleur de la surface autour des marques superposées :
   deux points qui se chevauchent restent distincts. */
.graphique .marque { stroke: var(--surface); stroke-width: 2; }
.graphique .curseur { stroke: var(--encre-tenue); stroke-width: 1; stroke-dasharray: 3 3; }

/* Les segments d'un anneau se séparent d'un filet de deux pixels — mais ce
   filet est creusé dans l'arc lui-même par `anneau()`, pas peint par-dessus.

   Ne remettez ici ni `stroke` ni `stroke-width` : une déclaration CSS l'emporte
   toujours sur un attribut de présentation, si bien que ces deux lignes
   repeignaient chaque part de la couleur du fond, en deux pixels de large.
   L'anneau devenait invisible — celui du tableau de bord comme celui du
   patrimoine — sans qu'aucune erreur ne soit levée. */
.anneau-segment {
  transition: opacity var(--v-court) var(--sortie);
  cursor: pointer;
}
.anneau-segment.attenue { opacity: .35; }
.anneau-centre-valeur { font-size: 1.25rem; font-weight: var(--graisse-forte); fill: var(--encre); }
.anneau-centre-etiquette { font-size: var(--t-petit); fill: var(--encre-tenue); }