/* ENVELOPPES — crypto, comptes, cours, file a confirmer
 *
 * Tranche 11 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.
 */
.crypto-sync-modal { max-width: 720px; display: flex; flex-direction: column; gap: 0.9rem; }
.crypto-sync-add-form { display: flex; flex-direction: column; gap: 0.6rem; }
/* Encore le piège de .modal-grid : sans ça, les 3 formulaires d'ajout restent affichés
   sous les 3 cartes de choix malgré leur attribut hidden, et showScreen() n'a aucun effet. */
.crypto-sync-add-form[hidden] { display: none !important; }
.crypto-sync-add-form input, .crypto-sync-add-form select {
  padding: 0.5rem 0.7rem; font-size: 0.9rem; width: 100%;
}
.crypto-sync-source-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.1rem; border-bottom: 1px solid var(--border);
}
.crypto-sync-source-row:last-child { border-bottom: none; }
.crypto-sync-source-status { font-size: 0.7rem; margin-left: 0.4rem; }
.crypto-sync-source-status.ok { color: var(--accent); }
.crypto-sync-source-status.error { color: var(--red); }
.crypto-sync-source-status.partiel { color: var(--warn); cursor: help; }
.crypto-sync-back { align-self: flex-start; margin-bottom: 0.2rem; }
.crypto-sync-manual-title { font-size: 0.82rem; color: var(--muted); margin: 0; }
.crypto-sync-manual-line { display: flex; gap: 0.4rem; align-items: center; }
.crypto-sync-manual-line input { flex: 1; }
.crypto-sync-source-actions { display: flex; gap: 0.4rem; }
/* Ligne non rafraîchie par la dernière synchro (source en erreur) : sans ce repère, le total
   de l'enveloppe mélange deux dates sans que rien ne le signale. */
.ligne-perimee { color: var(--warn); cursor: help; }
/* Bloc 4 — vue « par compte » du détail d'une enveloppe : l'en-tête d'un compte se détache
   de ses positions, qui sont décalées vers la droite pour se lire comme un sous-ensemble et
   non comme des comptes de plus. */
.compte-row td { border-top: 1px solid var(--border); padding-top: 0.55rem; }
.compte-row:first-child td { border-top: none; }
.compte-ligne-row td:nth-child(2) { padding-left: 1.1rem; }
.compte-actions { display: flex; gap: 0.35rem; justify-content: flex-end; }

.env-detail-mode-switch { display: flex; gap: 0.3rem; }
.env-detail-mode-switch[hidden] { display: none; }

/* Détail d'une enveloppe (2026-08-21) — le montant total ouvre l'écran, hors carte : c'est
   la seule information qu'on vient chercher en un coup d'œil. */
.env-detail-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0 0.2rem;
}
.env-detail-hero-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.env-detail-hero-montant {
  font-size: 2.4rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em;
}
.env-detail-hero .hint { margin: 0.25rem 0 0; }
.env-detail-hero-pv { font-size: 0.95rem; font-weight: 600; text-align: right; }
/* La plus-value et « Ajouter un compte » partagent le côté droit du bandeau, empilés et
   alignés à droite : le bouton se lit à hauteur du solde, là où le regard est déjà. */
.env-detail-hero-cote {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
}
@media (max-width: 640px) {
  .env-detail-hero-montant { font-size: 1.8rem; }
  .env-detail-hero-pv { text-align: left; }
}

/* La courbe d'évolution vit dans un conteneur `.env-charts`, dont la règle générique bride
   les canvas à 260 px pour les camemberts — une courbe temporelle a besoin de toute la
   largeur, d'où cet override explicite plutôt qu'un assouplissement de la règle générique. */
/* Jamais plus haut que large : même règle que `.patrimoine-chart-wrap`. */
.env-evolution-chart { position: relative; width: 100%; aspect-ratio: 1; min-height: 0; max-height: 260px; }
.env-charts .env-evolution-chart canvas {
  max-width: 100%; max-height: 260px; width: 100% !important; margin: 0;
}

/* Rangée du haut de la Composition (2026-09-16) : évolution + répartition actuelle. Même
   partage 50/50 que la rangée du bas (.chart-grid) et non plus 1.25fr/1fr — en largeur
   normale, les deux rangées s'alignent verticalement (évolution au-dessus de versement,
   actuelle au-dessus de cible), et la répartition actuelle gagne la largeur qu'y perdait la
   courbe.
   UN SEUL SEUIL DE REPLI POUR TOUT L'ÉCRAN (2026-09-17) : celui, sur la FENÊTRE, que porte
   déjà `.chart-grid` — classe partagée par tout le produit (03-vue-ensemble.css,
   `@media (max-width: 900px)`). Une première version essayait un `@container` sur la carte
   pour `.chart-grid-top`, propre à cet écran ; les deux seuils divergeant selon la largeur
   de la barre latérale, la grille du bas se repliait parfois sans que l'ordre suive (mesuré
   le 2026-09-17 : fenêtre 865px, carte 826px). Un seul mécanisme, dupliqué nulle part,
   referme cet écart à la source. */
.env-detail-composition { display: flex; flex-direction: column; gap: 0.85rem; }
/* MÊME HAUTEUR pour l'évolution et la répartition actuelle (demande du 2026-09-28). Étirée
   seule, la carte Évolution gardait un grand vide sous sa courbe dès que la légende voisine
   était longue (une crypto à 19 lignes, constaté le 2026-09-17) : c'est donc la COURBE qui
   prend la hauteur gagnée. Le canevas est posé en absolu dans sa boîte : Chart.js mesure la
   boîte, et le canevas ne peut plus la pousser en retour. */
.chart-grid[hidden], .chart-grid > .card[hidden] { display: none !important; }
.chart-grid:has(> .card[hidden]) { grid-template-columns: 1fr; }
.chart-grid-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; align-items: stretch; }
.evolution-card { display: flex; flex-direction: column; }
.evolution-card .env-evolution-chart { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 260px; }
.env-charts .evolution-card .env-evolution-chart canvas { position: absolute; inset: 0; max-height: none; }
.env-detail-composition .chart-grid { align-items: start; }
@media (max-width: 900px) {
  .chart-grid-top, .env-detail-composition .chart-grid { grid-template-columns: 1fr; }
  /* Seule sur sa rangée, la courbe n'a plus de voisine à égaler : elle reprend la règle
     commune (jamais plus haute que large) et sa carte la suit. */
  .evolution-card .env-evolution-chart { flex: none; aspect-ratio: 1; min-height: 0; max-height: 260px; }
  /* Empilées, cible passe AU-DESSUS du versement (demande de Nicolas, 2026-09-17) — inverse
     de l'ordre côte à côte (versement à gauche, cible à droite, cf. balisage). `order` sur
     des items de grille suffit, pas besoin de toucher le DOM. */
  .chart-versement { order: 2; }
  .chart-cible { order: 1; }
}

/* Les actions de la Composition sont sous le tableau, alignées à DROITE (2026-09-10) : le
   bouton « Modifier » était en tête de section, avant même qu'on ait vu ce qu'il y a à
   modifier. On le rencontre désormais une fois la lecture faite. */
.env-detail-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.env-detail-actions[hidden] { display: none; }

/* Bandeau « ces lignes ne suivent aucun cours ». Ton d'AVERTISSEMENT et non d'erreur : rien
   n'est cassé, il manque un rattachement. `:empty` le fait disparaître quand il est vidé,
   selon la convention du dépôt (une bande vide ne se dessine pas). */
.env-rattacher {
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-input);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  font-size: 0.82rem;
}
.env-rattacher[hidden], .env-rattacher:empty { display: none; }
.env-rattacher-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: space-between; }
.env-rattacher-liste { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.env-rattacher-ligne { display: flex; align-items: baseline; gap: 0.5rem; }
.env-rattacher-ligne label { display: flex; align-items: baseline; gap: 0.45rem; cursor: pointer; }
.env-rattacher-vers { color: var(--muted); }
.env-rattacher-nom { color: var(--text-strong); }
.env-rattacher-actions { margin-top: 0.6rem; display: flex; gap: 0.4rem; justify-content: flex-end; }

/* Bandeau « total des % cible > 100 » (2026-09-16) : depuis que l'édition d'un % cible
   n'écrête plus les lignes suivantes (applyPendingEcretage, src/epargne/allocations.js),
   ce bandeau + son bouton sont le seul rappel qu'un ajustement reste à faire — un geste
   volontaire, jamais automatique. Même ton que .env-rattacher : un avertissement, pas une
   erreur. */
.env-cible-banner {
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-input);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  font-size: 0.82rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.env-cible-banner[hidden] { display: none !important; }
.env-cible-banner-msg { display: flex; align-items: center; gap: 0.4rem; }
.env-cible-banner-msg strong { color: var(--warn); font-variant-numeric: tabular-nums; }

/* Séparateur de groupe dans la Composition : un filet vertical porte la même teinte que les
   filets horizontaux du tableau, il ne crée donc pas un second langage visuel. Posé à GAUCHE
   de la colonne qui OUVRE un groupe : c'est la même colonne à chaque rendu, que les colonnes
   optionnelles (quantité, prix, code) soient là ou non. */
#table-env-detail th.env-sep, #table-env-detail td.env-sep { border-left: 1px solid var(--border); }

/* Variation d'un cours : le vert et le rouge du produit, jamais un hex à part. Le signe
   « + » est écrit dans la cellule, la couleur n'est donc pas la seule porteuse du sens. */
td.env-var { white-space: nowrap; }
td.env-var.var-hausse { color: var(--accent); }
td.env-var.var-baisse { color: var(--red); }
/* Saisie directe dans le tableau des comptes manuels : les champs doivent se lire comme des
   valeurs, pas comme un formulaire posé par-dessus le tableau. */
.compte-ligne-input {
  width: 100%; max-width: 8.5rem; padding: 0.2rem 0.35rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: inherit; font: inherit; text-align: right;
}
.compte-ligne-input:hover { border-color: var(--border); }
.compte-ligne-input:focus { border-color: var(--accent); background: var(--bg); outline: none; }
.compte-ligne-input.compte-ligne-label { text-align: left; max-width: 12rem; }
.compte-ligne-nouvelle td { opacity: 0.75; }

/* Recherche de titre à la saisie d'une position : la liste se superpose au tableau plutôt
   que de le pousser vers le bas, sinon chaque frappe ferait sauter les lignes en dessous. */
.cours-suggestions {
  position: absolute; z-index: 30; margin-top: 0.15rem;
  min-width: 15rem; max-width: 22rem; max-height: 14rem; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.cours-suggestions[hidden] { display: none; }
.compte-ligne-nouvelle td { position: relative; }
.cours-suggestion {
  display: flex; flex-direction: column; gap: 0.1rem; width: 100%;
  padding: 0.4rem 0.55rem; border: none; background: transparent;
  color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.cours-suggestion:hover, .cours-suggestion:focus-visible { background: var(--bg-hover); outline: none; }
.cours-suggestion-label { font-size: 0.82rem; color: var(--text-strong); }
.cours-suggestion-meta { font-size: 0.72rem; color: var(--muted); }
/* Suggestion crypto : l'icône officielle du jeton à gauche, le nom et le ticker à droite. */
.cours-suggestion-crypto { flex-direction: row; align-items: center; gap: 0.5rem; }
.cours-suggestion-crypto .cours-suggestion-texte { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cours-suggestion-icone { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-hover); }

/* Exposition par actif : les lignes de provenance sont décalées et atténuées, pour se lire
   comme le détail de la ligne au-dessus et non comme des actifs supplémentaires. */
.exposition-detail-row td { color: var(--muted); font-size: 0.82rem; }
.exposition-detail-row td:nth-child(2) { padding-left: 1.2rem; }
.exposition-detail-row[hidden] { display: none; }
.btn-exposition-detail.is-open { border-color: var(--accent); color: var(--accent-text); }
/* Une ligne agrégée à partir de plusieurs comptes : signalée dans la vue par actif, sinon
   elle se lit comme une position unique — ce qu'elle n'est pas (contrats non fongibles). */
/* A1b — bandeau « À confirmer » : visible sans être bloquant. Bordure d'accent plutôt que
   couleur d'alerte : ce n'est pas une erreur, juste une question en attente. */
/* Même habit que l'appel à ranger de Flux actuel : l'or dit « à faire ». */
.a-confirmer-panel { border-left: 4px solid var(--gold); background: var(--gold-soft); }
.a-confirmer-panel[hidden] { display: none; }
.bandeau-a-faire { border-left: 4px solid var(--gold); background: var(--gold-soft); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bandeau-a-faire p { margin: 0; flex: 1 1 20rem; }
.bandeau-a-faire:empty { display: none; }
.confirmer-head { margin-bottom: 0.7rem; }
.confirmer-head h2 { margin: 0 0 0.2rem; }
.confirmer-head .hint { margin: 0; }
.confirmer-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  padding: 0.55rem 0; border-top: 1px solid var(--border);
}
.confirmer-item-texte { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.confirmer-item-label { font-size: 0.9rem; color: var(--text-strong); font-weight: 500; }
.confirmer-item-meta { font-size: 0.75rem; color: var(--muted); }
.confirmer-item-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
/* La question posée par un bouton (« reporter à quand ? ») s'ouvre SOUS la ligne, en pleine
   largeur : la ligne est en flex-wrap, donc flex-basis 100% la met seule sur son rang sans
   toucher à ce qui précède. display:flex l'emporterait sur la règle UA [hidden] — même
   piège que .modal-overlay[hidden], d'où le !important. */
.confirmer-item-sousligne {
  flex-basis: 100%; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding-top: 0.45rem;
}
.confirmer-item-sousligne[hidden] { display: none !important; }
.confirmer-item-sousligne .hint { margin: 0; }
.confirmer-erreur { font-size: 0.8rem; color: var(--red); }
/* La répartition d'un paiement entre les comptes : une ligne par compte, le montant à droite. */
.confirmer-repartition { flex: 0 0 100%; display: flex; flex-direction: column; gap: 0.4rem; }
.confirmer-repartition .btn { align-self: flex-start; }
.confirmer-poche { max-width: 40rem; display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.confirmer-poche-nom { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; color: var(--text-strong); }
.confirmer-poche-nom small { font-size: 0.72rem; color: var(--muted); }
.confirmer-poche-ajour { flex: none; display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
.confirmer-poche input[type="number"] { flex: none; width: 8rem; min-width: 0; text-align: right; }

.ligne-multi-compte {
  font-size: 0.68rem; font-weight: 600; cursor: help;
  padding: 0.1rem 0.35rem; border-radius: 999px;
  color: var(--muted); background: var(--bg-hover);
}

/* Marqueur d'une ligne cotée automatiquement, à distinguer d'un montant saisi une fois. */
.ligne-cotee {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.1rem 0.35rem; border-radius: 999px;
  color: var(--accent-text); background: var(--accent-soft);
}

/* Fenêtre « Gérer les enveloppes » — remplace la carte du même nom, qui vivait tout en bas
   du sous-panneau Vue macro. Deux sections : enveloppes alimentées par une source connectée,
   et celles dont l'encours est saisi à la main. */
.env-manage-modal { max-width: 760px; }
/* Épargne disponible et ordre de retrait : un résumé sur la page, les réglages en fenêtre. */
.env-reglages-grid { align-items: stretch; }
.env-reglage-resume { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text); line-height: 1.45; }
.env-reglage-modal { max-width: 560px; }
.env-reglage-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
/* Une case de saisie et son unité (« % », « € ») restent sur une ligne : l'unité passait sous
   la case dès que la fenêtre se resserrait. */
.cellule-saisie { white-space: nowrap; }
#table-macro .dca-input { width: 4.5rem; }
.env-manage-section { margin-top: 1rem; }
.env-manage-section-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 0 0 0.4rem;
}
.env-manage-item { margin-bottom: 0.35rem; }
/* Un bloc par enveloppe, assez haut pour laisser respirer son image (2026-10-14) : le nom,
   la description du type, les comptes connectés. */
.env-bloc {
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card-inner);
}
.env-bloc > .env-manage-ligne { min-height: 4.5rem; padding: 0.7rem 0.75rem; border: 0; }
.env-bloc > .env-manage-ligne:hover { background: transparent; }
.env-bloc:hover { border-color: var(--border-strong); }
.env-manage-nom .tree-label { font-size: 1rem; font-weight: 600; color: var(--text-strong); }
.env-bloc-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.35; margin-top: 0.1rem; }
.env-bloc-connectes { font-size: 0.78rem; color: var(--accent-text); margin-top: 0.25rem; }
.env-bloc .env-manage-comptes { padding: 0 0.75rem 0.6rem; }
/* Une ligne d'enveloppe : chevron, jeton, nom (qui ouvre la fiche), alerte éventuelle, puis
   les deux seuls contrôles visibles. Le nom prend la place restante et se tronque plutôt que
   de pousser les boutons à la ligne, sinon la hauteur des lignes varierait d'une enveloppe à
   l'autre. */
.env-manage-ligne {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.35rem; border-radius: var(--radius-input);
  border: 1px solid transparent;
}
.env-manage-ligne:hover { background: var(--bg-hover); border-color: var(--border); }
.env-manage-item.is-inactive .env-manage-nom { opacity: 0.6; }
.env-manage-chevron, .env-manage-chevron-vide {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.env-manage-chevron {
  background: transparent; border: 0; border-radius: var(--radius-xs);
  color: var(--muted); cursor: pointer; padding: 0;
}
.env-manage-chevron:hover { color: var(--text-strong); background: var(--bg-inset); }
.env-manage-chevron svg { transition: transform 0.15s ease; }
.env-manage-chevron.is-open svg { transform: rotate(90deg); }
.env-manage-nom {
  flex: 1 1 auto; min-width: 0; text-align: left;
  display: flex; flex-direction: column;
  background: transparent; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.env-manage-nom-fixe { cursor: default; }
.env-manage-nom .tree-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.env-manage-nom:not(.env-manage-nom-fixe):hover .tree-label { color: var(--accent-text); text-decoration: underline; }
.env-manage-alerte { flex: 0 0 auto; display: inline-flex; color: var(--red-text); }
/* « Ajouter un compte » est le geste fréquent, mais pas un bouton plein : douze boutons pleins
   feraient le même mur, en plus petit. Le cadre n'apparaît qu'au survol de la ligne. */
.env-manage-ligne .btn-env-ajouter-compte {
  flex: 0 0 auto; white-space: nowrap; border-color: transparent; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.env-bloc:hover .btn-env-ajouter-compte, .env-manage-ligne .btn-env-ajouter-compte:focus-visible {
  border-color: var(--border);
}
.env-manage-ligne .btn-env-creer { flex: 0 0 auto; white-space: nowrap; }
/* Section des types pas encore créés : son titre est le bouton qui la déplie. */
.env-manage-disponibles-tete {
  display: flex; align-items: center; gap: 0.4rem; width: 100%;
  background: transparent; border: 0; padding: 0.2rem 0.35rem; cursor: pointer;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.env-manage-disponibles-tete:hover { color: var(--text-strong); }
.env-manage-compteur {
  font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--bg-inset); color: var(--muted);
}
@media (max-width: 560px) {
  /* Sur téléphone la ligne ne tient plus sur un rang : le nom garde le premier (avec l'alerte
     et le menu ⋮), « Ajouter un compte » passe dessous, aligné sur le nom. Le nom se replie
     au lieu de se tronquer : un solde coupé par une ellipse ne sert à rien. */
  .env-manage-ligne { flex-wrap: wrap; row-gap: 0.15rem; }
  .env-manage-nom { flex: 1 1 0; }
  .env-manage-ligne .menu-actions { order: 5; }
  .env-manage-ligne .btn-env-ajouter-compte {
    order: 10; flex: 0 0 calc(100% - 2.9rem); margin-left: 2.9rem; justify-content: flex-start;
  }
  .env-manage-ligne .btn-env-creer { order: 9; margin-left: 2.9rem; }
  /* Une ligne de compte : le nom et la poubelle sur le premier rang, le statut dessous. Une
     grille et non un flex qui se replie : le repli d'un flex laissait le statut se glisser
     sur le premier rang quand le nom était court, et la poubelle chevauchait le nom. */
  .env-manage-comptes .env-manage-source {
    display: grid; grid-template-columns: 24px 1fr auto; column-gap: 0.55rem; row-gap: 0.2rem;
    margin-left: 1.1rem;
  }
  .env-manage-comptes .btn-env-source-remove { grid-column: 3; grid-row: 1; }
  .env-manage-comptes .env-manage-source-statut { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
}
/* Les actions d'ajout forment une section à part, en bas de la fenêtre : les mélanger aux
   enveloppes existantes faisait lire « Créer » comme une action sur la dernière de la liste. */
.env-manage-section-ajout { border-top: 1px solid var(--border); padding-top: 0.9rem; }
/* Ligne de source générique — réutilisée à la fois décalée sous son enveloppe (fenêtre
   « Gérer les enveloppes ») et à plat dans le bloc « Alimentée automatiquement » de la
   fiche enveloppe (.env-sources-readonly plus bas). Icône dans un jeton arrondi, libellé en
   texte fort, statut en pastille colorée plutôt qu'en texte nu — plus lisible qu'une ligne
   plate tout en --muted. */
.env-manage-source {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.1rem;
}
.env-manage-comptes .env-manage-source {
  margin-left: 2.4rem; padding-left: 0.55rem;
  border-left: 2px solid var(--border);
}
.env-manage-source-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-input); flex-shrink: 0;
  background: var(--bg-inset); overflow: hidden;
}
.env-manage-source-icon svg { width: 15px; height: 15px; }
.env-manage-source-label { flex: 1; min-width: 0; font-size: 0.83rem; color: var(--text-strong); font-weight: 500; }
.env-manage-source-statut {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.env-manage-source-statut.is-ok { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.env-manage-source-statut.is-error { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }

/* Fenêtre « Gérer les scénarios » — même patron que « Gérer les enveloppes » : une liste
   (ici les scénarios existants, avec leurs pastilles) puis une section Créer, à part pour
   ne pas lire les trois modes de création comme une action sur le dernier scénario listé. */
.scenario-manager-modal { max-width: 760px; }
.scenario-create-modes { display: flex; flex-direction: column; gap: 0.5rem; }
.scenario-create-mode {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-btn); border: 1px solid var(--border);
  background: var(--bg-inset); color: inherit; cursor: pointer; width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.scenario-create-mode:hover { border-color: var(--accent); background: var(--bg-hover); }
.scenario-create-mode.is-active { border-color: var(--accent); background: var(--accent-soft); }
.scenario-create-mode strong { font-size: 0.85rem; color: var(--text-strong); }
.scenario-create-mode span { font-size: 0.75rem; color: var(--muted); }
.scenario-create-form { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.scenario-create-form[hidden] { display: none; }
.scenario-create-form label { display: block; font-size: 0.75rem; color: var(--muted); margin: 0.5rem 0 0.2rem; }
.scenario-create-form input, .scenario-create-form select { width: 100%; }
/* Le trait de separation est porte par la section  Ajouter  elle-meme, pas par chaque
   rangee : la section en compte deux (catalogue/connexion, puis enveloppe personnalisee). */
.env-manage-footer {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  margin-top: 0.5rem;
}
.env-manage-footer input { flex: 1; min-width: 180px; }

/* Bloc « Alimentée automatiquement » de la fiche enveloppe : rappelle d'où vient l'encours
   quand il n'est plus saisissable, sans dupliquer les contrôles d'édition — ils vivent dans
   la fenêtre de gestion. Carte à part entière (plutôt qu'un simple fond gris) pour se
   distinguer nettement du formulaire de saisie juste en dessous. */
.env-sources-readonly {
  margin: 0.7rem 0 1rem; padding: 0.7rem 0.85rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.env-sources-readonly[hidden] { display: none !important; }
.env-sources-readonly-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.env-sources-readonly-head span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 700;
}
/* Pastille verte type « en direct » : le bloc entier signale une valeur qui vient d'une
   synchro automatique, pas d'une saisie — le point donne ce repère au premier coup d'œil. */
.env-sources-readonly-head span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.env-sources-readonly .env-manage-source + .env-manage-source { border-top: 1px solid var(--border); }

/* Remplace le style inline codé en dur (fond #0d1117 fixe) qui cassait le thème clair. */
.env-date-input {
  background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-strong);
  border-radius: var(--radius-input); padding: 0.25rem 0.4rem; font-size: 0.8rem;
}


/* Invite après la saisie d'un enfant : elle conduit vers les réglages qui changent les
   parts fiscales, sans couper le geste en cours (cf. ecrans/invite-foyer.js). */
.invite-foyer {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 0.75rem;
  background: var(--card); border: 1px solid var(--gold); border-radius: var(--radius-input);
  padding: 0.75rem 1rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  max-width: min(92vw, 40rem); font-size: 0.9rem;
}

/* Dossiers d'actifs de la fiche : la barre qui en crée, la ligne d'un dossier (dépliable), ses
   membres en retrait, et la poignée par laquelle on y glisse un actif. */
.env-dossiers-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.6rem; }
.env-dossiers-barre[hidden] { display: none !important; }
#env-dossiers-annulation:empty { display: none; }
.env-poignee { display: inline-flex; vertical-align: middle; margin-right: 0.2rem; color: var(--muted); cursor: grab; }
.env-poignee:hover { color: var(--text-strong); }
tr.env-dossier td { background: var(--bg-inset); }
tr.env-dossier.env-dossier-survol td { background: var(--accent-soft); }
.env-dossier-nom strong { color: var(--text-strong); }
.env-dossier-bascule {
  display: inline-flex; vertical-align: middle; padding: 0.1rem; border: 0; background: none;
  color: var(--muted); cursor: pointer;
}
.env-dossier-bascule svg { transition: transform 0.15s ease; }
.env-dossier-bascule[aria-expanded="true"] svg { transform: rotate(90deg); }
.env-dossier-supprimer { margin-left: 0.4rem; padding: 0.1rem 0.35rem; vertical-align: middle; }
tr.env-membre td { color: var(--muted); }
tr.env-membre td.env-membre-nom { padding-left: 2rem; color: var(--text); }
.env-membre-sortir { margin-left: 0.4rem; font-size: 0.8rem; }
/* Un nom coupé en trois lignes se lit mal : la colonne s'élargit, le tableau défile. */
td.env-dossier-nom, td.env-membre-nom { white-space: nowrap; }