/* Listes et formulaires : tableaux triables, barre de filtres, pagination, grille de formulaire,
   cases à cocher, fenêtre de confirmation. Mêmes règles que le reste : angles adoucis, cibles de
   44 px, état jamais porté par la seule couleur. */

/* ---------- Barre d'outils d'une liste ---------- */
.barre-outils {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3);
  padding: var(--e-4) var(--e-6);
  border-bottom: var(--trait) solid var(--bordure);
}
.barre-outils .champ { min-width: 180px; flex: 0 1 220px; }
.barre-outils .champ--recherche { flex: 1 1 280px; }
.barre-outils .champ + .champ { margin-top: 0; }
.barre-outils__actions { display: flex; gap: var(--e-2); margin-left: auto; }
@media (max-width: 760px) {
  .barre-outils { padding: var(--e-4); }
  .barre-outils .champ { min-width: 120px; flex: 1 1 130px; }
  .barre-outils .champ--recherche { flex-basis: 100%; }
  .barre-outils__actions { width: 100%; margin-left: 0; }
}
.resume-liste { padding: var(--e-3) var(--e-5); font-size: var(--t-s); color: var(--texte-discret); border-bottom: var(--trait) solid var(--bordure); }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; font-size: var(--t-m); }
.tableau th {
  padding: var(--e-3) var(--e-4);
  text-align: left; vertical-align: bottom;
  font-size: var(--t-s); font-weight: var(--poids-fort); color: var(--texte-discret);
  background: var(--fond-retrait);
  border-bottom: var(--trait) solid var(--bordure);
  white-space: nowrap;
}
.tableau td { padding: var(--e-4); border-bottom: var(--trait) solid var(--bordure); vertical-align: top; }
.tableau tbody tr { transition: background-color var(--duree-survol) ease-out; }
.tableau tbody tr:hover { background: var(--fond-retrait); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau__principal { font-weight: var(--poids-fort); text-decoration: none; }
.tableau__principal:hover { text-decoration: underline; }
.tableau__secondaire { display: block; font-size: var(--t-s); color: var(--texte-discret); }
.tableau__nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tri { display: inline-flex; align-items: center; gap: var(--e-1); color: inherit; text-decoration: none; min-height: 32px; }
.tri:hover { color: var(--texte); }
.tri[aria-current="true"] { color: var(--texte); }
.valeur-longue { display: block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: var(--t-s); }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-5); border-top: var(--trait) solid var(--bordure); font-size: var(--t-s); color: var(--texte-discret); }
.pagination__liens { display: flex; gap: var(--e-2); }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-6); }
.formulaire .champ + .champ { margin-top: 0; }
.formulaire__plein { grid-column: 1 / -1; }
.formulaire__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e-3); padding-top: var(--e-2); }
.formulaire__section { grid-column: 1 / -1; font-family: var(--police-titre); font-size: var(--t-l); font-weight: var(--poids-titre); padding-top: var(--e-3); border-top: var(--trait) solid var(--bordure); }
@media (max-width: 760px) { .formulaire { grid-template-columns: minmax(0, 1fr); } }

fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.champ legend { padding: 0; margin-bottom: var(--e-2); }
.obligatoire { margin-left: var(--e-1); color: var(--alerte-texte); }
.champ--date input { min-width: 0; width: 100%; }
.pile { display: flex; flex-direction: column; gap: var(--e-5); min-width: 0; }

.champ textarea { min-height: 160px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: var(--t-m); }
.champ select { appearance: auto; }

/* Cases à cocher : une ligne par choix, toute la ligne est cliquable (cible de 44 px) */
.cases { display: flex; flex-direction: column; border: var(--trait) solid var(--bordure-controle); border-radius: var(--rayon); max-height: 260px; overflow-y: auto; }
.cases ul, .cases div { list-style: none; margin: 0; padding: 0; }
.cases label, .case {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible-tactile); padding: 0 var(--e-3);
  cursor: pointer; font-weight: 400;
}
.cases label:hover, .case:hover { background: var(--fond-retrait); }
.cases input[type="checkbox"], .case input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--action); flex: 0 0 auto; }
.case--seule { padding: 0; }
.case--seule:hover { background: transparent; }
.cases__vide { padding: var(--e-3); font-size: var(--t-s); color: var(--texte-discret); }

/* ---------- Valeurs JSON (paramètres) ---------- */
.code {
  margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--rayon); max-height: 420px; overflow: auto;
  background: var(--fond-retrait); border: var(--trait) solid var(--bordure);
  font-family: ui-monospace, Consolas, monospace; font-size: var(--t-s); white-space: pre;
}
.details { border: var(--trait) solid var(--alerte-texte); border-radius: var(--rayon-m); overflow: hidden; }
.details summary { padding: var(--e-3) var(--e-4); cursor: pointer; font-weight: var(--poids-fort); }
.details .code { border: 0; border-top: var(--trait) solid var(--bordure); }

/* ---------- Lignes d'un sous-formulaire (habilitations d'un profil) ---------- */
.lignes { width: 100%; }
.lignes th { text-align: left; font-size: var(--t-s); color: var(--texte-discret); padding: var(--e-2) var(--e-2) var(--e-2) 0; }
.lignes td { padding: var(--e-2) var(--e-2) var(--e-2) 0; vertical-align: top; }
.lignes select, .lignes input:not([type="checkbox"]) {
  width: 100%; min-height: var(--cible-tactile); padding: var(--e-2);
  border: var(--trait) solid var(--bordure-controle); border-radius: var(--rayon);
  background: var(--fond); color: var(--texte);
}
.lignes .errorlist { list-style: none; margin: var(--e-1) 0 0; padding: 0; color: var(--alerte-texte); font-weight: var(--poids-fort); font-size: var(--t-s); }
.lignes__erreur td { padding-top: 0; }

/* ---------- Fenêtre de confirmation ---------- */
.confirmation { width: min(480px, calc(100vw - 32px)); }
.confirmation__corps { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); }
.confirmation__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: flex-end; }