/* 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; margin-bottom: 0.5rem; }
.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. */
.env-evolution-chart { position: relative; height: 260px; }
.env-charts .env-evolution-chart canvas {
  max-width: 100%; max-height: 260px; width: 100% !important; margin: 0;
}

.env-comptes-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.env-comptes-actions[hidden] { display: none; }
/* 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); }

/* 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. */
.a-confirmer-panel { border-left: 3px solid var(--accent); }
.a-confirmer-panel[hidden] { 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); }

.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; }
.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.5rem; }
/* 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-item .env-manage-source {
  margin-left: 1.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. app.js::proposerOngletFoyer). */
.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;
}