/* Écran documents. Un fichier par écran, comme investment.css — ce motif tient
   depuis l'app locative et évite les régressions croisées entre modules.
   Les variables (--ink, --muted, --line, --accent…) viennent de styles.css. */

.back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

/* ── Dépôt ── */

.depot {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

/* Les deux boutons partagent la largeur : sur téléphone, une cible tactile
   pleine largeur se rate moins qu'un lien de la taille de son texte. */
.bouton {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}

.bouton:active { transform: translateY(1px); }

/*
  Le bouton « Scanner » n'a de sens que là où il y a un appareil photo à la
  main. `pointer: fine` désigne une souris ou un trackpad, donc un ordinateur :
  on l'y masque, parce qu'il y ouvrirait un sélecteur restreint aux images où
  un PDF n'apparaîtrait pas — un piège plutôt qu'un raccourci.

  `pointer: coarse` (téléphone, tablette) garde les deux, dans l'ordre du HTML.
*/
@media (pointer: fine) {
  #bouton-scan { display: none; }
  #bouton-fichiers {
    color: var(--accent-ink, #fff);
    background: var(--accent, #2f5d50);
    border-color: var(--accent, #2f5d50);
  }
}

/* Le glisser-déposer et le collage n'existent pas au doigt. */
.depot-bureau { display: none; }
@media (pointer: fine) {
  .depot-bureau { display: block; }
}

/* Pendant qu'un fichier survole la carte. */
#zone-depot.survol {
  border-color: var(--accent, #2f5d50);
  box-shadow: inset 0 0 0 1px var(--accent, #2f5d50);
}

.bouton-primaire {
  color: var(--accent-ink, #fff);
  background: var(--accent, #2f5d50);
  border-color: var(--accent, #2f5d50);
}

.adresse {
  margin: 8px 0 4px;
  font-size: 15px;
}

.adresse code {
  padding: 6px 10px;
  background: var(--line);
  border-radius: 6px;
  user-select: all; /* un appui long sélectionne l'adresse entière */
}

/* ── Archive ── */

.entete-liste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.entete-liste h2 { margin: 0; font-size: 17px; }

.entete-liste input[type="search"] {
  width: auto;
  flex: 1;
  max-width: 260px;
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
}

.document .entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.document h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
  /* Un objet d'email peut faire deux cents caractères et casser la carte. */
  overflow-wrap: anywhere;
}

.document .meta {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.document .apercu {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.fichiers {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.fichiers li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.fichiers a {
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.fichiers .meta { white-space: nowrap; }

/* Ce que l'analyse aura extrait. Vide tant qu'elle n'est pas branchée — d'où
   l'absence de placeholder : une ligne « Montant : — » ferait croire à une
   donnée manquante alors que la question n'a pas encore été posée. */
.extraits {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
}

/* ── Ce que l'analyse a écrit ── */

.ligne-fichier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

/* Le type vient en premier : c'est par lui qu'on balaie une liste des yeux. */
.type {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.description {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
}

/* La réserve du modèle — scan coupé, montant ambigu. Visible sans être
   alarmante : c'est une nuance, pas une erreur. */
.reserve {
  margin-top: 4px;
  color: #8a6d1f;
  font-size: 13px;
}

.analyse-attente { font-style: italic; }
.analyse-echec { color: #b4342b; }

.bouton-discret {
  width: auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.bouton-discret[disabled] { opacity: 0.55; cursor: progress; }

.status.ok { color: var(--accent, #2f5d50); }
.status.erreur { color: #b4342b; }

@media (max-width: 480px) {
  .entete-liste { flex-direction: column; align-items: stretch; }
  .entete-liste input[type="search"] { max-width: none; }
  .document .entete { flex-direction: column; }
  .document .meta { white-space: normal; }
}