/* =============================================================================
   L'ÉCRAN « RÉPERTOIRE ». Lot `REP-1`, 31/08/2026.

   ⛔ RÉÉCRITE LE 31/08 — LA PREMIÈRE VERSION ÉTAIT ILLISIBLE, ET DAVID L'A VU
      AVANT MOI : *« les couleurs choisies pour le répertoire, problème, c'est
      illisible : gris clair sur blanc ? »*

      La faute n'était pas le choix des gris : **le Hub est SOMBRE**
      (`--fond: #0f1826`, `--texte: #e8ecf1`) et j'avais construit un écran
      CLAIR dedans — cadres blancs, texte `#9ca3af`, soit **2,5 pour 1** de
      contraste là où il en faut 4,5. Un écran qu'on ne peut pas lire n'a pas
      de défaut d'apparence : il ne marche pas.

      ⟶ Plus une seule couleur en dur ici. Tout vient des variables de
        `hub.css`, comme les treize autres écrans. **On ne réinvente pas une
        palette dans un coin du produit** : le jour où David change le bleu,
        cet écran doit changer avec les autres.

   ⚠️  `V3-y` : 725 px de budget, et la PAGE ne défile pas. Ici la liste et la
       fiche défilent chacune dans son cadre — seul moyen de tenir 2 620
       personnes et trois ans et demi d'histoire dans une hauteur fixe.

   ⚠️  `B000-D348` : une ligne de liste fait 48 px. Les BOUTONS gardent leurs
       60 px (`--cible`) : ce sont eux qu'on touche vraiment.
   ============================================================================= */

.barre {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 10px;
}
.barre input[type="search"] {
  flex: 1;
  min-height: 48px;
  padding: 0 12px;
  font-size: 16px;
  background: var(--fond);
  border: 1px solid var(--bleu-clair);
  color: var(--texte);
  border-radius: 6px;
}
.barre input[type="search"]:focus { outline: 2px solid var(--or); outline-offset: -1px; }
.barre .compte { color: var(--gris); font-size: 0.88rem; white-space: nowrap; }

.onglets.filtres { flex-wrap: wrap; gap: 6px; }
.onglets.filtres .bouton { font-size: 0.88rem; padding: 8px 12px; min-height: 40px; }

/* Deux colonnes : la liste à gauche, la personne à droite. Sous 980 px elles
   se rangent l'une sous l'autre — le Hub se consulte aussi sur tablette. */
.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
}
@media (max-width: 980px) { .deux-colonnes { grid-template-columns: 1fr; } }

.liste-cadre, .fiche-cadre {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bleu);
  border: 1px solid var(--bleu-clair);
  border-radius: 12px;
}
.liste-cadre::-webkit-scrollbar, .fiche-cadre::-webkit-scrollbar { width: 10px; }
.liste-cadre::-webkit-scrollbar-thumb,
.fiche-cadre::-webkit-scrollbar-thumb { background: var(--bleu-clair); border-radius: 5px; }

table.liste { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.liste thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bleu-clair);
  color: var(--texte);
  text-align: left;
  padding: 11px 9px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-weight: 600;
}
table.liste thead th:hover { color: var(--or); }
table.liste thead th.trie { color: var(--or); }
table.liste tbody tr {
  border-top: 1px solid var(--bleu-clair);
  cursor: pointer;
  height: 48px;
}
table.liste tbody tr:hover { background: var(--bleu-clair); }
/* La ligne choisie se voit au trait doré, pas à un fond pâle : sur un fond
   sombre, un fond clair efface le texte au lieu de le désigner. */
table.liste tbody tr.choisi { background: var(--bleu-clair); box-shadow: inset 3px 0 0 var(--or); }
table.liste td { padding: 6px 9px; vertical-align: middle; color: var(--texte); }
/* ⛔ LE NUMERO N'EST PAS GRISE. Mesure : `--gris` sur une ligne survolee tombe
   a 4,09 pour 1, sous le seuil de 4,5 — et c'est une DONNEE, pas une
   decoration. On grise une etiquette, jamais une information qu'on est venu
   lire. */
table.liste td.tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.gris { color: var(--gris); font-weight: normal; }

/* Les étiquettes INFORMENT — aucune ne barre quoi que ce soit (`B000-D260`).
   `.etiquette` existe déjà dans `hub.css` : on ne la redéfinit pas, on ajoute
   seulement les quatre teintes de cet écran, sur le modèle de `.oui`/`.non`. */
.etiquette { margin-left: 6px; }
/* Elle reste discrete par sa TAILLE et sa forme, pas par sa paleur : `--gris`
   sur `--bleu-clair` ne fait que 4,09 pour 1, et sur une ligne survolee elle
   disparaissait. */
.etiquette.trace  { background: var(--bleu-clair); color: var(--texte); }
.etiquette.foyer  { background: rgba(201,162,39,0.18);  color: #e6c76a; }
.etiquette.retard { background: rgba(243,112,33,0.18);  color: #f0a172; }
.etiquette.muet   { background: rgba(196,69,58,0.18);   color: #e59189; }

.fiche-cadre .carte { margin: 10px; padding: 14px 16px; }
.fiche-cadre h2 { margin: 0 0 6px; font-size: 1.2rem; color: var(--texte); }
.fiche-cadre h3 { margin: 0 0 8px; font-size: 0.98rem; color: var(--texte); }

dl.infos {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 5px 12px;
  margin: 10px 0 14px;
  font-size: 0.92rem;
}
dl.infos dt { color: var(--gris); }
dl.infos dd { margin: 0; color: var(--texte); }

ul.foyer, ul.fusions { margin: 6px 0 0; padding-left: 18px; font-size: 0.92rem; }
ul.foyer li, ul.fusions li { margin-bottom: 5px; color: var(--texte); }
ul.foyer a { color: var(--or); }
.bouton.petit { min-height: 34px; font-size: 0.8rem; padding: 4px 10px; }

table.histoire { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.histoire td {
  padding: 5px 7px;
  border-top: 1px solid var(--bleu-clair);
  color: var(--texte);
}
/* Un rendez-vous annulé reste LISIBLE : il est barré, pas effacé. Le gris
   d'origine le rendait invisible, et c'est justement une information. */
table.histoire tr.annule td { color: var(--gris); text-decoration: line-through; }

.note.avertit {
  background: rgba(243,112,33,0.12);
  border-left: 3px solid var(--orange);
  color: var(--texte);
  padding: 9px 11px;
  border-radius: 4px;
}
.message.erreur { color: #e59189; }

/* Pendant une fusion, la liste change d'air : on ne clique plus pour consulter,
   on clique pour DÉSIGNER la fiche à absorber. Le geste doit se voir — et il se
   voit au liseré, pas à un fond qui masquerait les noms. */
body.en-fusion table.liste tbody tr { box-shadow: inset 3px 0 0 var(--orange); }
body.en-fusion table.liste tbody tr:hover { background: var(--bleu-clair); }
body.en-fusion .fiche-cadre { opacity: .5; pointer-events: none; }