/* Comptabilité SIT — sobre, mobile d'abord (390 px), aucune police externe. */

:root {
  --fond: #f6f6f3;
  --surface: #ffffff;
  --texte: #1c1c1a;
  --discret: #5f5f5a;
  --bordure: #d6d6cf;
  --bordure-forte: #a9a9a0;
  --accent: #1f5f8b;
  --accent-fonce: #174a6d;
  --accent-texte: #ffffff;
  --succes: #1f6b2a;
  --succes-fond: #e8f3ea;
  --erreur: #a8261d;
  --erreur-fond: #fceeed;
  --alerte: #8a5300;
  --alerte-fond: #fff4e0;
  --rayon: 8px;
  --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: #161615;
    --surface: #212120;
    --texte: #ecece8;
    --discret: #a6a69f;
    --bordure: #3a3a37;
    --bordure-forte: #5a5a55;
    --accent: #6cb2e3;
    --accent-fonce: #8cc4ec;
    --accent-texte: #0c1a24;
    --succes: #7fd08a;
    --succes-fond: #1b2e1e;
    --erreur: #ff8d84;
    --erreur-fond: #3a1d1b;
    --alerte: #f1b659;
    --alerte-fond: #33280f;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
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; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }

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

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

.bandeau {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-bottom: 2px solid var(--alerte);
  padding: .5rem var(--espace);
  font-size: .9rem;
}
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding: .5rem var(--espace) 0;
}
.marque { font-weight: 700; text-decoration: none; color: var(--texte); letter-spacing: .08em; }
.menu {
  display: flex;
  gap: 0 .25rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 .65rem;
  text-decoration: none;
  color: var(--texte);
  border-bottom: 3px solid transparent;
}
.menu a:hover { border-bottom-color: var(--bordure-forte); }
.menu a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }

.contenu { padding: var(--espace); max-width: 64rem; margin: 0 auto; }

.discret { color: var(--discret); }
.pre { white-space: pre-wrap; }
.gros { font-size: 1.6rem; font-weight: 600; margin: 0; }
.erreur { color: var(--erreur); }
.succes { color: var(--succes); }
.negatif { color: var(--erreur); }

.alerte {
  background: var(--alerte-fond);
  border-left: 4px solid var(--alerte);
  padding: .5rem .75rem;
  border-radius: var(--rayon);
}
.flash {
  margin: 0 0 var(--espace);
  padding: .65rem .85rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--surface);
}
.flash.succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.flash.erreur { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }

/* --- Blocs ---------------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--espace);
  margin: 0 0 var(--espace);
}
.carte h2 { margin-top: 0; }
.carte-etroite { max-width: 24rem; margin: 2rem auto; }
.grille { display: grid; gap: var(--espace); grid-template-columns: 1fr; margin-top: var(--espace); }
.titre-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: var(--espace); }
.titre-actions h1 { margin: 0; }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--bordure); min-height: var(--cible);
}
.liste-simple li:last-child { border-bottom: 0; }
.total { display: flex; justify-content: space-between; font-weight: 700; margin: .5rem 0 0; }

.definitions { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.definitions dt { color: var(--discret); }
.definitions dd { margin: 0; }

details.repliable > summary, details.filtres > summary {
  cursor: pointer; min-height: var(--cible); display: flex; align-items: center; font-weight: 600;
}
details.repliable[open] > summary { margin-bottom: .5rem; }
details.filtres { padding-top: 0; padding-bottom: 0; }
details.filtres[open] { padding-bottom: var(--espace); }

/* --- Boutons ---------------------------------------------------------------- */

button, .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  padding: .5rem 1.1rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-texte);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--rayon);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
button:hover, .bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
button.secondaire, .bouton.secondaire { background: var(--surface); color: var(--accent); border-color: var(--accent); }
button.secondaire:hover, .bouton.secondaire:hover { background: var(--fond); }
button.danger, .bouton.danger { color: var(--erreur); border-color: var(--erreur); background: var(--surface); }
button.succes-bouton { background: var(--succes); border-color: var(--succes); color: #fff; }
button.grand, .bouton.grand { min-height: 3.5rem; font-size: 1.15rem; padding: .75rem 1.5rem; }
button.petit { min-height: var(--cible); padding: .25rem .75rem; font-size: .9rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: var(--espace) 0; }
.actions form { margin: 0; }
.actions-saisie .bouton { flex: 1 1 9rem; }
.actions-ligne { white-space: nowrap; }
.actions-ligne .petit { margin: 0 .15rem .15rem 0; }
.pagination { display: flex; gap: .5rem; justify-content: space-between; margin: var(--espace) 0; }

.badge {
  display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--fond); border: 1px solid var(--bordure-forte); color: var(--discret); vertical-align: middle;
}
.badge.brouillon { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte); }
.badge.systeme { border-color: var(--accent); color: var(--accent); }
.icone { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.piece { color: var(--discret); margin-left: .35rem; }

/* --- Formulaires ------------------------------------------------------------- */

.formulaire { max-width: 40rem; }
.champ { margin: 0 0 .85rem; }
.champ.champ-large { grid-column: 1 / -1; }
label { display: block; font-weight: 600; margin: 0 0 .25rem; }
label.radio {
  display: flex; align-items: center; gap: .6rem; min-height: var(--cible); font-weight: 400; margin: 0;
}
input, select, textarea {
  font: inherit;
  width: 100%;
  min-height: var(--cible);
  padding: .5rem .65rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
}
textarea { min-height: 5rem; }
input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; min-height: 0; flex: none; accent-color: var(--accent); }
fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem .85rem .75rem; margin: 0 0 .85rem; min-width: 0; }
legend { font-weight: 600; padding: 0 .35rem; }
.rangee { display: flex; gap: .5rem; align-items: stretch; }
.rangee > select, .rangee > input { flex: 1 1 auto; min-width: 0; }
.rangee > button { flex: none; }
.rapide { background: var(--fond); border: 1px dashed var(--bordure-forte); border-radius: var(--rayon); padding: .65rem; margin-top: .5rem; }
.montant-bloc input[name="montant"] { font-size: 1.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.apercu { margin: .5rem 0 0; color: var(--discret); font-variant-numeric: tabular-nums; min-height: 1.5rem; }

/* Champs conditionnels : CSS seulement. */
.champs-manuels, .si-personne, .si-taxes { display: none; }
form:has(input[name="mode"][value="ttc"]:checked, input[name="mode"][value="ht"]:checked) .si-taxes { display: flex; gap: 1rem; }
form:has(input[name="mode"][value="manuel"]:checked) .champs-manuels { display: block; }
form:has(input[name="paye_par"][value="personne"]:checked) .si-personne { display: block; }

.carte-ligne {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; padding: .75rem;
  border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: .75rem; background: var(--surface);
}
.carte-ligne .champ:first-child { grid-column: 1 / -1; }
.grille-filtres { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }

/* --- Tableaux ------------------------------------------------------------------ */

.tableau { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--espace); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
th { font-size: .85rem; color: var(--discret); font-weight: 600; }
td.montant, .montant, td.nombre, th.nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tfoot td { font-weight: 700; border-top: 2px solid var(--bordure-forte); }
tr.inactif td { color: var(--discret); }
tr.edition td { background: var(--fond); }
td input, td select { min-width: 8rem; }

/* Sous 640 px : chaque ligne devient une carte. */
@media (max-width: 639px) {
  table.cartes, table.cartes thead, table.cartes tbody, table.cartes tfoot,
  table.cartes tr, table.cartes td { display: block; width: 100%; }
  table.cartes thead { position: absolute; left: -9999px; }
  table.cartes { background: transparent; }
  table.cartes tbody tr, table.cartes tfoot tr {
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
    margin-bottom: .6rem; padding: .35rem .75rem;
  }
  table.cartes td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border-bottom: 1px solid var(--bordure); padding: .4rem 0; text-align: right;
  }
  table.cartes td:last-child { border-bottom: 0; }
  table.cartes td[data-label]::before {
    content: attr(data-label); flex: none; color: var(--discret); font-size: .85rem; font-weight: 600; text-align: left;
  }
  table.cartes td.description { text-align: left; font-weight: 600; }
  table.cartes td.description::before { content: none; }
  table.cartes td:empty { display: none; }
  table.cartes td.actions-ligne { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  table.cartes td input, table.cartes td select { min-width: 0; width: 60%; }
  table.cartes td[colspan] { display: flex; }
}

@media (min-width: 640px) {
  .grille { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .grille-filtres { grid-template-columns: repeat(2, 1fr); }
  .carte-ligne { grid-template-columns: 2fr 1fr 1fr; }
  .carte-ligne .champ:nth-child(n+4) { grid-column: auto; }
}

@media (min-width: 48rem) {
  .entete { display: flex; align-items: center; gap: 1.5rem; padding-top: 0; }
  h1 { font-size: 1.6rem; }
  .grille-filtres { grid-template-columns: repeat(4, 1fr); }
}

/* Fiche projet : revenus, dépenses, solde */
.chiffres-projet { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: var(--espace) 0; }
.chiffres-projet .chiffre { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .75rem 1rem; display: flex; flex-direction: column; }
.chiffres-projet strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.chiffres-projet .solde-positif { background: var(--succes-fond); border-color: var(--succes); }
.chiffres-projet .solde-positif strong { color: var(--succes); }
.chiffres-projet .solde-negatif { background: var(--erreur-fond); border-color: var(--erreur); }
.chiffres-projet .solde-negatif strong { color: var(--erreur); }

tr.a-repartir th, tr.a-repartir td { font-size: 1.1rem; border-top: 2px solid var(--bordure-forte); }
tr.a-repartir .discret { display: block; font-size: .85rem; font-weight: normal; }
tr.ar-positif { color: var(--succes); background: var(--succes-fond); }
tr.ar-negatif { color: var(--erreur); background: var(--erreur-fond); }
tr.ar-zero { color: var(--discret); }

/* N° d'écriture dans les listes ; paramètres de lecture des reçus. */
.badge.numero { font-variant-numeric: tabular-nums; font-weight: 500; margin-right: .25rem; }
#lecture .definitions { grid-template-columns: 1fr; }
#lecture .definitions dt { font-weight: 600; color: var(--texte); }
#lecture .definitions dd { margin-bottom: .5rem; overflow-wrap: anywhere; }

/* Comptes courants des personnes (2100) */
.compte-avance { color: var(--alerte); }
.compte-du { color: var(--accent); }
.compte-a-jour { color: var(--succes); }
.encadre-compte .actions { margin: .5rem 0 1rem; }

/* Propositions de Claude (accueil, /propositions) et accès IA (paramètres) */
.bouton.petit { padding: .25rem .75rem; font-size: .9rem; }
.proposition { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; justify-content: space-between; }
.proposition-texte { flex: 1 1 16rem; min-width: 0; }
.proposition-texte .montant { margin-left: .35rem; font-weight: 600; }
.proposition-actions { margin: .25rem 0; }
.rejet > summary { list-style: none; }
.rejet > summary::-webkit-details-marker { display: none; }
.rejet[open] > form { margin-top: .5rem; }
.bandeau-claude { background: var(--fond); border-left: 4px solid var(--accent); padding: .6rem .9rem; margin: 0 0 var(--espace); border-radius: var(--rayon); }
.jeton-affiche { font-family: ui-monospace, monospace; word-break: break-all; background: var(--fond); border: 1px dashed var(--bordure-forte); padding: .6rem; border-radius: var(--rayon); }
pre.commande { white-space: pre-wrap; word-break: break-all; background: var(--fond); padding: .6rem; border-radius: var(--rayon); font-size: .85rem; }