:root {
  --encre: #17223b; --bleu: #1a3faa; --gris: #5b6577; --trait: #d9dee8;
  --fond: #f6f7fa; --vert: #1f8a4c; --ambre: #9a5b13; --rouge: #9b2c2c;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: #fff; border-bottom: 1px solid var(--trait); padding: 10px 18px;
}
.marque { font-weight: 700; color: var(--bleu); font-size: 18px; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 14px; flex: 1; }
nav a { color: var(--gris); text-decoration: none; }
nav a:hover { color: var(--bleu); }
.qui { color: var(--gris); font-size: 13px; }
main { max-width: 1060px; margin: 0 auto; padding: 22px 18px 60px; }
h1 { font-size: 22px; margin: 6px 0 18px; }
h2 { font-size: 16px; margin: 26px 0 10px; color: var(--gris); }
a { color: var(--bleu); }

.cartes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.carte {
  background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  padding: 14px 18px; min-width: 190px; flex: 1;
}
.chiffre { display: block; font-size: 26px; font-weight: 700; color: var(--bleu); }
.etiquette { color: var(--gris); font-size: 13px; }

table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); }
th { background: #eef1f7; font-size: 12px; text-transform: uppercase; color: var(--gris); }
td.droite, th.droite { text-align: right; }
tr form { display: contents; }

.etat { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eef1f7; }
.etat.EMISE { background: #e7eefc; color: var(--bleu); }
.etat.DEPOSEE { background: #fdf3e3; color: var(--ambre); }
.etat.PAYEE { background: #e7f5ec; color: var(--vert); }
.etat.ANNULEE { background: #fbeced; color: var(--rouge); }

.barre { width: 32%; }
.barre span { display: block; height: 10px; background: var(--bleu); border-radius: 5px; }

button, .bouton, .action {
  font: inherit; border: 1px solid var(--trait); background: #fff; color: var(--encre);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.action { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.action.verte { background: var(--vert); border-color: var(--vert); }
.action.grande { padding: 12px 20px; font-size: 16px; }
button.discret { padding: 4px 10px; font-size: 13px; }
.raccourcis { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }

.formulaire { background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  padding: 18px; max-width: 640px; }
.formulaire.ligne { max-width: none; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--gris); }
input, select, textarea {
  font: inherit; width: 100%; padding: 7px 9px; margin-top: 4px;
  border: 1px solid var(--trait); border-radius: 5px; background: #fff; color: var(--encre);
}
textarea { resize: vertical; }
.filtres { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filtres input, .filtres select { width: auto; margin: 0; }
.filtres label { margin: 0; display: flex; gap: 6px; align-items: center; }
.enligne { display: flex; gap: 8px; align-items: center; }
.enligne input, .enligne select { width: auto; margin: 0; }

.colonnes { display: flex; gap: 18px; flex-wrap: wrap; }
.fiche { background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  padding: 18px; flex: 1; min-width: 300px; }
dl { margin: 0; }
dt { font-size: 12px; text-transform: uppercase; color: var(--gris); margin-top: 12px; }
dd { margin: 2px 0 0; }
.lien { font-size: 12px; background: var(--fond); }

.aide { color: var(--gris); font-size: 13px; }
.vide { color: var(--gris); font-style: italic; padding: 16px 10px; }
.erreur { background: #fbeced; color: var(--rouge); padding: 10px 12px; border-radius: 6px; }
.ajout { background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; }
summary { cursor: pointer; color: var(--bleu); }
.journal { font-size: 12px; }

.connexion { max-width: 330px; margin: 10vh auto; background: #fff;
  border: 1px solid var(--trait); border-radius: 10px; padding: 26px; }
.connexion h1 { color: var(--bleu); margin-bottom: 2px; }
.sous { color: var(--gris); margin-top: 0; font-size: 13px; }
.connexion button { width: 100%; background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* Téléphone. L'application sert aussi debout dans une agence : on se connecte,
   on génère, on télécharge le PDF. Tout doit tenir dans 375 points de large. */
@media (max-width: 640px) {
  header { padding: 10px 14px; gap: 8px 12px; }
  .marque { flex: 1; }                 /* la marque pousse « qui » à droite */
  .qui { order: 2; }
  nav {
    order: 3; width: 100%; flex: none; flex-wrap: nowrap;
    overflow-x: auto; gap: 16px; padding-bottom: 2px;
    scrollbar-width: none;             /* la barre volerait une ligne de texte */
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; }

  main { padding: 16px 14px 50px; }
  h1 { font-size: 20px; }
  .colonnes { flex-direction: column; }
  /* Une carte par ligne : a deux de front, « 27 000 000 » se coupe en deux. */
  .carte { min-width: 0; flex-basis: 100%; padding: 12px 16px; }

  /* Un tableau de sept colonnes ne rentre pas : il défile dans sa propre boîte
     plutôt que de faire déborder la page entière. */
  table { display: block; overflow-x: auto; white-space: nowrap; font-size: 13px; }

  /* 16 px au moins, sinon iOS zoome à chaque fois qu'on touche un champ. */
  input, select, textarea { font-size: 16px; }
  button, .action, .bouton { padding: 10px 14px; }   /* assez grand pour le pouce */
  .enligne { flex-wrap: wrap; }
  .qr { width: 100%; }
  .qr img { width: 100%; height: auto; }
}

/* Messages d'action (envoi WhatsApp, appairage) et pages WhatsApp */
.message { background: #eef3ff; border: 1px solid #c9d7f7; color: var(--encre);
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.avertissement { background: #fdf4e5; border: 1px solid #f0dcb8; color: var(--ambre);
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
button.verte { background: var(--vert); border-color: var(--vert); color: #fff; }
.qr { background: #fff; border: 1px solid var(--trait); border-radius: 8px;
  padding: 10px; width: 232px; }
.qr img { display: block; width: 210px; height: 210px; image-rendering: pixelated; }
.compteur { font-variant-numeric: tabular-nums; }
.etat.connected { background: #e7f5ec; color: var(--vert); }
.etat.logged_out, .etat.supprime { background: #fbeced; color: var(--rouge); }
.etat.cree { background: #fdf4e5; color: var(--ambre); }