/* Tabarcount — sobre et chaleureux, mobile d'abord (390 px), aucune police externe. */

:root {
  --fond: #f8f5f2;
  --surface: #ffffff;
  --texte: #1f1a1a;
  --discret: #6a5f5f;
  --bordure: #e2d9d5;
  --bordure-forte: #b9aca7;
  --accent: #b3263e;
  --accent-fonce: #8e1c30;
  --accent-texte: #ffffff;
  --positif: #1f6b3a;
  --positif-fond: #e7f3ea;
  --negatif: #a8261d;
  --negatif-fond: #fceeed;
  --alerte: #8a5300;
  --alerte-fond: #fff4e0;
  --rayon: 12px;
  --espace: 1rem;
  --cible: 2.75rem; /* 44 px */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #171313;
    --surface: #221d1d;
    --texte: #f0ebe9;
    --discret: #ab9f9c;
    --bordure: #3b3333;
    --bordure-forte: #5d5352;
    --accent: #f07a8d;
    --accent-fonce: #f59aa8;
    --accent-texte: #2a0b11;
    --positif: #7fd09a;
    --positif-fond: #1a2e21;
    --negatif: #ff8d84;
    --negatif-fond: #3a1d1b;
    --alerte: #f1b659;
    --alerte-fond: #33280f;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.5;
}

a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: 0 0 var(--espace); line-height: 1.25; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.discret { color: var(--discret); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- En-tête, contenu, messages ---------------------------------------- */

.entete {
  background: var(--accent);
  color: var(--accent-texte);
  padding: .75rem var(--espace);
  padding-top: max(.75rem, env(safe-area-inset-top));
}
.marque {
  color: inherit;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}
.contenu {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--espace);
  padding-bottom: max(var(--espace), env(safe-area-inset-bottom));
}
.flash {
  padding: .6rem .8rem;
  border-radius: var(--rayon);
  background: var(--positif-fond);
  color: var(--positif);
}
.flash.erreur { background: var(--negatif-fond); color: var(--negatif); }
.flash.alerte { background: var(--alerte-fond); color: var(--alerte); }

/* --- Listes et cartes --------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.carte {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-height: var(--cible);
  padding: .75rem var(--espace);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.vide { color: var(--discret); font-style: italic; }

/* --- Boutons et formulaires -------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--accent-texte);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); }
.bouton.secondaire {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--bordure-forte);
}

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--cible);
  padding: .5rem .75rem;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .bouton:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.positif { color: var(--positif); }
.negatif { color: var(--negatif); }

/* --- Comptes ------------------------------------------------------------- */

.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lien-entete { color: inherit; text-decoration: none; font-weight: 600; }
.pile { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.pile label { margin-bottom: 0; }
.pile > .bouton { justify-self: start; }
.bouton:disabled { opacity: .55; cursor: progress; }
.bouton.danger { background: var(--negatif); color: #fff; }
.codes {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: .05em;
  padding-left: 2.5rem;
}
@media (min-width: 30rem) { .codes { columns: 2; column-gap: 3rem; } }
.lien-copie code { word-break: break-all; user-select: all; }

/* --- Groupes et dépenses ----------------------------------------------- */

.lien-carte { color: inherit; text-decoration: none; }
.lien-carte:hover { border-color: var(--bordure-forte); }
.chevron { color: var(--discret); font-size: 1.4rem; line-height: 1; }
.carte.colonne { flex-direction: column; align-items: stretch; }
.carte .actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

.tete-groupe h1 { margin-bottom: .5rem; overflow-wrap: anywhere; }
.onglets {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: var(--espace);
}
.onglets a {
  padding: .6rem .9rem;
  min-height: var(--cible);
  color: var(--discret);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.onglets a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.resume { font-size: 1.1rem; margin: 0 0 var(--espace); }

.filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: .5rem; }
.filtres select { min-height: 2.5rem; padding: .3rem .4rem; font-size: .9rem; }

.intertitre {
  color: var(--discret);
  font-size: .85rem;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: .75rem;
}
.carte.depense { justify-content: flex-start; padding: .6rem .8rem; }
.depense .icone { font-size: 1.4rem; width: 2rem; text-align: center; flex: none; }
.depense .texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.depense .texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depense .montants { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.depense.remboursement { background: transparent; border-style: dashed; }

.bouton.flottant {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  box-shadow: 0 4px 14px rgb(0 0 0 / .25);
  min-height: 3.25rem;
  padding: 0 1.4rem;
  font-size: 1.05rem;
}
.contenu:has(.flottant) { padding-bottom: 6rem; }

.solde { display: grid; grid-template-columns: 1fr 5rem auto; }
.barre { height: .5rem; background: var(--bordure); border-radius: 999px; overflow: hidden; }
.barre > span { display: block; height: 100%; }
.positif-fond { background: var(--positif); }
.negatif-fond { background: var(--negatif); }

fieldset { border: 0; padding: 0; margin: .75rem 0 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: .25rem; }
.ligne-participant { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; gap: .5rem; align-items: center; margin: .4rem 0; }
.ligne-participant:not(:has(button)) { grid-template-columns: minmax(0, 1fr) 4.5rem; }
.ligne-participant:not(:has([type=number])) { grid-template-columns: minmax(0, 1fr) auto; }
.ligne-participant.ajout { margin-top: .75rem; }
.encadre { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--rayon); padding: .25rem 1rem; margin-bottom: 1rem; }
.espace-haut { margin-top: 1rem; }

button.lien {
  background: none; border: 0; padding: .4rem 0; min-height: var(--cible);
  color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer;
}
button.lien.negatif { color: var(--negatif); }

/* Formulaire de dépense */
input.grand { font-size: 1.6rem; font-weight: 600; min-height: 3.25rem; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.bascule { position: relative; display: flex; border: 1px solid var(--bordure-forte); border-radius: var(--rayon); overflow: hidden; margin-bottom: .5rem; }
.bascule input { position: absolute; inset: 0 auto auto 0; width: 1px; min-height: 0; height: 1px; opacity: 0; pointer-events: none; }
.bascule label { flex: 1; margin: 0; text-align: center; padding: .6rem; font-weight: 500; cursor: pointer; }
.bascule input:checked + label { background: var(--accent); color: var(--accent-texte); }
.bascule input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: -3px; }
.ligne-part { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: .5rem; align-items: center; margin: .3rem 0; }
.case { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 400; min-height: var(--cible); }
.case input, .puce input { width: 1.3rem; min-height: 1.3rem; height: 1.3rem; accent-color: var(--accent); }
.partage:has(#mode-poids:checked) .seul-montants { display: none; }
.partage:has(#mode-montants:checked) input.seul-poids { display: none; }
.partage:has(#mode-montants:checked) .case { pointer-events: none; }
.partage:has(#mode-montants:checked) .case input { display: none; }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; }
.puce {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400;
  border: 1px solid var(--bordure-forte); border-radius: 999px; padding: .35rem .8rem;
}
.puce:has(input:checked) { border-color: var(--accent); background: var(--surface); }
details { margin-top: .75rem; }
summary { cursor: pointer; color: var(--accent); min-height: var(--cible); display: flex; align-items: center; }

/* --- Reçus ---------------------------------------------------------------- */

.scan { display: grid; gap: .4rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--bordure-forte); margin-bottom: .25rem; }
.scan .scanner { justify-self: stretch; font-size: 1.05rem; }
.lecture-etat { margin: 0; font-size: .92rem; color: var(--discret); }
.lecture-etat:empty { display: none; }
.lecture-etat.en-cours::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em;
  border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%;
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.garder { min-height: 0; }
input.lu, select.lu {
  border: 2px solid var(--positif); background: var(--positif-fond);
  box-shadow: inset 6px 0 0 var(--positif);
}
input.a-verifier, select.a-verifier {
  border: 2px solid var(--alerte); background: var(--alerte-fond);
  box-shadow: inset 6px 0 0 var(--alerte);
}
.badge-lecture {
  display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; vertical-align: .05em;
}
.badge-lecture.lu { background: var(--positif); color: var(--fond); }
.badge-lecture.a-verifier { background: var(--alerte); color: var(--fond); }
.recu-garde { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }