/* ============================================================
   ANIMA — Module Trombinoscope (B5 lot terrain)
   ------------------------------------------------------------
   Grille photos enfants par groupe + équipe. Réutilise tokens +
   primitives .glass / .auth-input / .sf-btn de styles.css.
   Aucune valeur hex en dur.
   ============================================================ */

.trb-shell{display:flex; flex-direction:column; gap:var(--sp-5); padding:var(--sp-4) 0 56px}
.trb-loading{color:var(--text-3); font-family:var(--font-mono); font-size:.82rem}
.trb-err-flash{color:var(--danger, #c66); font-size:.78rem; font-family:var(--font-mono)}

/* ---------- Barre recherche + édition ---------- */
.trb-bar{display:flex; gap:var(--sp-3); align-items:center}
.trb-search{flex:1; min-width:0}
.trb-edit-btn{flex:none}
.trb-edit-btn.on{color:var(--accent); border-color:var(--accent-glow, rgba(255,190,120,.4))}

/* ---------- Sections (groupes / équipe) ---------- */
.trb-groups{display:flex; flex-direction:column; gap:var(--sp-5)}
.trb-section{padding:var(--sp-5); border-radius:var(--rad-lg,14px); display:flex; flex-direction:column; gap:var(--sp-4)}
.trb-section-hrow{display:flex; align-items:baseline; gap:var(--sp-3)}
.trb-section-h{font-size:1rem; font-weight:600; color:var(--text); margin:0}
.trb-count{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-3);
  background:var(--bg-2); padding:2px 8px; border-radius:20px;
}

/* ---------- Grille de vignettes ---------- */
.trb-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
}
.trb-card{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);
  position:relative; text-align:center;
}
.trb-face{
  width:100%; aspect-ratio:1; border-radius:var(--rad-md,10px); overflow:hidden;
  background:var(--bg-2); display:grid; place-items:center; position:relative;
  border:1px solid var(--line, rgba(255,255,255,.06)); cursor:default;
}
.trb-card.can-edit .trb-face{cursor:pointer}
.trb-img{width:100%; height:100%; object-fit:cover; display:block}
.trb-inits{
  font-family:var(--font-mono); font-size:1.3rem; font-weight:600;
  color:var(--text-3); letter-spacing:.04em; user-select:none;
}
.trb-name{font-size:.8rem; color:var(--text); overflow-wrap:anywhere; line-height:1.25}
.trb-role{font-family:var(--font-mono); font-size:.64rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em}
.trb-file{display:none}

/* ---------- Suppression en mode édition ---------- */
.trb-del{
  position:absolute; top:4px; right:4px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:6px; cursor:pointer;
  background:var(--bg-0, rgba(0,0,0,.55)); color:var(--text); border:1px solid var(--line, rgba(255,255,255,.15));
  font-size:.8rem; line-height:1;
}
.trb-del.is-armed{color:var(--danger, #c66); border-color:var(--danger, #c66)}

@media (max-width:420px){
  .trb-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}
}