/* Tableaux `.tbl` : une seule grille par tableau.
 *
 * Dans la maquette, chaque ligne `.tr` est une grille indépendante : une colonne `auto`
 * (ou un contenu plus large qu'une colonne fixe) prend une largeur différente à chaque
 * ligne et les colonnes ne s'alignent plus. Ici la grille est portée par `.tbl` et les
 * lignes (ainsi que les conteneurs intermédiaires) en héritent par `subgrid` : toutes les
 * lignes partagent exactement les mêmes colonnes, dimensionnées sur l'ensemble du tableau.
 */
.tbl{display:grid;grid-template-columns:var(--cols);column-gap:14px;align-content:start}
.tbl>*{grid-column:1/-1;min-width:0}
.tbl>:has(>.tr){display:grid;grid-template-columns:subgrid;column-gap:inherit}
.tbl .tr{grid-column:1/-1;grid-template-columns:subgrid;column-gap:inherit}
/* Une cellule ne déborde jamais sur la suivante : texte replié, badges et boutons contenus. */
.tbl .tr>*{min-width:0}
.tbl .tr>* .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
  .tbl{grid-template-columns:var(--mcols,minmax(0,1fr) auto)}
}
/* Icône d'ouverture de fin de ligne (›) : centrée dans sa colonne étroite. */
.tbl .tr>i.ph{justify-self:center}
/* Mobile (cartes de la maquette) : la flèche de fin de ligne n'occupe pas la place de l'état ;
   la ligne entière reste cliquable et l'état revient en haut à droite. */
@media (max-width:900px){
  .tbl .tr:not(.h)>i.ph:last-child{display:none}
  .tbl .tr:not(.h):has(>i.ph:last-child)>:nth-last-child(2){order:1}
  /* Retour à la ligne forcé après « titre + état » : les autres cellules passent dessous. */
  .tbl .tr:not(.h)::after{content:"";order:1;flex-basis:100%;height:0}
  /* Texte trop long : terminé par « … » plutôt que coupé au bord de la carte. */
  .tbl .tr:not(.h)>.hm:not(:has(>*)){display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}