/* MODALES — fenetres de saisie et leurs blocs internes
 *
 * Tranche 05 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.
 */
.btn-link {
  background: none; border: none; padding: 0; margin: 0; color: var(--gold);
  text-decoration: underline; cursor: pointer; font: inherit;
}
.flux-timeline-chart-wrap { height: 320px; margin: 0.75rem 0; }
#mois-detail-sankey-wrap { height: 560px; margin: 0.75rem 0; }
#mois-detail-sankey-wrap[hidden] { display: none !important; }
#mois-detail-body[hidden] { display: none !important; }
/* Les vues Détail/Groupé empilent plusieurs .card.inner (positifs/négatifs/gain net/neutres) —
   sans marge propre, aucun espace visuel ne les sépare (retour utilisateur : "ils sont tous
   collés"). */
#mois-detail-body { display: flex; flex-direction: column; gap: 0.75rem; }
.flux-line {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.78rem;
  color: var(--muted);
}
.flux-line:last-child { border-bottom: none; }
/* Détail = teinte grisée ("gris-vert"/"gris-rouge") ; seuls les totaux (catégorie et
   grand total, ci-dessous) restent en couleur pleine — on lit soit tout le vert plein
   (totaux), soit tout le grisé (détail), jamais un mélange qui donnerait l'impression
   de doubler les montants. */
.flux-line.positive strong { color: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.flux-line.negative strong { color: color-mix(in srgb, var(--red) 55%, var(--muted)); }
.flux-line strong .positive { color: var(--accent); }
.flux-line strong .negative { color: var(--red); }
/* Raccourci « Modifier dans le temps » posé sur les lignes réellement modifiables (bloc 2,
   cf. public/mois-detail.js). DANS le libellé et pas après le montant : les montants restent
   alignés d'une ligne à l'autre, qu'elle porte un bouton ou non. Discret au repos, franc au
   survol de la ligne — visible en permanence quand même (tactile : il n'y a pas de survol). */
.flux-line-modif {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--muted); opacity: 0.4; vertical-align: -2px; line-height: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.flux-line:hover .flux-line-modif { opacity: 0.75; }
.flux-line-modif:hover, .flux-line-modif:focus-visible { opacity: 1; color: var(--gold); }
.flux-line-block { border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.flux-line-block:last-child { border-bottom: none; padding-bottom: 0; }
.flux-line-block .flux-line { border-bottom: none; padding-bottom: 0.15rem; }
.flux-subline-group { padding-left: 1rem; }
.flux-subline {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.1rem 0; font-size: 0.75rem; color: var(--muted);
}
.flux-subline.positive { color: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.flux-subline.negative { color: color-mix(in srgb, var(--red) 55%, var(--muted)); }
.flux-cat-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0 0.2rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 700;
}
.flux-cat-header:first-child { padding-top: 0; }
.flux-cat-header .positive { color: var(--accent); }
.flux-cat-header .negative { color: var(--red); }
.flux-total { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 2px solid var(--border); font-weight: 700; color: var(--text-strong); font-size: 0.85rem; }
/* Grand total (Total flux positifs/négatifs) : couleur pleine, comme les en-têtes de
   catégorie — l'emporte sur la règle grisée .flux-line.positive/.negative ci-dessus. */
.flux-line.flux-total.positive strong { color: var(--accent); }
.flux-line.flux-total.negative strong { color: var(--red); }
.modal-section {
  margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.modal-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.modal-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.5rem; font-weight: 600; }
.modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 0.5rem; }
@media (max-width: 640px) { .modal-grid { grid-template-columns: 1fr; } }
/* Trait de séparation sous chaque champ (label + valeur) : les deux cellules d'une même
   ligne de la grille partagent la même hauteur, donc leurs bordures s'alignent en une
   ligne horizontale continue — évite de perdre le fil entre une étiquette et son montant
   quand plusieurs champs se suivent (ex. panneau Financement). */
.modal-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: var(--muted); position: relative; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.modal-grid label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
/* .modal-grid label{display:flex} l'emporte sur la règle UA [hidden]{display:none}
   (même piège que .modal-grid[hidden], cf. plus haut) — nécessaire pour les champs
   du régime fiscal qui n'apparaissent qu'au fur et à mesure des choix (locatif-modal.js). */
.modal-grid label[hidden] { display: none !important; }
.modal-preview-box { margin-top: 0.75rem; font-size: 0.8rem; }
.pm-indicateurs-year { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.5rem; }
#pm-indicateurs-mensuels table { font-size: 0.75rem; }
#pm-indicateurs-mensuels td.negative { color: var(--red); }
.pm-indic-principal { font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-indic-detail { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#pm-indicateurs-mensuels th.pm-mois-header { cursor: pointer; }
#pm-indicateurs-mensuels th.pm-mois-header:hover { color: var(--text-strong); }
#pm-indicateurs-mensuels th.pm-mois-header.active { color: var(--gold); text-decoration: underline; }
/* Carte visuellement distincte pour chaque bloc de l'onglet Financement (projet-modal.js) —
   remplace le simple filet horizontal .modal-section pour ces blocs, qui se noyaient les
   uns dans les autres (retour utilisateur : « tout est à la suite, illisible »). Fond
   --card-inner car la modale elle-même est déjà en --card (cf. .modal), il faut un ton
   différent pour que la carte se détache. */
.modal-card {
  background: var(--card-inner); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 0.85rem 1rem; margin-top: 0.85rem;
}
.modal-card:first-child { margin-top: 0; }
.modal-card > h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  margin: 0 0 0.5rem; font-weight: 600;
}
.modal-card-summary {
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
}
.emoji-picker-btn {
  margin-left: 0.3rem; padding: 0.2rem 0.4rem; font-size: 0.9rem; line-height: 1;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-input); cursor: pointer;
}
.emoji-picker-popup {
  position: absolute; z-index: 20; margin-top: 0.25rem; padding: 0.35rem;
  display: grid; grid-template-columns: repeat(8, 1.6rem); gap: 0.15rem;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-input);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.emoji-picker-cell {
  font-size: 1.05rem; line-height: 1.6rem; text-align: center; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-xs); cursor: pointer;
}
.emoji-picker-cell:hover { background: var(--border); }
.apport-mix-amount { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.pct-euro-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.pct-euro-toggle { display: inline-flex; gap: 0.15rem; flex-shrink: 0; }
.pct-euro-toggle .subtab { padding: 0.1rem 0.5rem; font-size: 0.7rem; margin-bottom: 0; }
.pct-euro-equiv { display: block; margin-top: 0.15rem; }
.envelopes-state-table td, .envelopes-state-table th { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
.btn-block { width: 100%; }
.tree-add-other { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--muted); }
.tree-add-other select { flex: 1; padding: 0.4rem; }
.apports-compact { margin-top: 0.65rem; font-size: 0.75rem; }
.apports-compact .projet-row { padding: 0.35rem 0.5rem; margin-bottom: 0.25rem; }
/* Cette barre ne porte QU'UNE chose : l'indicateur d'enregistrement, affiché trois secondes
   après un enregistrement (socle/indicateur-enregistrement.js). Le reste du temps son unique
   enfant est au repos — et elle dessinait quand même son cadre flouté en bas de l'onglet
   Événements, plus 4,5 rem de vide réservés au-dessus. Un pied de page vide en permanence
   pour un message de trois secondes. Les deux règles ne s'appliquent donc que lorsqu'il y a
   réellement quelque chose à lire. */
.scenario-sticky-bar {
  position: sticky; bottom: 0; z-index: 9;
  display: none; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.85rem; padding: 0.65rem 1rem;
  background: var(--header-bg); border: 1px solid var(--border); border-radius: var(--radius-input);
  backdrop-filter: blur(8px);
}
.scenario-sticky-bar:has(#scenario-unsaved-hint[data-etat]) { display: flex; }
#panel-scenarios.panel.active:has(#scenario-unsaved-hint[data-etat]) { padding-bottom: 4.5rem; }
.scenario-advanced summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); }
.scenario-advanced textarea { width: 100%; margin: 0.5rem 0; padding: 0.5rem; font-family: monospace; font-size: 0.8rem; }

.timeline-list { display: flex; flex-direction: column; }
.timeline-empty { font-size: 0.82rem; color: var(--muted); padding: 1.25rem 0.5rem; line-height: 1.4; text-align: center; }
.timeline-empty p { margin: 0 0 0.75rem; }
/* Colonne d'actions : `auto`, donc dimensionnee au contenu, pour que les cinq boutons
   tiennent sur UNE ligne des que la fenetre le permet — 620 px bout a bout, mesures. Une
   largeur fixe (13.5rem, essayee le 2026-08-27) alignait parfaitement les cartes mais
   empilait les boutons sur quatre lignes en laissant le milieu de la carte vide.
   C'est le bord DROIT qui aligne les cartes entre elles, pas le gauche.
   La LIMITE est posee sur les boutons, pas sur le titre : ils ne prennent jamais plus de
   la MOITIE de la carte, et ce qui depasse passe a la ligne. Sans elle, les boutons se
   servaient d'abord et le nom de l'evenement, en `minmax(0, 1fr)`, se laissait ecraser
   jusqu'a zero. La limite etant une fraction, elle vaut a toutes les largeurs de fenetre
   sans point de bascule a regler. */
.timeline-card {
  position: relative;
  display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(min-content, 50%);
  grid-template-areas: "head titlerow actions" "head detail actions";
  column-gap: 1.1rem; row-gap: 0.2rem; align-items: stretch;
  padding: 0.85rem 0.15rem;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

/* Boîte « Supprimer : que fait-on des événements dépendants ? » (suppression-modal.js).
   Une ligne par événement, indentée selon sa profondeur dans la chaîne de dépendance. */
.suppression-ligne {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-input); margin-bottom: 0.35rem; font-size: 0.85rem;
}
.suppression-ligne-label { flex: 1; color: var(--text-strong); }
.suppression-ligne-date { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.suppression-garder {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0;
  color: var(--muted); font-size: 0.78rem; white-space: nowrap;
}

/* ── LA FENÊTRE QUI POSE UNE QUESTION (socle/fenetre-question.js) ──────────────────
   Remplace les `confirm()` et `prompt()` du navigateur, muets dans certains navigateurs
   intégrés. Réutilise .modal-overlay/.modal pour le fond et le centrage ; seule la couche
   change, posée en ligne par le module (200), au-dessus des fiches (100) et de la fenêtre
   de suppression (120) — une question peut se poser depuis l'une comme l'autre. */
.fq-fenetre { max-width: 420px; }
.fq-titre { margin: 0 0 0.35rem; font-size: 1rem; }
.fq-texte { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.85rem; }
.fq-texte[hidden] { display: none; }
.fq-champs { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.9rem; }
/* Libellé porté par la ligne du champ, jamais par un en-tête séparé : deux champs
   superposés gardent ainsi leurs saisies alignées l'une sous l'autre. */
.fq-champ { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; }
.fq-champ-label { font-size: 0.85rem; }
/* Grille à deux colonnes, et la seconde existe même sans unité : en flex, un champ suivi
   de « €/mois » se décalait vers la gauche et ne s'alignait plus avec ses voisins — trois
   champs empilés donnaient trois bords gauches différents. */
.fq-champ-saisie {
  display: grid; grid-template-columns: 160px 3.5rem; align-items: center; gap: 0.35rem;
}
.fq-champ-saisie input { width: 100%; }
.fq-champ-unite { color: var(--muted); font-size: 0.8rem; }
/* Les choix d'une question à plusieurs voies : un bloc par voie, son nom puis sa
   conséquence en une phrase. Cliquer répond — il n'y a pas de bouton de validation. */
.fq-choix-liste { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.9rem; }
.fq-choix {
  display: flex; flex-direction: column; gap: 0.15rem; width: 100%;
  padding: 0.6rem 0.7rem; text-align: left; cursor: pointer;
  background: var(--card-inner); border: 1px solid var(--border); border-radius: 8px;
}
.fq-choix:hover { background: var(--bg-hover); border-color: var(--accent); }
.fq-choix-titre { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.fq-choix-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.fq-erreur { margin: 0 0 0.7rem; color: var(--red); font-size: 0.8rem; }
.fq-erreur[hidden] { display: none; }
.fq-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ── LE BANDEAU DE MESSAGE (socle/message.js) ─────────────────────────────────────
   En bas et flottant : un bandeau en haut pousserait tout l'écran vers le bas à chaque
   message. Au-dessus de tout le reste (300), y compris d'une question ouverte, puisqu'une
   erreur peut venir de ce qu'on vient d'y valider. */
.message-bandeau {
  position: fixed; z-index: 300; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: 0.75rem;
  max-width: min(560px, calc(100vw - 2rem));
  padding: 0.6rem 0.75rem;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  border-left: 3px solid var(--red);
  font-size: 0.85rem; color: var(--text-strong);
}
.message-bandeau[hidden] { display: none !important; }
.message-bandeau-fermer {
  background: none; border: none; padding: 0 0.1rem; cursor: pointer;
  color: var(--muted); font-size: 0.85rem; line-height: 1.4;
}
.message-bandeau-fermer:hover { color: var(--text-strong); }