:root {
  --fond: #f3f5f9;
  --carte: #ffffff;
  --texte: #142033;
  --doux: #5b6779;
  --bord: #dfe4ec;
  --nuit: #0f2a4a;
  --accent: #1463d8;
  --accent-doux: #e6efff;
  --vert: #0f8a4b;
  --vert-doux: #e3f6ec;
  --rouge: #c62828;
  --rouge-doux: #fdeaea;
  --orange: #b85c00;
  --orange-doux: #fff1e0;
  --ombre: 0 1px 2px rgba(16, 32, 51, .06), 0 2px 8px rgba(16, 32, 51, .05);
  --sur-accent: #ffffff;
  --rayon: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c1420;
    --carte: #152131;
    --texte: #e8eef6;
    --doux: #9aa8ba;
    --bord: #26354a;
    --nuit: #0a1d33;
    --accent: #5b9bff;
    --accent-doux: #1a2c47;
    --vert: #3ccf85;
    --vert-doux: #12301f;
    --rouge: #ff6b6b;
    --rouge-doux: #3a1717;
    --orange: #ffad5c;
    --orange-doux: #3a2610;
    --ombre: none;
    --sur-accent: #06152b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* Un element masque reste masque, meme si sa classe lui donne un display. */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

button, input, select { font: inherit; color: inherit; }

.barre {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--nuit);
  color: #fff;
}
.boutique { font-weight: 700; font-size: 1.05rem; }
.date { font-size: .85rem; opacity: .8; }
.logo { border-radius: 9px; flex: none; }

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px;
  outline: none;
}

h2 { font-size: 1.1rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 0 0 10px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px;
  margin-bottom: 14px;
}

.bonus-jour {
  background: linear-gradient(135deg, #0f8a4b, #0b6b3a);
  color: #fff;
  border: 0;
}
.bonus-jour .etiquette { opacity: .85; font-size: .9rem; }
.bonus-jour .valeur { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; }

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.chiffres div { background: rgba(255, 255, 255, .14); border-radius: 10px; padding: 8px; }
.chiffres b { display: block; font-size: 1rem; }
.chiffres span { font-size: .78rem; opacity: .85; }

.grands-boutons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.grand {
  border: 0;
  border-radius: var(--rayon);
  padding: 16px 12px;
  min-height: 76px;
  text-align: left;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--ombre);
}
.grand small { display: block; font-weight: 500; font-size: .8rem; opacity: .85; }
.grand.depot { background: var(--accent); color: var(--sur-accent); }
.grand.retrait { background: var(--nuit); color: #fff; }
.grand.autre { grid-column: 1 / -1; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); min-height: 52px; text-align: center; }

.avertissement {
  background: var(--orange-doux);
  color: var(--orange);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: .92rem;
}
.avertissement button { margin-top: 8px; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--bord); }
.ligne-tx {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 2px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.ligne-tx .heure { font-variant-numeric: tabular-nums; color: var(--doux); font-size: .85rem; }
.ligne-tx .quoi { min-width: 0; }
.ligne-tx .quoi b { display: block; }
.ligne-tx .quoi > span { color: var(--doux); font-size: .85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-tx .combien { text-align: right; font-variant-numeric: tabular-nums; }
.ligne-tx .combien b { display: block; }
.plus { color: var(--vert); font-size: .85rem; font-weight: 600; }
.point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

.vide { color: var(--doux); text-align: center; padding: 18px 8px; margin: 0; }

.onglets {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--carte);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
}
.onglets button {
  background: none;
  border: 0;
  padding: 8px 4px 10px;
  font-size: .78rem;
  color: var(--doux);
  cursor: pointer;
  min-height: 58px;
}
.onglets .ic { display: block; font-size: 1.3rem; line-height: 1.2; }
.onglets button[aria-current="page"] { color: var(--accent); font-weight: 700; }

.btn {
  border-radius: 11px;
  padding: 11px 16px;
  min-height: 46px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
}
.btn.primaire { background: var(--accent); color: var(--sur-accent); }
.btn.secondaire { background: var(--carte); border-color: var(--bord); }
.btn.danger { background: var(--rouge-doux); color: var(--rouge); }
.btn.plein { width: 100%; }
.btn.petit { min-height: 38px; padding: 7px 12px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: default; }

.champ { display: block; margin: 12px 0; }
.champ > span { display: block; font-size: .88rem; color: var(--doux); margin-bottom: 4px; }
.champ input, .champ select {
  width: 100%;
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 11px 12px;
  background: var(--fond);
  min-height: 46px;
}
.champ input:focus, .champ select:focus, .grille input:focus, .grille select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
#txMontant { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.case { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .92rem; }
.case input { width: 20px; height: 20px; }

fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
legend { font-size: .88rem; color: var(--doux); margin-bottom: 6px; padding: 0; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces label { position: relative; }
.puces input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puces label > span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--carte);
  font-size: .92rem;
}
.puces input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); font-weight: 600; }
.puces input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.bonus-ligne {
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--vert-doux);
  color: var(--vert);
  font-weight: 600;
  min-height: 44px;
}
.bonus-ligne.manque { background: var(--orange-doux); color: var(--orange); font-weight: 500; }

details { margin: 10px 0; }
summary { cursor: pointer; color: var(--accent); font-size: .92rem; padding: 6px 0; }

.erreur { color: var(--rouge); min-height: 1.2em; margin: 8px 0; font-size: .92rem; }
.erreur:empty { min-height: 0; margin: 0; }

.actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 8px 0 10px; }

dialog {
  width: min(560px, 100vw);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto auto 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--carte);
  color: var(--texte);
  overflow-y: auto;
}
dialog::backdrop { background: rgba(8, 16, 28, .55); }
@media (min-width: 640px) {
  dialog { margin: auto; border-radius: 18px; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--texte);
  color: var(--fond);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: .92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 6px; text-align: right; border-bottom: 1px solid var(--bord); font-size: .92rem; }
th:first-child, td:first-child { text-align: left; }
/* Un montant ne se coupe jamais en deux lignes (« 500 000 » / « Ar »). */
th:not(:first-child), td:not(:first-child) { white-space: nowrap; }
td.ecart { white-space: normal; }
.nw { white-space: nowrap; }
th { font-size: .8rem; color: var(--doux); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 2px solid var(--bord); }
.tableau { overflow-x: auto; }

.sel-jour { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sel-jour input { flex: 1; min-width: 0; border: 1px solid var(--bord); border-radius: 10px; padding: 9px 10px; background: var(--carte); min-height: 44px; }
.sel-jour button { width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--bord); background: var(--carte); cursor: pointer; font-size: 1.1rem; }

.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.deux .champ { margin: 8px 0; }

.ecart-ok { color: var(--vert); font-weight: 600; }
.ecart-moins { color: var(--rouge); font-weight: 600; }
.ecart-plus { color: var(--orange); font-weight: 600; }

.periodes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.periodes button { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: 7px 13px; min-height: 40px; cursor: pointer; font-size: .9rem; }
.periodes button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.stats .carte { margin: 0; }
.stats .valeur { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stats .etiquette { font-size: .82rem; color: var(--doux); }
.stats .carte.vert .valeur { color: var(--vert); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.grille { width: 100%; }
.grille td, .grille th { padding: 5px 3px; text-align: left; }
.grille td, .grille th { white-space: nowrap; }
.grille td:nth-child(3) { width: 66px; }
.grille input, .grille select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 8px 5px;
  font-size: .92rem;
  background: var(--fond);
  min-height: 42px;
}
.grille .suppr { width: 40px; min-height: 42px; border: 0; background: var(--rouge-doux); color: var(--rouge); border-radius: 8px; cursor: pointer; }
.grille td:last-child { width: 44px; }

.rangee { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aide { color: var(--doux); font-size: .88rem; margin: 6px 0 10px; }
.discret { color: var(--doux); font-size: .82rem; text-align: center; margin: 18px 0 4px; }

@media (min-width: 900px) {
  .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}

.tableau input.mini {
  width: 100%;
  min-width: 84px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 8px;
  background: var(--fond);
  min-height: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
h2 small { font-weight: 400; color: var(--doux); font-size: .85rem; }