/* ===== Clubby – Match detail ===== */

/* Palette (optionnel : ajuste aux couleurs du club) */
:root {
  --clubby-primary: #1f8f5b;   /* vert SSB */
  --clubby-accent:  #f16c3a;   /* accent */
  --clubby-mute:    #6c757d;   /* bootstrap muted */

  --clubby-foul:#ef5350;         /* rouge doux pour fautes */
  --clubby-surface:#f8f9fa;      /* proche bg Bootstrap */
}



/* --- Hero / En-tête ------------------------------------------------------ */
.container .h4 {
  font-weight: 700;
  letter-spacing: .2px;
}

.logoTeam {
  height: clamp(48px, 6vw, 86px);
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

.logoComp {
  height: clamp(56px, 7vw, 120px);
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

.winner { color: var(--clubby-primary); font-weight: 800; }

@media (max-width: 576px) {
  .d-flex.align-items-center.justify-content-between.mb-3 {
    flex-direction: column;
    gap: .75rem;
    text-align: center;
  }
}

/* ===== Clubby – Quart-temps (scores & fautes) ===== */

/* Grille responsive : 1 colonne mobile, 2 colonnes dès md */
.qt-wrap{
  display:grid;
  gap:1rem;
}
@media (min-width:768px){
  .qt-wrap{ grid-template-columns: 1fr 1fr; }
}

/* Titres au-dessus des tables quart-temps */
.qt-title {
  margin: 0 0 .35rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clubby-primary);
  letter-spacing: .03em;
}

/* Pour équilibrer les deux colonnes en mode grille */
.qt-wrap > .table-responsive {
  display: flex;
  flex-direction: column;
}


/* Tables harmonisées */
.qt-table{
  margin:0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: .75rem;
  overflow:hidden; /* arrondis visibles dans .table-responsive */
  background:#fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
}

/* En-têtes collantes (agréable si beaucoup de lignes) */
.qt-table thead th{
  background: var(--clubby-surface);
  text-transform: uppercase;
  font-size:.75rem;
  letter-spacing:.04em;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Cellules : chiffres alignés et lisibles */
.qt-table th,
.qt-table td{
  padding:.55rem .6rem;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;     /* chiffres monospaces */
  -webkit-font-feature-settings:"tnum" 1; /* Safari */
  font-feature-settings:"tnum" 1;
}

/* 1re colonne (QT) alignée à gauche, le reste centré */
.qt-table tbody td:first-child,
.qt-table thead th:first-child{ text-align:left; }
.qt-table tbody td:not(:first-child),
.qt-table thead th:not(:first-child){ text-align:center; }

/* Rayures/hover discrets */
.qt-table tbody tr:nth-child(odd){ background: rgba(0,0,0,.015); }
.qt-table tbody tr:hover{ background: rgba(0,0,0,.03); }

/* Petits arrondis visuels sur la 1re et dernière ligne */
.qt-table thead th:first-child{ border-top-left-radius:.75rem; }
.qt-table thead th:last-child { border-top-right-radius:.75rem; }
.qt-table tbody tr:last-child td:first-child{ border-bottom-left-radius:.75rem; }
.qt-table tbody tr:last-child td:last-child { border-bottom-right-radius:.75rem; }

/* Accentuer les scores/fautes sans agresser visuellement */
.qt-table.qt-scores td:not(:first-child){
  color:#111;
  font-weight:600;
}
.qt-table.qt-fouls td:not(:first-child){
  color:#b00020; /* rouge lisible */
  font-weight:600;
}

/* Variante si tu veux des puces pour fautes (facultatif) */
.qt-table.qt-fouls td:not(:first-child)::after{
  content:"";
  display:inline-block;
  width:.45rem; height:.45rem;
  border-radius:50%;
  background: var(--clubby-foul);
  margin-left:.35rem;
  opacity:.12;
}

/* Mobile : laisser wrap les en-têtes longues */
@media (max-width:576px){
  .qt-table th{ white-space: normal; }
}


/* Score au centre : rend-le bien visible */
.h4 .mx-2.fw-bold {
  padding: .15rem .5rem;
  background: rgba(31,143,91,.08);
  border: 1px solid rgba(31,143,91,.2);
  border-radius: .5rem;
}

/* Métadonnées sous le titre */
.text-muted.small {
  margin-top: .25rem;
}

/* --- Cartes + sections --------------------------------------------------- */
.card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
  border-radius: 1rem;
}

.card > .card-body > .h6 {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: .5rem;
  background: rgba(31,143,91,.08);
  color: var(--clubby-primary);
  font-weight: 700;
}

/* --- Tableaux (quart-temps & boxscore) ---------------------------------- */
.table {
  --bs-table-striped-bg: rgba(0,0,0,.015);
  --bs-table-hover-bg: rgba(0,0,0,.03);
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .04em;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table th, .table td {
  padding: .5rem .6rem;
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody tr:first-child td,
.table thead th:first-child { border-top-left-radius: .5rem; }
.table tbody tr:first-child td:last-child,
.table thead th:last-child { border-top-right-radius: .5rem; }

.table tbody tr:last-child td:first-child { border-bottom-left-radius: .5rem; }
.table tbody tr:last-child td:last-child  { border-bottom-right-radius: .5rem; }

/* Mettre en valeur la colonne PTS */
.table .fw-bold { color: #111; }

/* Petits écrans : autoriser le wrap des noms dans boxscore */
@media (max-width: 576px) {
  .table td:nth-child(2) { white-space: normal; }
}

/* --- Grilles boxscore ---------------------------------------------------- */
@media (min-width: 992px) {
  .row.g-4 .card { transition: transform .15s ease, box-shadow .15s ease; }
  .row.g-4 .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
}

/* --- Badges / états ------------------------------------------------------ */
.badge.text-bg-secondary {
  background: #e9ecef !important;
  color: #495057 !important;
  border: 1px solid #dee2e6;
}

/* --- “Lieu” : discrète carte d’identité --------------------------------- */
.card .salle-name {
  font-weight: 600;
  color: #212529;
}
.card .salle-addr {
  color: var(--clubby-mute);
  font-size: .95rem;
}

/* --- Utilitaires locaux -------------------------------------------------- */
.clubby-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin: .75rem 0 1rem;
}

/* --- Accessibilité & focus ---------------------------------------------- */
a.btn.btn-detail, .btn {
  outline: none !important;
  box-shadow: none !important;
}
a.btn.btn-detail:focus-visible, .btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(31,143,91,.25) !important;
}