/* Une feuille, pas un cadre. Le but est qu'un tableau de cinquante lignes se
   lise d'un coup d'œil : chiffres alignés, colonnes calmes, et deux couleurs
   qui veulent dire quelque chose — vert « le prix est dedans », jaune
   « ça se chevauche ». Tout le reste est gris. */
:root {
  --encre: #22272b;
  --gris: #6b7680;
  --trait: #e3e6e8;
  --fond-doux: #fafbfc;
  --bleu: #2f7fd1;
  --vert: #2e7d32;
  --vert-pale: #e8f6ed;
  --rouge: #c62828;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; color: var(--encre); background: #fff;
}
header {
  border-bottom: 1px solid var(--trait); background: var(--fond-doux);
  position: sticky; top: 0; z-index: 10;
}
nav { display: flex; gap: 18px; padding: 10px 16px; }
nav a { color: var(--bleu); text-decoration: none; font-weight: 600; }
nav a:hover { text-decoration: underline; }
main { padding: 16px; }
h1 { font-size: 19px; margin: 0 0 4px; }
.sous-titre { color: var(--gris); font-size: 13px; margin-bottom: 14px; }

.filtres {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 12px; background: var(--fond-doux);
  border: 1px solid var(--trait); border-radius: 6px; margin-bottom: 14px;
}
.filtres label { display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: #556; margin-bottom: 4px; }
.filtres select, .filtres input { font: inherit; padding: 4px 6px;
  border: 1px solid #ccd2d6; border-radius: 4px; background: #fff; }
.cases { display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: 520px; }
.cases span { white-space: nowrap; font-size: 13px; }

table { border-collapse: collapse; width: 100%; }
th {
  text-align: left; padding: 6px 10px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: #667; border-bottom: 1px solid var(--trait);
  position: sticky; top: 41px; background: #fff;
}
td { padding: 5px 10px; border-bottom: 1px solid #f0f0f0;
  font-variant-numeric: tabular-nums; }
tr.dedans { background: var(--vert-pale); }
.badge {
  background: var(--vert); color: #fff; padding: 1px 7px; border-radius: 9px;
  font-size: 11px; font-weight: 600;
}
.muet { color: #aab; }
.achat { color: var(--vert); }
.vente { color: var(--rouge); }
a.fiche { color: var(--bleu); text-decoration: none; }
a.fiche:hover { text-decoration: underline; }
/* Deux liens dans la même cellule : un espace franc, et jamais de
   retour à la ligne au milieu d'un libellé. */
td.liens { white-space: nowrap; }
/* Un bouton qui ne réclame pas l'attention : il vit dans une cellule,
   à côté de liens, et doit leur ressembler plutôt que les écraser. */
button.discret { background: none; border: none; color: var(--bleu);
  cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
button.discret:hover { text-decoration: underline; }
td.liens a + a { margin-left: 10px; }
.pagination { display: flex; gap: 10px; align-items: center; padding: 8px 0;
  font-size: 13px; color: var(--gris); }
.pagination a { color: var(--bleu); text-decoration: none; }
.vide { padding: 28px; color: #778; }

/* La fiche : des cartes, parce qu'on y cherche une information précise et
   qu'un long tableau obligerait à compter les lignes. */
.cartes { display: flex; flex-wrap: wrap; gap: 14px; }
.carte { border: 1px solid var(--trait); border-radius: 6px; padding: 12px 16px;
  flex: 1 1 340px; min-width: 320px; background: #fff; }
/* Le graphique tient toute la largeur : c'est la seule chose de cette page
   qu'on lit d'un coup d'œil, et la couper en colonne la rendrait illisible. */
.carte--large { flex-basis: 100%; margin-bottom: 14px; }
.carte h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: #667; margin: 0 0 10px; }
.carte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.carte dt { color: var(--gris); font-size: 12.5px; }
.carte dd { margin: 0; font-variant-numeric: tabular-nums; }
.carte pre { background: var(--fond-doux); padding: 8px; border-radius: 4px;
  font-size: 11.5px; white-space: pre-wrap; word-break: break-all; margin: 0; }
.note { color: var(--gris); font-size: 12.5px; margin: 0 0 10px; }
table.mini { width: 100%; font-size: 13px; }
table.mini th { position: static; font-size: 11px; }
form.enligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px; background: var(--fond-doux); border: 1px solid var(--trait);
  border-radius: 6px; margin-bottom: 14px; }
form.enligne input, form.enligne select, form.enligne textarea {
  font: inherit; padding: 4px 6px; border: 1px solid #ccd2d6; border-radius: 4px; }
form.enligne button { font: inherit; padding: 5px 12px; border: 0; border-radius: 4px;
  background: var(--bleu); color: #fff; cursor: pointer; }
.alerte { background: #fff4f4; border: 1px solid #f0c6c6; color: #922;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }