/* =============================================================================
   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: start;
  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); }
/* `TRI-1` — le trait doré est au bord de DÉPART : `box-shadow` n'a pas de forme
   logique, il se retourne à la main sous `dir="rtl"`. */
[dir="rtl"] table.liste tbody tr.choisi { 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. */
/* Un numéro ne se retourne jamais, même sous `dir="rtl"` (`TRI-1`, règle 5). */
table.liste td.tel {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  direction: ltr; unicode-bidi: embed;
}
/* La cellule est devenue LTR : son « start » est à gauche. Sous un tableau RTL,
   l'en-tête aligne à droite — on suit l'en-tête. */
[dir="rtl"] table.liste td.tel { text-align: end; }
.nombre { text-align: end; 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-inline-start: 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-inline-start: 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-inline-start: 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); }
[dir="rtl"] 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; }

/* `FC-2`, 22/09 — pendant un RATTACHEMENT, même geste que la fusion : la liste
   sert à DÉSIGNER le foyer à rejoindre. Le liseré est doré, pas orange : rien
   ne se fond, on rejoint. */
body.en-rattachement table.liste tbody tr { box-shadow: inset 3px 0 0 var(--or); }
[dir="rtl"] body.en-rattachement table.liste tbody tr { box-shadow: inset -3px 0 0 var(--or); }
body.en-rattachement table.liste tbody tr:hover { background: var(--bleu-clair); }
body.en-rattachement .fiche-cadre { opacity: .5; pointer-events: none; }

/* Le chef du foyer et la relation, sur la même étiquette que « foyer ». */
.etiquette.chef  { background: rgba(201,162,39,0.18);  color: #e6c76a; }
.etiquette.rel   { background: var(--bleu-clair); color: var(--texte); }
ul.foyer li .gris { margin-inline-start: 4px; }

/* La case « à une autre personne ? » devant chaque rendez-vous de l'histoire :
   28 px, au doigt, comme celles de l'écran Doublons. */
table.histoire td.choix { width: 1%; white-space: nowrap; }
table.histoire input[type="checkbox"] {
  width: 28px; height: 28px; margin: 0; vertical-align: middle; accent-color: var(--or);
}
/* `[hidden]` doit battre `display: flex` de `.ligne-creation` (`B000-D480`,
   cinq occurrences déjà) : la ligne « nouvelle personne » disparaît quand un
   membre du foyer est choisi comme destination. */
#scinder .ligne-creation[hidden] { display: none; }

/* La relation de la fiche se change en place, sous le titre du foyer. */
.foyer-moi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; font-size: 0.92rem; }
.foyer-moi select { min-height: 40px; font-size: 0.92rem; }