/* =============================================================================
 * ABML — Styles COMMUNS « affil-* » : cartes, onglets de saison, tuiles équipes,
 * listes (joueurs / affiliations), badges, photos.
 *
 * Chargé globalement par includes/header.php. Utilisé par :
 *   - admin/includes/saison_selector.php  (onglets de saison)
 *   - admin/includes/equipe_selector.php  (tuiles d'équipe)
 *   - admin/joueurs, admin/affiliations   (listes)
 *   - admin/calendrier                    (cartes + onglets + tuiles)
 * Ne plus dupliquer ces règles dans les pages.
 * ========================================================================== */

/* ── Carte générique ──────────────────────────────────────────────────────── */
.affil-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-bottom: 1rem;
}
.affil-card-header {
  background: #1e2d3d;
  color: #fff;
  padding: .65rem 1rem;
  font-weight: 700;
  font-size: .92rem;
  display: flex;
  align-items: center;
}
.affil-card-body { background: #fff; }

/* ── Onglets saisons ──────────────────────────────────────────────────────── */
.affil-saison-tab {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  font-size: .85rem;
  font-weight: 600;
  color: #495057;
  text-decoration: none;
  transition: background .15s;
}
.affil-saison-tab:hover { background: #f0f4f8; }
.affil-saison-tab--active { background: #FFC107; border-color: #FFC107; color: #000 !important; }

/* ── Tuiles équipes ───────────────────────────────────────────────────────── */
.affil-equipe-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  font-size: .82rem;
  font-weight: 700;
  color: #1e2d3d;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .15s, border-color .15s;
}
.affil-equipe-btn:hover { background: #e9ecef; }
.affil-equipe-btn--active { background: #FFC107; border-color: #FFC107; color: #000; }
.affil-equipe-count {
  background: rgba(0,0,0,.12);
  border-radius: 20px;
  padding: .05rem .4rem;
  font-size: .7rem;
}

/* ── Badge compteur header ────────────────────────────────────────────────── */
.affil-count-badge {
  background: rgba(255,255,255,.2);
  border-radius: 20px;
  padding: .1rem .55rem;
  font-size: .78rem;
  font-weight: 700;
}

/* ── En-tête colonnes ─────────────────────────────────────────────────────── */
.affil-col-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: .4rem 1rem;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-size: .75rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Lignes ───────────────────────────────────────────────────────────────── */
.affil-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: .55rem 1rem;
  border-bottom: 1px solid #f1f3f5;
  transition: background .1s;
}
.affil-row:hover  { background: #f8faff; }
.affil-row--alt   { background: #fafafa; }
.affil-row:last-child { border-bottom: none; }

/* ── Largeurs colonnes ────────────────────────────────────────────────────── */
.affil-col-num    { width: 30px;  flex-shrink: 0; font-size: .82rem; }
.affil-col-photo  { width: 52px;  flex-shrink: 0; }
.affil-col-nom    { flex: 1;      min-width: 0;   display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.affil-col-nais   { width: 110px; flex-shrink: 0; text-align: center; }
.affil-col-statut { width: 110px; flex-shrink: 0; }

/* ── Photo ────────────────────────────────────────────────────────────────── */
.affil-photo-wrap {
  position: relative;
  width: 38px;
  height: 38px;
}
.affil-photo, .affil-photo-placeholder {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #dee2e6;
}
.affil-photo-placeholder {
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 1.1rem;
}
/* Badge bouclier bleu pour responsables */
.affil-shield-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  background: #1565C0;
  color: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ── Nom ──────────────────────────────────────────────────────────────────── */
.affil-nom    { font-weight: 700; font-size: .9rem; color: #1e2d3d; }
.affil-prenom { font-size: .88rem; color: #495057; }

/* ── Cartes (jaune / rouge) ───────────────────────────────────────────────── */
.affil-carte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  border-radius: 3px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
}
.affil-carte--jaune { background: #FFC107; color: #000; }
.affil-carte--rouge { background: #dc3545; }

/* ── Badges statut ────────────────────────────────────────────────────────── */
.affil-badge {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.affil-badge--vert   { background: #28a745; color: #fff; }
.affil-badge--orange { background: #fd7e14; color: #fff; }
.affil-badge--rouge  { background: #dc3545; color: #fff; }
.affil-badge--gris   { background: #6c757d; color: #fff; }
.affil-badge--bleu   { background: #0d6efd; color: #fff; }

/* ── Badge fédération ─────────────────────────────────────────────────────── */
.affil-fed-badge {
  background: #17a2b8;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: .05rem .35rem;
  border-radius: 10px;
  vertical-align: middle;
}

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.affil-footer {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

/* ── Impression ───────────────────────────────────────────────────────────── */
@media print {
  .affil-card-header, .affil-col-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .btn, nav, .breadcrumb { display: none !important; }
  .affil-card { box-shadow: none; border: 1px solid #ccc; }
}