/* =============================================================================
   L'ÉCRAN « DOUBLONS ». Lot `DOUBLONS-1`, 20/09/2026.
   Il emprunte tout à `repertoire.css` (barre, onglets, étiquettes) ; ici, ce
   qui n'existe que sur cet écran. Pas une couleur en dur : les variables de
   `hub.css`, comme les autres écrans (leçon du Répertoire, 31/08).
   ============================================================================= */

/* ⛔ LES GROUPES DÉFILENT, ET EUX SEULS — l'exception nommée `B000-D225` : le
      panneau d'un écran de gestion. La page porte `.reglages` (`options.css` :
      `html, body { overflow: hidden }`, hauteur fixe), et `#groupes` n'était pas
      un `.panneau` : 250 groupes, **rien ne défilait, tout était coupé** — vu par
      David le 21/09. La barre, les onglets et les liens du bas restent fixes. */
#groupes {
  display: grid; gap: 12px; align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding-inline-end: 4px;
}

.groupe { margin: 0; padding: 12px 14px; }
.groupe h3 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  color: var(--texte);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.groupe h3 .gris { font-weight: normal; }

table.fiches { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.fiches td {
  padding: 7px 8px;
  border-top: 1px solid var(--bleu-clair);
  color: var(--texte);
  vertical-align: middle;
}
table.fiches tr:first-child td { border-top: 0; }
/* Un numéro ne se retourne jamais, même sous `dir="rtl"` (`TRI-1`, règle 5). */
table.fiches 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,
   les autres colonnes alignent à droite — on les suit. */
[dir="rtl"] table.fiches td.tel { text-align: end; }
table.fiches td.nombre { text-align: end; font-variant-numeric: tabular-nums; }
table.fiches td.choix { width: 1%; white-space: nowrap; }
/* Les cases se touchent au doigt : 28 px, pas les 13 px du navigateur. */
table.fiches input[type="radio"], table.fiches input[type="checkbox"] {
  width: 28px; height: 28px; margin: 0; margin-inline-end: 4px; vertical-align: middle;
  accent-color: var(--or);
}
table.fiches label { cursor: pointer; }
/* La fiche dont le nom reste se voit au trait doré — le même que la ligne
   choisie du Répertoire. `box-shadow` n'a pas de forme logique : il se
   retourne à la main sous `dir="rtl"`. */
table.fiches tr.garde td { box-shadow: inset 3px 0 0 var(--or); }
[dir="rtl"] table.fiches tr.garde td { box-shadow: inset -3px 0 0 var(--or); }
table.fiches tr.garde td:first-child { padding-inline-start: 11px; }

.groupe .liens { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.etiquette.motif { background: var(--bleu-clair); color: var(--texte); }
.etiquette.numero { background: rgba(201,162,39,0.18); color: #e6c76a; }

.vide { color: var(--gris); padding: 14px; }