/* FLUX — budget, revenus, depenses, arbre du scenario
 *
 * Tranche 08 de public/styles.css, decoupe le 2026-08-24. Les fichiers sont
 * NUMEROTES parce que l'ordre de chargement compte : une regle plus bas l'emporte sur une
 * regle de meme portee plus haut. Ne pas reordonner les <link> de index.html.
 */
/* LE GABARIT DE LIGNE DE L'ONGLET FLUX (bloc 5)
   Les quatre familles — revenus d'investissement, activité & compléments, évolutions
   futures, dépenses — passaient chacune par sa propre structure : trois grilles, trois
   tailles de texte, trois places pour le montant. Elles partagent désormais `.flux-ligne`
   (public/champs/ligne-flux.js), et TOUTES ses colonnes existent même vides : une piste
   manquante décale ce qui suit, et c'est ce qui faisait qu'un montant ne tombait jamais au
   même endroit d'une famille a l'autre. */
.flux-liste, .flux-dated-list, .revenu-cards { display: flex; flex-direction: column; margin-bottom: 0.65rem; }

.flux-ligne { position: relative; border-bottom: 1px solid var(--border); transition: background-color 0.15s ease; }
.flux-ligne:last-child { border-bottom: none; }
.flux-ligne:hover { background: var(--bg-hover); }
.flux-ligne:has(.flux-ligne-detail:not([hidden])) { background: var(--bg-hover); }

/* Pastille posee sur la PREMIERE ligne (top fixe, pas 50 %) : elle ne bouge plus quand le
   detail se deplie et fait grandir la ligne. */
.flux-ligne::before {
  content: ''; position: absolute; left: 0.1rem; top: 0.95rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
}
.flux-ligne.is-revenu::before { background: var(--accent); }
.flux-ligne.is-depense::before { background: var(--red); }

/* Colonnes PROPORTIONNELLES, avec un minimum par colonne : en largeurs fixes, les cinq
   colonnes mangeaient 525 px des 584 px de la carte et il ne restait que 27 px au libellé,
   réduit à une lettre (mesuré à l'écran, pas supposé). Chaque colonne peut maintenant rendre
   de la place, et le libellé — la seule colonne qu'on lit vraiment — grandit avec la carte. */
.flux-ligne-corps {
  display: grid;
  grid-template-columns:
    24px minmax(7rem, 1.6fr) minmax(6rem, 1fr) minmax(6rem, 1fr) minmax(4rem, 0.6fr) 4.6rem;
  grid-template-areas: "fleche libelle quand montant taux actions";
  gap: 0.4rem; align-items: center; padding: 0.5rem 0.15rem 0.5rem 0.9rem;
  min-height: 3.2rem;
}
.flux-ligne-corps > .line-toggle { grid-area: fleche; }
.flux-ligne-libelle { grid-area: libelle; }
.flux-ligne-quand { grid-area: quand; }
.flux-ligne-montant { grid-area: montant; }
.flux-ligne-taux { grid-area: taux; }
.flux-ligne-actions { grid-area: actions; }
.flux-ligne-corps > div { min-width: 0; }
.flux-ligne-libelle { display: flex; align-items: center; gap: 0.3rem; }
/* Le libelle est le titre de la ligne : meme traitement pour les quatre familles (avant, la
   carte d'activite l'avait en gras sans bordure, la ligne datee en champ ordinaire). */
.flux-ligne-libelle input[type=text] {
  flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem;
  background: transparent; border: none; border-bottom: 1px solid transparent;
  color: var(--text-strong); padding: 0.15rem 0; border-radius: 0;
}
.flux-ligne-libelle input[type=text]:hover { border-bottom-color: var(--border); }
.flux-ligne-libelle input[type=text]:focus { outline: none; border-bottom-color: var(--gold); }
.flux-ligne-montant { justify-self: end; font-variant-numeric: tabular-nums; }
.flux-ligne-montant .revenu-net { font-weight: 700; color: var(--accent); font-size: 0.88rem; }
.flux-ligne-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.15rem; }
.flux-ligne label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
/* `min-width: 0` : sans lui, un champ impose sa largeur NATURELLE (~170 px pour un champ
   nombre) comme minimum de sa colonne, et la grille prend cette place au libellé — mesuré :
   la colonne du libellé tombait à 0 px dans une carte étroite. */
.flux-ligne input, .flux-ligne select {
  background: var(--card); padding: 0.32rem 0.45rem; font-size: 0.82rem;
  width: 100%; min-width: 0;
  transition: border-color 0.12s ease;
}

/* Ligne non modifiable : sa valeur vient de l'evenement qui la produit, et se change la-bas.
   Seul le gris le dit — pas de champ desactive, il n'y a pas de champ du tout. */
.flux-ligne.is-auto { color: var(--muted); font-size: 0.82rem; }
.flux-ligne.is-auto strong { color: var(--muted); font-weight: 600; }
/* Un revenu d'investissement reste VERT, même non modifiable : le gris de la ligne dit qu'on
   ne la saisit pas ici, il n'a pas à effacer la couleur de ce qu'elle représente. Les deux
   règles précédentes avaient éteint les montants verts de la liste des revenus automatiques
   (régression du bloc 5, signalée par Nicolas le 2026-08-29). */
.flux-ligne.is-auto strong.statut-ok { color: var(--accent); }
.flux-ligne.is-auto strong.statut-warn { color: var(--orange); }
/* Flux futur : estompe, mais pleinement modifiable. */
.flux-ligne.is-future { opacity: 0.55; }
.flux-ligne.is-future:hover { opacity: 0.85; }
/* Source eteinte : se repere sans avoir a la deplier, puisque la case Actif est dans le
   detail depuis le bloc 5. */
.flux-ligne.is-inactif { opacity: 0.5; }
.flux-ligne.is-inactif .flux-ligne-libelle input[type=text] { text-decoration: line-through; }

.flux-ligne-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0 0.15rem 0.6rem 2.05rem; }
/* `display:flex` d'auteur l'emporte sur le `[hidden]{display:none}` du navigateur : c'est le
   piege des huit boutons du bloc 9, ici desamorce des l'ecriture de la regle. */
.flux-ligne-detail[hidden] { display: none !important; }
.flux-ligne-detail .flux-dated-to[hidden] { display: none !important; }
.flux-ligne-detail > label { font-size: 0.72rem; }
.flux-ligne-detail > label input { width: auto; }
/* Le detail d'une source d'activite est une grille de champs : elle prend la ligne entiere
   du detail plutot que de s'aligner a cote de la date des flux dates. */
.flux-ligne-detail > .revenu-card-grid,
.flux-ligne-detail > .revenu-card-projet-hint,
.flux-ligne-detail > .revenu-card-linked-hint { flex: 1 1 100%; }
/* La fleche masquee garde sa piste (visibility, pas display) : retiree du flux, elle
   decalerait le libelle d'une colonne. */
.flux-ligne .line-toggle[hidden] { visibility: hidden; }

.flux-ligne .btn-flux-timeline { background: transparent; border-color: transparent; color: var(--muted); }
.flux-ligne .btn-flux-timeline:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--text-strong); }
.flux-ligne .btn-flux-del { background: transparent; border-color: transparent; color: var(--muted); }
.flux-ligne .btn-flux-del:hover { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red-text); }
.flux-mod-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--gold); color: var(--bg); font-size: 0.62rem; font-weight: 700;
  vertical-align: middle; flex: none;
}
/* Mention portee par une ligne non modifiable : « ce mois-ci », « deja deduite du loyer
   net ». Elle occupe la colonne « quand », qui serait vide autrement. */
.flux-ligne-mention { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
/* Les deux totaux de la colonne Depenses : le second (tout ce qui sort) est le chiffre
   nouveau, donc le plus visible des deux. */
.budget-depenses-totaux { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.budget-depenses-totaux #budget-depenses-total { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.budget-total-reel { font-size: 0.9rem; color: var(--text-strong); }
.budget-total-reel:empty { display: none; }
.flux-dated-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* Sous une certaine largeur DE LA CARTE (pas de la fenêtre : les deux colonnes de Flux sont
   étroites même sur un grand écran), la ligne se replie sur deux rangées plutôt que d'écraser
   le libellé. Le montant reste à droite, à la même place. */
.budget-section { container-type: inline-size; }
@container (max-width: 33rem) {
  /* Le detail d'une source suit : trois colonnes de champs n'entrent pas dans une carte
     etroite, meme sur un grand ecran. */
  .revenu-card-grid { grid-template-columns: 1fr 1fr; }
  .flux-ligne-corps {
    grid-template-columns: 24px minmax(0, 1fr) minmax(4.5rem, 6.5rem) 4.6rem;
    grid-template-areas:
      "fleche libelle montant actions"
      ".      quand   taux    .";
    row-gap: 0.3rem;
  }
}
@media (max-width: 720px) {
  .flux-ligne-corps {
    grid-template-columns: 24px minmax(0, 1fr) minmax(4.5rem, 6.5rem) 4.6rem;
    grid-template-areas:
      "fleche libelle montant actions"
      ".      quand   taux    .";
    row-gap: 0.3rem;
  }
}
.budget-section h2 { margin-bottom: 0.35rem; }
.revenu-cards { display: flex; flex-direction: column; margin-bottom: 0.65rem; }
.line-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--radius-input); width: 1.6rem; height: 1.6rem; font-size: 0.75rem; cursor: pointer;
  flex: 0 0 auto; line-height: 1; transition: color 0.12s ease, border-color 0.12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.line-toggle svg { transition: transform 0.15s ease; }
.line-toggle:hover { color: var(--text-strong); border-color: var(--border-strong); }
.line-toggle.expanded { color: var(--gold); border-color: var(--gold); }
.line-toggle.expanded svg { transform: rotate(90deg); }
.revenu-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem;
}
@media (max-width: 720px) { .revenu-card-grid { grid-template-columns: 1fr 1fr; } }
.revenu-card-grid label { font-size: 0.72rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.15rem; }
.revenu-card-grid input, .revenu-card-grid select {
  background: var(--card); border-radius: var(--radius-xs); padding: 0.3rem 0.4rem; font-size: 0.82rem;
}
/* Les cases à cocher de la carte : la grille empile libellé et champ en colonne, une case
   se lit en ligne. Vaut pour « Actif » comme pour « Somme imposable ». */
.revenu-card-grid label.revenu-case { flex-direction: row; align-items: center; gap: 0.35rem; }
.revenu-card-grid label.span-2 { grid-column: span 2; }
.revenu-card-grid label.span-3 { grid-column: span 3; }
.revenu-net-detail { font-size: 0.7rem; color: var(--muted); grid-column: span 2; align-self: center; }
.revenu-card-projet-hint { font-size: 0.72rem; color: var(--orange); margin-top: 0.35rem; }
.revenu-card-linked-hint { font-size: 0.7rem; color: var(--muted); margin-top: 0.35rem; }
.tree-add-row select { flex: 1; padding: 0.4rem; font-size: 0.82rem; }

.modal h2 { margin: 0 0 0.35rem; }
.modal-body label { display: block; font-size: 0.75rem; color: var(--muted); margin: 0.55rem 0 0.15rem; }
.modal-body label:has(input[type="checkbox"]) { display: flex; flex-direction: row; align-items: center; gap: 0.35rem; }
.modal-body input, .modal-body select, .modal-body textarea { width: 100%; padding: 0.4rem; }
/* Annule le width:100% de la regle ci-dessus, PAS "auto" : une case personnalisee
   (appearance:none, Bloc 8) n'a plus de taille intrinseque a laquelle revenir. */
.modal-body input[type="checkbox"] { width: 1.1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.event-row {
  display: grid; grid-template-columns: 1fr 70px 50px 130px 1fr auto auto;
  gap: 0.35rem; margin-bottom: 0.35rem; align-items: center;
}
.projet-form-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.5rem;
}
.projet-form-grid label { font-size: 0.75rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.2rem; }
.projet-form-grid label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
/* `display: flex` d'auteur sur CHAQUE label l'emporte sur le `[hidden] { display: none }` de
   la feuille du navigateur (même piège que `.modal-grid label[hidden]`) : sans cette garde,
   masquer un champ sans objet — rendement d'un compte courant, risque d'un livret, cf.
   `src/epargne/capacites-enveloppe.js` — resterait sans le moindre effet. */
.projet-form-grid label[hidden] { display: none !important; }
.projet-form-grid input, .projet-form textarea {
  background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-strong);
  border-radius: var(--radius-input); padding: 0.35rem 0.45rem; font-size: 0.82rem;
}
.projet-form label.full { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.35rem; }
.projet-form label.full textarea { width: 100%; margin-top: 0.25rem; font-family: monospace; }
.projet-row {
  border: 1px solid var(--border); border-radius: var(--radius-input); padding: 0.5rem 0.65rem;
  margin-bottom: 0.4rem; font-size: 0.82rem;
}
.projet-row summary { cursor: pointer; font-weight: 500; }
.projet-row .mini-cf { font-size: 0.72rem; color: var(--muted); margin-top: 0.35rem; }
@media (max-width: 900px) { .projet-form-grid { grid-template-columns: 1fr 1fr; } }
.scenario-tree-panel { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-6) - var(--space-6)); overflow-y: auto; }
.tree-section { margin-bottom: 0.85rem; }
.tree-section-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0.5rem 0 0.35rem; font-weight: 600;
}