/* Compt'AMG — mise en page. Aucune couleur en dur : uniquement des var().
   Les valeurs viennent de /design/tokens.css (Rams). */

/* Une règle de classe avec `display:` bat le [hidden]{display:none} du
   navigateur : .porte (flex) et .autres (grid) restaient visibles une
   fois cachées. Mesuré le 2026-08-30, pas supposé. */
[hidden] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--fonte-colonne);
  font-size: var(--corps-base);
  line-height: var(--interligne-normal);
  font-variant-numeric: var(--chiffres);
  overscroll-behavior-y: contain; /* jamais `none` : tue le défilement en WebView */
}

.ecran {
  padding: max(var(--e-5), env(safe-area-inset-top)) var(--e-4)
           calc(var(--e-5) + env(safe-area-inset-bottom));
  min-height: 100%;
}

.titre-ecran {
  font-family: var(--fonte-titre);
  font-size: var(--corps-titre);
  letter-spacing: var(--chasse-titre);
  font-weight: var(--graisse-forte);
  margin: 0 0 var(--e-5);
}

.titre-section {
  font-size: var(--corps-section);
  letter-spacing: var(--chasse-section);
  text-transform: uppercase;
  color: var(--c-texte-tenu);
  font-weight: var(--graisse-moyenne);
  margin: var(--e-5) 0 var(--e-2);
}

.note { color: var(--c-texte-tenu); font-size: var(--corps-note); }

/* ── Porte d'entrée ──────────────────────────────────────────────────── */
.porte {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--e-4); height: 100%; padding: var(--e-6);
}
.porte h1 {
  font-family: var(--fonte-titre); font-size: var(--corps-titre);
  letter-spacing: var(--chasse-titre); margin: 0 0 var(--e-4);
}
input {
  font: inherit; color: var(--c-texte); background: var(--c-surface);
  border: var(--trait-fin) solid var(--c-bord); border-radius: var(--rayon-sm);
  padding: var(--e-3); min-height: var(--cible-min); width: 100%;
}
input:focus-visible { outline: var(--trait-focus) solid var(--c-focus); }

.bouton-plein {
  font: inherit; font-weight: var(--graisse-moyenne);
  background: var(--c-surface-3); color: var(--c-texte);
  border: var(--trait-fin) solid var(--c-bord-fort);
  border-radius: var(--rayon-sm); min-height: var(--cible-min);
  padding: 0 var(--e-5); width: 100%;
}

/* ── Comptoir ────────────────────────────────────────────────────────── */
.chiffres { display: grid; gap: var(--e-2); }
.chiffre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); width: 100%; text-align: left;
  background: var(--c-surface); border: var(--trait-fin) solid var(--c-bord);
  border-radius: var(--rayon-lg); padding: var(--e-4);
  color: var(--c-texte); font: inherit; min-height: var(--cible-confort);
}
.chiffre-valeur {
  font-family: var(--fonte-montant); font-size: var(--corps-titre);
  font-weight: var(--graisse-forte); letter-spacing: var(--chasse-montant);
}
.chiffre-nom { color: var(--c-texte-second); font-size: var(--corps-info); }

/* ── Barre du tri ────────────────────────────────────────────────────── */
.barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-4);
}
.restant { color: var(--c-texte-second); font-size: var(--corps-info); }
.restant b { color: var(--c-texte); font-family: var(--fonte-montant); }
.icone {
  width: var(--cible-min); height: var(--cible-min);
  display: grid; place-items: center; background: none; border: 0; padding: 0;
  color: var(--c-texte-second);
}
.icone svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: var(--trait-icone); stroke-linecap: round; stroke-linejoin: round;
}

/* ── La carte ────────────────────────────────────────────────────────── */
.pile { position: relative; min-height: 13.5rem; margin-bottom: var(--e-5); }
.carte {
  background: var(--c-surface); border: var(--trait-fin) solid var(--c-bord);
  border-radius: var(--rayon-xl); padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-2);
  transition: transform var(--duree-carte) var(--sortie), opacity var(--duree-carte) var(--sortie);
}
.carte.part { transform: translateX(-110%); opacity: 0; }
.carte-tete {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--c-texte-tenu); font-size: var(--corps-meta);
}
.montant {
  font-family: var(--fonte-montant); font-size: var(--corps-heros);
  font-weight: var(--graisse-forte); letter-spacing: var(--chasse-montant);
  line-height: var(--interligne-serre);
}
.montant .centimes { font-size: .5em; }
.tiers { font-size: var(--corps-base); overflow-wrap: anywhere; }
.entite { color: var(--c-texte-second); font-size: var(--corps-info); }
.lot {
  align-self: flex-start; font-size: var(--corps-meta);
  color: var(--c-texte); background: var(--c-surface-3);
  border-radius: var(--rayon-plein); padding: var(--e-1) var(--e-3);
}

/* ── Les cibles d'activité ───────────────────────────────────────────── */
.cibles { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.cible {
  min-width: var(--cible-min); height: var(--cible-min);
  border: 0; border-radius: var(--rayon-md); padding: 0 var(--e-3);
  font-family: var(--fonte-montant); font-weight: var(--graisse-forte);
  font-size: var(--corps-montant); letter-spacing: var(--chasse-titre);
  background: var(--jeton); color: var(--encre);
}
.cible:active { transform: scale(.94); }

.pied {
  display: flex; justify-content: space-between;
  margin-top: var(--e-5);
}
.lien {
  background: none; border: 0; font: inherit; padding: var(--e-3) 0;
  min-height: var(--cible-min); color: var(--c-texte-second);
}
.lien:disabled { color: var(--c-texte-tenu); opacity: .5; }

/* ── Feuille maison (remplace tout composant du système) ─────────────── */
.voile { position: fixed; inset: 0; background: var(--c-voile); }
.feuille {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--c-surface); border-top-left-radius: var(--rayon-xl);
  border-top-right-radius: var(--rayon-xl);
  border-top: var(--trait-fin) solid var(--c-bord);
  padding: var(--e-3) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom));
  max-height: 80vh; overflow-y: auto;
}
.poignee {
  width: 36px; height: 4px; border-radius: var(--rayon-plein);
  background: var(--c-bord-fort); margin: 0 auto var(--e-3);
}
.segments, .choix { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.segments button, .choix button {
  font: inherit; font-size: var(--corps-info);
  background: var(--c-surface-2); color: var(--c-texte-second);
  border: var(--trait-fin) solid var(--c-bord); border-radius: var(--rayon-sm);
  min-height: var(--cible-min); padding: 0 var(--e-4);
}
.segments button.actif, .choix button.actif {
  color: var(--c-texte); border-color: var(--c-bord-fort);
  background: var(--c-surface-3); font-weight: var(--graisse-moyenne);
}
.feuille .bouton-plein { margin-top: var(--e-5); }

@media (prefers-reduced-motion: reduce) {
  .carte { transition: none; }
  .cible:active { transform: none; }
}

/* ── Listes, rangs, demandes, navigation ─────────────────────────────── */
.ecran { padding-bottom: calc(var(--cible-confort) + var(--e-6) + env(safe-area-inset-bottom)); }

.liste { display: grid; gap: var(--e-2); }

.rang, .rang-facture {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  text-align: left; font: inherit; color: var(--c-texte);
  background: var(--c-surface); border: var(--trait-fin) solid var(--c-bord);
  border-radius: var(--rayon-lg); padding: var(--e-3) var(--e-4);
  min-height: var(--cible-confort);
}
.rang-facture { align-items: flex-start; justify-content: space-between; }
.rang-corps { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rang-fin { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); }
.rang-titre { font-size: var(--corps-base); overflow-wrap: anywhere; }
.rang-info { color: var(--c-texte-tenu); font-size: var(--corps-meta); }
.rang-montant {
  font-family: var(--fonte-montant); font-size: var(--corps-montant);
  letter-spacing: var(--chasse-montant); white-space: nowrap;
}
.rang-montant .centimes, .montant-moyen .centimes { font-size: .7em; }

.vide { color: var(--c-texte-tenu); font-size: var(--corps-info); padding: var(--e-5) 0; }

.demande {
  background: var(--c-surface); border: var(--trait-fin) solid var(--c-bord);
  border-radius: var(--rayon-lg); padding: var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.montant-moyen {
  font-family: var(--fonte-montant); font-size: var(--corps-titre);
  font-weight: var(--graisse-forte); letter-spacing: var(--chasse-montant);
}
.propose { margin: 0; font-size: var(--corps-base); }
.propose b { font-weight: var(--graisse-moyenne); }

.actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.actions button {
  font: inherit; font-size: var(--corps-info); min-height: var(--cible-min);
  padding: 0 var(--e-4); border-radius: var(--rayon-sm);
  background: var(--c-surface-2); color: var(--c-texte-second);
  border: var(--trait-fin) solid var(--c-bord);
}
.actions .oui { color: var(--c-texte); border-color: var(--c-bord-fort); background: var(--c-surface-3); }
.autres { display: grid; gap: var(--e-2); margin-top: var(--e-2); }

.lot.actif { background: var(--c-texte); color: var(--c-fond); }

.pastille {
  width: 20px; height: 20px; border-radius: var(--rayon-sm);
  background: var(--jeton); flex: none;
}

.nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; align-items: center;
  background: var(--c-surface); border-top: var(--trait-fin) solid var(--c-bord);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  flex: 1; height: var(--cible-confort); background: none; border: 0;
  display: grid; place-items: center; color: var(--c-texte-tenu);
}
.nav button.actif { color: var(--c-texte); }
.nav svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: var(--trait-icone); stroke-linecap: round; stroke-linejoin: round;
}

#sortie-rapport { margin-top: var(--e-4); }
#sortie-rapport a { display: block; text-align: center; text-decoration: none; line-height: var(--cible-min); }

/* ── Le geste qu'on vient de faire, et comment le défaire ───────────────
   Il se montre là où l'œil est déjà (sous les cibles), pas en bas en gris :
   Adam a mal classé une opération et n'a pas trouvé le bouton. */
.dernier {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-top: var(--e-4);
  background: var(--c-surface-2); border: var(--trait-fin) solid var(--c-bord-fort);
  border-radius: var(--rayon-lg); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  min-height: var(--cible-min);
}
#dernier-texte { font-size: var(--corps-info); color: var(--c-texte-second); }
#dernier-texte b { color: var(--c-texte); font-weight: var(--graisse-moyenne); }
#annuler {
  font: inherit; font-size: var(--corps-info); font-weight: var(--graisse-moyenne);
  min-height: var(--cible-min); padding: 0 var(--e-4); flex: none;
  background: var(--c-texte); color: var(--c-fond);
  border: 0; border-radius: var(--rayon-sm);
}

/* ── Qui envoie, qui reçoit ──────────────────────────────────────────────
   Le nom du tiers n'existe que dans le libellé (aucune contrepartie n'est
   renseignée en base) : la flèche montre ce qu'on en a tiré, et la référence
   bancaire reste visible, c'est la seule clé pour retrouver le destinataire. */
.fleche {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2);
  font-size: var(--corps-base);
}
.fleche i, .fl { font-style: normal; color: var(--c-texte-tenu); }
.fleche span:last-child { font-weight: var(--graisse-moyenne); }
.reference {
  font-size: var(--corps-note); color: var(--c-texte-tenu);
  letter-spacing: var(--chasse-section);
}

/* Aucune décoration dessinée par le système dans nos champs. */
input::-webkit-search-cancel-button,
input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ── Répartir une opération entre plusieurs activités ────────────────────
   Un virement peut couvrir deux activités. On choisit les activités, on pose
   un montant sur chacune, et le reste doit tomber à zéro : une ventilation
   qui ne boucle pas serait un faux. */
.repartition { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.part {
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--c-surface); border: var(--trait-fin) solid var(--c-bord);
  border-radius: var(--rayon-lg); padding: var(--e-2) var(--e-3);
  min-height: var(--cible-min);
}
.part .pastille { width: 16px; height: 16px; }
.part .nom { flex: 1; font-size: var(--corps-info); }
.part input {
  width: 8.5rem; text-align: right; min-height: var(--cible-min);
  font-family: var(--fonte-montant); font-size: var(--corps-montant);
  background: var(--c-surface-2); padding: 0 var(--e-3);
}
.reste {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-top: var(--e-1);
}
#reste-texte { font-size: var(--corps-info); color: var(--c-texte-second); }
#reste-texte.boucle { color: var(--etat-ok); }
#reste-texte.ecart { color: var(--etat-danger); }
#valider-parts {
  font: inherit; font-weight: var(--graisse-moyenne); min-height: var(--cible-min);
  padding: 0 var(--e-5); border: 0; border-radius: var(--rayon-sm);
  background: var(--c-texte); color: var(--c-fond);
}
#valider-parts:disabled { background: var(--c-surface-3); color: var(--c-texte-tenu); }
.cible.choisie { outline: var(--trait-fort) solid var(--c-texte); outline-offset: 2px; }
.deja-reparti {
  display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1);
  font-size: var(--corps-meta); color: var(--c-texte-second);
}
.deja-reparti b { color: var(--c-texte); font-weight: var(--graisse-moyenne); }

/* ── Les informations de contexte d'une opération ────────────────────────
   Le nom du porteur, pas les quatre chiffres : c'est le nom qui dit qui a
   payé. La note d'Adam et le motif écrit par Sylvain restent distincts. */
.detail { font-size: var(--corps-meta); color: var(--c-texte-second); }
.detail b { color: var(--c-texte); font-weight: var(--graisse-moyenne); }
.dit-sylvain {
  font-size: var(--corps-note); color: var(--c-texte-tenu);
  border-left: var(--trait-fort) solid var(--c-bord-fort);
  padding-left: var(--e-2); margin: var(--e-1) 0 0;
}
.note-adam {
  font-size: var(--corps-info); color: var(--c-texte);
  border-left: var(--trait-fort) solid var(--c-texte-tenu);
  padding-left: var(--e-2);
}
textarea {
  font: inherit; width: 100%; color: var(--c-texte);
  background: var(--c-surface-2); border: var(--trait-fin) solid var(--c-bord);
  border-radius: var(--rayon-sm); padding: var(--e-3); resize: none;
}
textarea:focus-visible { outline: var(--trait-focus) solid var(--c-bord-fort); }

/* ── Confirmer une règle ─────────────────────────────────────────────────
   Une règle touche le passé de tout un tiers. Elle ne s'arme jamais seule et
   ne part jamais sans un « oui » : Adam a classé 266 opérations dont
   certaines qu'il avait écartées, faute de cette question. */
.question {
  font-size: var(--corps-base); margin: 0 0 var(--e-2);
}
.question b { font-weight: var(--graisse-forte); }
.deux-boutons { display: flex; gap: var(--e-3); margin-top: var(--e-5); }
.deux-boutons .bouton-plein { flex: 1; }
.bouton-plein.fort { background: var(--c-texte); color: var(--c-fond); border: 0; }
.lot { transition: none; }