/* =============================================================================
   LA PAGE COMPTABILITÉ — `CPTD1`, 09/09/2026.

   ⛔ ELLE EST DESSINÉE POUR UN TÉLÉPHONE D'ABORD, et c'est un choix, pas une
      concession. Le geste le plus fréquent — photographier une facture — se
      fait debout, une main occupée. Ce qui tient à 360 px tient partout ;
      l'inverse n'est pas vrai.
   ============================================================================= */

/* ⛔ LE GRIS DU HUB EST TROP FAIBLE POUR CETTE PAGE, ET C'EST UN DÉFAUT MESURÉ
      PAR L'USAGE. David, au téléphone, 10/09 : *« difficile à lire sur le
      téléphone. »* Le premier jet reprenait `--gris` (#8b95a5) à 11 et 12 px —
      c'est lisible sur un écran de bureau à 60 cm, **pas dans une main, debout,
      dans un salon éclairé.**
      ⟶ Cette page porte donc son propre gris, plus clair, et **aucun texte n'y
        descend sous 13 px**. Un chiffre qu'on plisse les yeux pour lire est un
        chiffre qu'on finit par ne plus lire. */
.compta {
  max-width: 760px;
  --gris-lisible: #b8c2d0;
}

/* ⚠️  LES 40 px DE MARGE LATÉRALE DE `.page` MANGENT 11 % D'UN ÉCRAN DE 360 px.
       Sur un téléphone on les réduit : la place rendue va au contenu. */
@media (max-width: 620px) {
  .page.compta { padding: 14px 12px 60px; }
  .compta h1 { font-size: 1.5rem; }
}

/* `TRI-1` — le titre et le bouton de langue, sur une ligne. */
.compta-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ⛔ CE QUI NE SE RETOURNE JAMAIS — `TRI-1`, 20/09. Un montant suivi de ₪ et
      une date `AAAA-MM-JJ` sont des suites MÊLÉES : en hébreu, le bidi les
      réordonne. Même recette que `ticket.css:58-62` et `hub.css`. */
.compta-quand, .compta-combien, .compta-total b { direction: ltr; unicode-bidi: embed; }

/* ⭐ LE BOUTON DE PHOTO EST LE PLUS GROS DE L'ÉCRAN, ET IL EST EN HAUT.
      `V3-y` : toute cible se touche au doigt, 60 px de haut minimum. Celui-ci
      en fait 92 — c'est le geste qui décide si cette page sert à quelque chose. */
.compta-prendre {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 92px; margin: 14px 0;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid var(--or); border-radius: 12px;
  font-size: 18px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.compta-prendre:active { background: var(--bleu); }
.compta-prendre-icone { font-size: 30px; line-height: 1; }

.compta-periode {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  margin: 14px 0 10px;
}
.compta-periode label { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--gris-lisible); }
.compta-periode input {
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  padding: 8px; font-family: inherit; font-size: 15px;
}

.compta-totaux {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px; margin-bottom: 14px;
  background: var(--bleu); border: 1px solid var(--bleu-clair); border-radius: 12px;
}
.compta-total { flex: 1 1 130px; }
.compta-total span { display: block; font-size: 14px; color: var(--gris-lisible); }
.compta-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.compta-total.attente b { color: var(--jaune); }

/* ⛔ L'AVERTISSEMENT N'EST PAS DÉCORATIF (`B000-D220`). Il occupe toute la
      largeur sous les totaux, parce qu'un total pris pour une déclaration est
      pire qu'aucun total. */
.compta-avertissement {
  flex: 1 1 100%; margin: 6px 0 0;
  font-size: 14px; color: var(--gris-lisible); line-height: 1.45;
}

.compta-ligne {
  border: 1px solid var(--bleu-clair); border-radius: 12px;
  margin-bottom: 8px; overflow: hidden;
}
.compta-ligne.attente { border-color: var(--jaune-fonce); }
.compta-ligne.ouverte { border-color: var(--or); }

.compta-tete {
  display: grid; width: 100%; gap: 2px 10px; padding: 12px;
  grid-template-columns: 1fr auto;
  background: none; color: var(--texte); border: 0;
  font-family: inherit; text-align: start; cursor: pointer;
  min-height: 60px;
}
.compta-quand { font-size: 14px; color: var(--gris-lisible); font-variant-numeric: tabular-nums; }
.compta-combien {
  grid-row: 1 / span 2; align-self: center;
  font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compta-qui { font-size: 18px; font-weight: 600; }
.compta-quoi { grid-column: 1; font-size: 14px; color: var(--gris-lisible); }
.compta-etiquette {
  grid-column: 1 / -1; justify-self: start; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--jaune-fonce); color: var(--texte); font-size: 13px;
}

/* ⚠️  SUR UN ÉCRAN ÉTROIT, LE MONTANT PASSE À LA LIGNE PLUTÔT QUE D'ÉCRASER LE
       NOM. Le premier jet le gardait dans une colonne `auto` à droite : sur
       360 px, un fournisseur un peu long réduisait le montant à des points de
       suspension — **la seule information qu'on lit vraiment de loin.** */
@media (max-width: 620px) {
  .compta-tete { grid-template-columns: 1fr; padding: 14px 12px; }
  .compta-combien { grid-row: auto; justify-self: start; margin-top: 2px; font-size: 24px; }
}

.compta-fiche { padding: 0 12px 12px; border-top: 1px solid var(--bleu-clair); }

.compta-champs {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0;
}
@media (min-width: 560px) { .compta-champs { grid-template-columns: 1fr 1fr; } }
.compta-champs label,
.compta-note {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 15px; color: var(--gris-lisible);
}
.compta-champs input, .compta-champs select, .compta-note textarea {
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  padding: 10px; font-family: inherit; font-size: 16px; /* 16 px : iOS ne zoome pas */
}

.compta-deductible {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0;
  padding: 10px; background: var(--bleu); border-radius: 8px;
}
.compta-deductible label {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 16px; color: var(--texte); cursor: pointer;
}
/* 26 px : une case à cocher se touche au doigt, pas à la souris. */
.compta-deductible input { width: 26px; height: 26px; flex: 0 0 auto; }

.compta-ajouter-photo { display: inline-block; margin-top: 12px; cursor: pointer; }

.compta-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.compta-gestes .bouton { min-height: 48px; }

.compta .vide { color: var(--gris-lisible); font-size: 16px; padding: 18px 0; }
.compta .note { font-size: 15px; line-height: 1.5; }
.compta .message { font-size: 16px; }
.compta .message.mauvais { color: var(--rouge); }