/* AdonisCompte v3 - feuille de style unique, sans dependance externe */

/* ------------------------------------------------------------------ themes
   Deux palettes. Sans choix explicite, on suit le reglage du systeme
   d'exploitation. Un choix explicite, memorise dans le navigateur, prime.

   Sombre : la palette d'origine d'AdonisCompte, conservee telle quelle.
   Clair  : teintes relevees sur une aquarelle chaude - moyenne #f3d5c7,
            clairs #f8e5da, profonds #edc2af - plutot qu'un blanc froid.   */

:root {
  --fond: #0f1117;
  --surface: #1a1d27;
  --surface-2: #242736;
  --bord: #2d3148;
  --texte: #e4e6f0;
  --texte-faible: #8b8fa3;
  --accent: #6c5ce7;
  --accent-clair: #a29bfe;
  --credit: #00b894;
  --debit: #e17055;
  --alerte: #fdcb6e;
  --voile: rgba(6, 8, 13, .66);
  --lueur: #1b1f2e;
  --ombre: 0 8px 28px rgba(0, 0, 0, .35);
  --rayon: 10px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) { --fond: #f6e3da;
    --surface: #fdf7f3;
    --surface-2: #f8ece5;
    --bord: #e6d0c4;
    --texte: #2f2724;
    --texte-faible: #7c6b63;
    --accent: #5a4fd6;
    --accent-clair: #4a3fc0;
    --credit: #0e8a68;
    --debit: #c4492c;
    --alerte: #a8720a;
    --voile: rgba(60, 40, 34, .42);
    --lueur: #fdf3ed;
    --ombre: 0 6px 22px rgba(120, 80, 66, .13); }
}

:root[data-theme="clair"] { --fond: #f6e3da;
    --surface: #fdf7f3;
    --surface-2: #f8ece5;
    --bord: #e6d0c4;
    --texte: #2f2724;
    --texte-faible: #7c6b63;
    --accent: #5a4fd6;
    --accent-clair: #4a3fc0;
    --credit: #0e8a68;
    --debit: #c4492c;
    --alerte: #a8720a;
    --voile: rgba(60, 40, 34, .42);
    --lueur: #fdf3ed;
    --ombre: 0 6px 22px rgba(120, 80, 66, .13); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden du HTML applique display:none, mais n'importe quelle regle
   display de cette feuille le supplante. Sans cette ligne, .voile (display:grid)
   restait affiche en permanence : un voile noir couvrant tout l'ecran, qui
   interceptait aussi tous les clics. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--fond);
  background-attachment: fixed;
  color: var(--texte);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- connexion */

.ecran-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(1000px 500px at 50% -10%, var(--lueur) 0%, var(--fond) 60%);
}

.carte-auth {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: var(--ombre);
}

.carte-auth h1 { font-size: 24px; text-align: center; letter-spacing: -0.3px; }
.sous-titre { text-align: center; color: var(--texte-faible); font-size: 13px; margin-bottom: 20px; }

label {
  display: block;
  font-size: 12px;
  color: var(--texte-faible);
  margin-bottom: 12px;
}

input, select, textarea {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 14px;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

.aide { font-size: 11px; color: var(--texte-faible); margin: -6px 0 12px; }
.bascule { text-align: center; font-size: 13px; color: var(--texte-faible); margin-top: 16px; }
.bascule a { color: var(--accent-clair); }

.alerte {
  background: rgba(209, 90, 60, .12);
  background: color-mix(in srgb, var(--debit) 14%, transparent);
  border: 1px solid var(--debit);
  color: var(--debit);
  padding: 9px 12px;
  border-radius: var(--rayon);
  font-size: 13px;
  margin-bottom: 14px;
}

.alerte.succes { background: rgba(15, 157, 118, .12);
  background: color-mix(in srgb, var(--credit) 14%, transparent); border-color: var(--credit); color: var(--credit); }
.alerte.info { background: rgba(90, 79, 214, .12);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--accent-clair); }

/* ---------------------------------------------------------- boutons */

.bouton {
  background: var(--surface-2);
  border: 1px solid var(--bord);
  color: var(--texte);
  padding: 8px 14px;
  border-radius: var(--rayon);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.bouton:hover:not(:disabled) { border-color: var(--accent); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton.primaire { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.bouton.primaire:hover:not(:disabled) { filter: brightness(1.1); }
.bouton.large { width: 100%; padding: 11px; margin-top: 8px; }
.bouton.discret { background: none; color: var(--texte-faible); }
.bouton.discret:hover { color: var(--texte); }
.bouton.danger, button.danger { color: var(--debit); }
.bouton.petit { padding: 4px 9px; font-size: 11px; }

/* ---------------------------------------------------------- entete */

.entete {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-wrap: wrap;
}

.entete-gauche { display: flex; align-items: baseline; gap: 8px; }
.marque { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }
.version { font-size: 10px; color: var(--texte-faible); border: 1px solid var(--bord); border-radius: 9px; padding: 1px 7px; }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.onglets { display: flex; gap: 2px; background: var(--fond); border-radius: var(--rayon); padding: 3px; }
.onglets button {
  background: none; border: none; color: var(--texte-faible);
  padding: 7px 14px; border-radius: 7px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.onglets button:hover { color: var(--texte); }
.onglets button.actif { background: var(--accent); color: #fff; font-weight: 600; }

.menu { position: relative; }
.menu-liste {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: var(--rayon); min-width: 230px; padding: 5px;
  box-shadow: var(--ombre); z-index: 60;
}
.menu-liste button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--texte); padding: 9px 12px; border-radius: 7px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.menu-liste button:hover { background: var(--surface); }

.pastille {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--debit); margin-right: 6px; vertical-align: middle;
}

/* ---------------------------------------------------------- contenu */

main { padding: 22px; max-width: 1240px; margin: 0 auto; }

.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 16px 18px;
}

.carte-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--texte-faible); }
.carte-valeur { font-size: 24px; font-weight: 700; margin-top: 4px; letter-spacing: -0.5px; }
.carte-detail { font-size: 12px; color: var(--texte-faible); margin-top: 3px; }

.numero {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .5px; color: var(--accent-clair);
}

.credit { color: var(--credit); }
.debit { color: var(--debit); }
.negatif { color: var(--debit); }

h2 { font-size: 17px; margin: 26px 0 12px; font-weight: 650; }
h2:first-child { margin-top: 0; }
.section-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 12px; flex-wrap: wrap; }
.section-entete h2 { margin: 0; }

/* ---------------------------------------------------------- tableaux */

.table-defilante { overflow-x: auto; border: 1px solid var(--bord); border-radius: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bord); white-space: nowrap; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-faible); background: var(--surface); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.montant, th.montant { text-align: right; font-variant-numeric: tabular-nums; }
td.large { white-space: normal; min-width: 200px; }

.etiquette {
  font-size: 10px; padding: 2px 8px; border-radius: 5px; font-weight: 600;
  background: var(--surface-2); color: var(--texte-faible); border: 1px solid var(--bord);
}
.etiquette.standard { color: var(--accent-clair); border-color: var(--accent); }
.etiquette.admin { color: var(--accent-clair); border-color: var(--accent); }
.etiquette.suspendu { color: var(--debit); border-color: var(--debit); }
.etiquette.actif { color: var(--credit); border-color: var(--credit); }

.vide { text-align: center; color: var(--texte-faible); padding: 34px 16px; font-size: 13px; }

/* ---------------------------------------------------------- formulaires */

.ligne-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ligne-form label { flex: 1; min-width: 130px; margin-bottom: 0; }
.ligne-form .bouton { margin-bottom: 1px; }

/* ---------------------------------------------------------- modale */

.voile {
  position: fixed; inset: 0; background: var(--voile);
  display: grid; place-items: center; padding: 20px; z-index: 100;
}
.modale {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 14px;
  padding: 24px; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  box-shadow: var(--ombre);
}
.modale h3 { font-size: 17px; margin-bottom: 6px; }
.modale .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* ---------------------------------------------------------- toast */

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--bord);
  padding: 11px 18px; border-radius: var(--rayon); font-size: 13px;
  z-index: 200; box-shadow: var(--ombre); max-width: 90vw;
}
.toast.erreur { border-color: var(--debit); color: var(--debit); }
.toast.succes { border-color: var(--credit); color: var(--credit); }

/* ---------------------------------------------------------- divers */

.barre-comparatif { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; min-width: 90px; }
.barre-comparatif i { display: block; height: 100%; background: var(--accent); }
.barre-comparatif i.depasse { background: var(--debit); }

.mini-onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.mini-onglets button {
  background: var(--fond); border: 1px solid var(--bord); color: var(--texte-faible);
  padding: 5px 12px; border-radius: 7px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.mini-onglets button.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

.note {
  font-size: 12px; color: var(--texte-faible); background: var(--surface-2);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; margin-bottom: 14px;
}
.note.attention { border-color: var(--alerte); color: var(--alerte); }

@media (max-width: 720px) {
  .entete { gap: 10px; padding: 10px 14px; }
  .onglets { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 14px; }
}

/* Bascule de theme : adoucie */
body, .carte, .entete, .modale, .toast, table, th, td, .menu-liste {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Selecteur de theme dans le menu utilisateur */
.menu-entete {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texte-faible); padding: 9px 12px 3px;
}
.choix-theme { display: flex; gap: 4px; padding: 2px 8px 6px; }
.choix-theme button {
  flex: 1; padding: 6px 4px; font-size: 11px; border-radius: 7px;
  border: 1px solid var(--bord); background: var(--fond);
  color: var(--texte-faible); cursor: pointer; font-family: inherit; text-align: center;
}
.choix-theme button:hover { color: var(--texte); }
.choix-theme button.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------------------------------- aide contextuelle
   Une explication permanente a l'ecran finit par etre lue comme une consigne,
   et alourdit l'interface. On la range derriere un reperage discret : elle
   reste disponible pour qui en a besoin, invisible pour les autres.          */

.info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: var(--surface-2);
  color: var(--texte-faible);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  padding-right: 1px;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 6px;
  user-select: none;
}

.info:hover,
.info:focus-visible {
  border-color: var(--accent);
  color: var(--accent-clair);
  outline: none;
}

.info::after {
  content: attr(data-aide);
  position: absolute;
  bottom: calc(100% + 9px);
  /* Ancree a gauche du repere, et non centree : centree, elle deborde de
     l'ecran des que le repere est proche du bord gauche, et le texte est
     coupe. Ancree ainsi, elle reste lisible partout sauf pres du bord droit,
     cas traite par le modificateur .a-gauche. */
  left: -9px;
  transform: translateY(5px);
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  padding: 10px 13px;
  background: var(--surface-2);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  /* Le repere est en serif italique ; le texte, lui, doit rester dans la
     typographie de l'application. */
  font-family: inherit;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: pre-line;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

/* Petite fleche vers le repere */
.info::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 3px;
  border: 5px solid transparent;
  border-top-color: var(--bord);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease;
  z-index: 401;
}

.info:hover::after, .info:focus-visible::after,
.info:hover::before, .info:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.info:hover::after, .info:focus-visible::after {
  transform: translateY(0);
}

/* Pres du bord droit, l'infobulle deborderait : on l'aligne a droite */
.info.a-gauche::after {
  left: auto;
  right: -6px;
  transform: translateY(5px);
}
.info.a-gauche:hover::after, .info.a-gauche:focus-visible::after {
  transform: translateY(0);
}
.info.a-gauche::before { left: auto; right: 2px; transform: none; }

/* Sous l'element, quand il n'y a pas la place au-dessus */
.info.dessous::after {
  bottom: auto;
  top: calc(100% + 9px);
  transform: translateY(-5px);
}
.info.dessous:hover::after, .info.dessous:focus-visible::after {
  transform: translateY(0);
}
.info.dessous::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--bord);
}

/* Moutonnement de l'aquarelle, reconstitue en degrades : quelques nappes
   chaudes de densites differentes, comme sur un papier peint a l'eau. */
:root[data-theme="clair"] body,
:root:not([data-theme="sombre"]) body {
  background-image:
    radial-gradient(58% 42% at 12% 8%,  rgba(226, 176, 146, .40) 0%, transparent 62%),
    radial-gradient(46% 38% at 88% 22%, rgba(238, 196, 178, .34) 0%, transparent 60%),
    radial-gradient(64% 46% at 70% 84%, rgba(230, 182, 164, .30) 0%, transparent 66%),
    radial-gradient(40% 34% at 26% 68%, rgba(248, 229, 218, .55) 0%, transparent 58%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) body { background-image: none; }
}
:root[data-theme="sombre"] body { background-image: none; }

/* Titre de la carte de connexion, dans l'accent, comme a l'origine */
.carte-auth h1 { color: var(--accent-clair); }

/* ------------------------------------------------------ regroupement admin
   Une personne possedant dix comptes ne doit pas produire dix lignes portant
   son nom. Un bloc par titulaire, deplie a la demande.                      */

.groupe {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.groupe > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.groupe > summary::-webkit-details-marker { display: none; }

/* Chevron pivotant, dessine en CSS */
.groupe > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-right: 2px solid var(--texte-faible);
  border-bottom: 2px solid var(--texte-faible);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.groupe[open] > summary::before { transform: rotate(45deg); }

.groupe > summary:hover { background: var(--surface-2); }
.groupe > summary:hover::before { border-color: var(--accent-clair); }

.groupe-nom {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
}
.groupe-nom .aide { display: block; font-weight: 400; }

.groupe-total {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
}

.groupe .table-defilante {
  border: none;
  border-top: 1px solid var(--bord);
  border-radius: 0;
}
.groupe table th { background: var(--surface-2); }
.groupe-pied {
  padding: 10px 16px;
  border-top: 1px solid var(--bord);
  background: var(--surface-2);
}

/* ------------------------------------------------------ espace consulte
   Quand on regarde l'espace de quelqu'un d'autre, cela doit se voir en
   permanence : rien n'est plus desagreable que de croire saisir chez soi. */

.bandeau-espace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--alerte) 20%, var(--surface));
  border-bottom: 1px solid var(--alerte);
  font-size: 13px;
  font-weight: 600;
  color: var(--texte);
}

.bandeau-espace .numero { color: inherit; }

body.lecture-seule .bouton.primaire,
body.lecture-seule [data-modifier],
body.lecture-seule [data-supprimer] {
  display: none !important;
}

/* Champ suivi d'un bouton, sur une meme ligne */
.champ-avec-bouton { display: flex; gap: 6px; align-items: stretch; }
.champ-avec-bouton input { flex: 1; }
.champ-avec-bouton .bouton { flex-shrink: 0; margin-top: 4px; }


/* Onglet d'accueil : dessin au trait, il herite de la couleur du texte et
   suit donc les deux themes sans regle supplementaire. */
.onglets .onglet-accueil {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; line-height: 0;
}
.onglets .onglet-accueil svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------ Tableau de budget mensuel
   52 lignes sur 12 mois : le tableau defile horizontalement, mais la colonne
   des libelles reste visible, sans quoi on ne sait plus quelle ligne on remplit. */
.tableau-budget table { border-collapse: separate; border-spacing: 0; min-width: 100%; }

.tableau-budget tbody .colonne-ligne {
  /* Un th herite du style d'en-tete : majuscules et gris pale. Un libelle de
     ligne budgetaire doit se lire tel qu'il a ete ecrit. */
  text-transform: none; letter-spacing: 0;
  font-size: 13px; color: var(--texte);
}
.tableau-budget table { table-layout: fixed; }
.tableau-budget .colonne-ligne {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  text-align: left; font-weight: 400; white-space: nowrap;
  width: 220px; min-width: 220px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--bord);
}
.tableau-budget thead .colonne-ligne { z-index: 3; }
/* Largeur fixe : sans elle, le navigateur etire les colonnes pour remplir la
   page, le tableau deborde davantage, et moins de mois tiennent a l'ecran. */
.tableau-budget th.mois, .tableau-budget td.cellule { width: 96px; }
.tableau-budget th.mois { min-width: 96px; }
.tableau-budget th.mois-courant { color: var(--accent); }

/* Une case = le prevu que l'on saisit, et le realise juste dessous. */
.tableau-budget td.cellule { padding: 3px 6px; vertical-align: top; }
.tableau-budget input.prevu {
  width: 100%; min-width: 72px; margin: 0; padding: 4px 6px;
  text-align: right; font-variant-numeric: tabular-nums;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--texte); font-size: 13px;
}
.tableau-budget input.prevu:hover { border-color: var(--bord); }
.tableau-budget input.prevu:focus {
  border-color: var(--accent); background: var(--fond); outline: none;
}
.tableau-budget input.prevu.refuse { border-color: var(--debit); }
.tableau-budget .prevu-fige { display: block; text-align: right; padding: 4px 6px; }

.tableau-budget .reel {
  display: block; text-align: right; padding: 0 7px 2px;
  font-size: 11px; color: var(--texte-faible);
  font-variant-numeric: tabular-nums; min-height: 14px;
}
.tableau-budget .reel.debit { color: var(--debit); }

/* En-tete de section : les totaux de la section, mois par mois. */
.tableau-budget .entete-section > * {
  background: var(--surface-2);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: .04em;
}
.tableau-budget .entete-section .colonne-ligne {
  background: var(--surface-2);
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 11px; font-weight: 600;
}
/* Le bandeau d'une categorie ne porte aucun montant : c'est une separation,
   pas une ligne de budget. Une hauteur fixe l'empeche de s'ecraser une fois
   ses cellules videes. */
.tableau-budget .entete-section .bande-categorie {
  height: 34px; padding: 0; border-right: 0;
}

/* Les deux categories -- REVENUS et DEPENSES -- ne doivent jamais se
   confondre avec les sous-categories qu'elles contiennent. Chacune prend donc
   sa couleur, la meme que celle des montants qu'elle porte : le vert des
   credits, le brun des debits. La teinte de fond est facultative (color-mix),
   la couleur du texte et le trait lateral, eux, sont toujours la. */
.tableau-budget .entete-section .colonne-ligne { border-left: 3px solid transparent; }

.tableau-budget .section-revenus > * { color: var(--credit); }
.tableau-budget .section-revenus .colonne-ligne { border-left-color: var(--credit); }
.tableau-budget .section-depenses > * { color: var(--debit); }
.tableau-budget .section-depenses .colonne-ligne { border-left-color: var(--debit); }
@supports (background: color-mix(in srgb, red 10%, white)) {
  .tableau-budget .section-revenus > * {
    background: color-mix(in srgb, var(--credit) 12%, var(--surface-2));
  }
  .tableau-budget .section-depenses > * {
    background: color-mix(in srgb, var(--debit) 12%, var(--surface-2));
  }
}

/* Une sous-categorie est en retrait de sa categorie : la hierarchie se lit
   sans avoir a comparer les couleurs. */
.tableau-budget tbody.section-budget tr:not(.entete-section) .colonne-ligne {
  padding-left: 22px;
}

.tableau-budget .cadenas { font-size: 11px; opacity: .55; }

/* Choix du groupe a la saisie d'une operation : deux boutons exclusifs, pas
   une liste deroulante. Se tromper de groupe fausse le signe du montant, donc
   le solde : le choix doit se voir en permanence, et non se replier. */
.choix-sens { display: flex; gap: 0; margin: 2px 0 4px; }
.choix-sens input { position: absolute; opacity: 0; pointer-events: none; }
.choix-sens label {
  flex: 1; margin: 0; text-align: center; cursor: pointer;
  padding: 9px 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte-faible);
}
.choix-sens label:first-of-type { border-radius: var(--rayon) 0 0 var(--rayon); }
.choix-sens label:last-of-type { border-radius: 0 var(--rayon) var(--rayon) 0; border-left: 0; }
.choix-sens input:checked + label { color: #fff; }
.choix-sens input#sens_expense:checked + label {
  background: var(--debit); border-color: var(--debit);
}
.choix-sens input#sens_income:checked + label {
  background: var(--credit); border-color: var(--credit);
}
.choix-sens input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Liste de comptes : une liste deroulante ordinaire, que l'on ouvre d'un clic
   et qui defile toute seule des qu'elle depasse la hauteur de l'ecran.
   La largeur se demande au CHAMP, jamais a la liste elle-meme : dans une
   barre de formulaire, chaque champ est un element flexible qui doit pouvoir
   se retrecir. Une liste a laquelle on impose une largeur minimale refuse de
   suivre, deborde de son champ et vient recouvrir le voisin -- c'est ce qui
   faisait se chevaucher « Depuis » et « Bénéficiaire ». */
select.liste-comptes { min-width: 0; }

/* ------------------------------------------------ liste deroulante maison
   Le champ ferme ne montre que le nom : court, il tient toujours, et l'on
   relit d'un coup d'oeil d'ou part l'argent. Le numero et le solde attendent
   l'ouverture de la liste -- c'est la qu'on les cherche. */
.deroulant { position: relative; width: 100%; margin-top: 4px; }

.deroulant-declencheur {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: var(--rayon); color: var(--texte);
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.deroulant-declencheur:hover { border-color: var(--accent); }
.deroulant-declencheur:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.deroulant-choix { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deroulant-choix.vide { color: var(--texte-faible); }
.deroulant-fleche { color: var(--texte-faible); font-size: 11px; flex: none; }
.deroulant[data-valeur=""] .deroulant-declencheur { border-style: dashed; }

/* Position fixe, et non absolue : la modale et les tableaux rognent ce qui
   deborde d'eux, et le panneau s'y ferait couper. Ses coordonnees sont
   calculees a l'ouverture, puis suivies si la page defile. */
.deroulant-panneau {
  position: fixed; z-index: 500;
  overflow-y: auto;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 4px;
}

/* Un compte = trois lignes, du plus important au moins important, et un trait
   avant le suivant. Une seule taille de police : la hierarchie se fait a la
   graisse et a la couleur, jamais en grossissant le texte. */
.deroulant-option {
  display: block; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--bord);
}
.deroulant-option:last-child { border-bottom: 0; }
.deroulant-option:hover,
.deroulant-option.survolee { background: var(--surface-2); }
.deroulant-option.choisie { background: var(--lueur); }
.deroulant-option .option-titre {
  display: block; font-size: 14px; font-weight: 600; color: var(--texte);
}
.deroulant-option .option-detail {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--texte-faible);
  font-variant-numeric: tabular-nums;
}
.deroulant-option.choisie .option-titre { color: var(--accent-clair); }

/* Une barre de saisie ou tous les champs font la meme largeur, quelle que
   soit la longueur de ce qu'ils contiennent.
   `flex: 1 1 0` : chacun part de zero et recoit la meme part de la place
   disponible -- une largeur imposee a l'un le fait deborder sur son voisin.
   L'intitule tient sur une seule ligne : le champ, lui, passe dessous, ce que
   « display: block » garantit malgre le « nowrap ». Un formulaire dont un
   libelle se plie en deux quand les autres tiennent sur une ligne se voit
   immediatement, et se voit mal. */
.ligne-form.champs-egaux label {
  flex: 1 1 0; min-width: 150px; white-space: nowrap;
}
.ligne-form.champs-egaux label > input,
.ligne-form.champs-egaux label > select { display: block; }

/* Meme hauteur pour tout ce qui se saisit dans cette barre, bouton compris.
   Elle ne va pas de soi : un champ natif se dimensionne sur son interligne
   propre (environ 1,2), alors qu'une liste construite par l'application herite
   de celle du corps du texte (1,55). Cinq pixels d'ecart, et la rangee monte
   en escalier -- ce qui se voit immediatement. On impose donc la hauteur
   plutot que de la laisser dependre de la fabrique de chaque organe. */
.ligne-form.champs-egaux label > input,
.ligne-form.champs-egaux label > select,
.ligne-form.champs-egaux .deroulant-declencheur,
.ligne-form.champs-egaux > .bouton { height: 42px; }
.ligne-form.champs-egaux > .bouton {
  margin-bottom: 0; padding-top: 0; padding-bottom: 0;
}


/* Petit repere entre deux familles de boutons dans une barre d'outils. */
.separateur-outils {
  display: inline-block; width: 1px; height: 20px;
  background: var(--bord); margin: 0 4px; align-self: center;
}
/* Une ombre au bord droit annonce qu'il reste des colonnes a voir. */
.tableau-budget { scroll-behavior: smooth; }
.tableau-budget::-webkit-scrollbar { height: 10px; }
.tableau-budget::-webkit-scrollbar-thumb {
  background: var(--bord); border-radius: 5px;
}
.tableau-budget::-webkit-scrollbar-track { background: transparent; }

/* Pastille de presence : verte si la personne est active a l'instant, rouge
   sinon. La couleur seule ne suffit pas a qui la distingue mal : le libelle
   voisin et l'infobulle disent la meme chose en toutes lettres. */
.pastille-presence {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.pastille-presence.en-ligne { background: var(--credit); box-shadow: 0 0 0 3px rgba(0, 184, 148, .18); }
.pastille-presence.absent   { background: var(--debit); opacity: .55; }

/* Mise en evidence d'un resultat de recherche. Elle s'estompe d'elle-meme :
   une surbrillance permanente cesse vite de designer quoi que ce soit. */
@keyframes estomper {
  0%, 55% { background: rgba(108, 92, 231, .30); }
  100%    { background: transparent; }
}
tr.en-evidence > * { animation: estomper 4.5s ease-out forwards; }
.tableau-budget tr.en-evidence .colonne-ligne { animation: estomper 4.5s ease-out forwards; }
td.case-en-evidence { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }