/* Shared styles for team pages (equipes/*.html).
   A page can still add its own <style> block for anything unique to it. */

.section-tab-title { font-weight: 400; line-height: 1.5; margin-top: 0; font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 2px; color: var(--heading-color); border-left: 5px solid var(--accent-color); padding-left: 14px; margin-bottom: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); font-weight: 600; text-decoration: none; font-size: 14px; margin-bottom: 16px; }
.back-link:hover { text-decoration: underline; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 24px; }
.player-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 2/3; cursor: pointer; transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.25); background: #111; animation: cardIn 0.5s ease both; }
.player-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.player-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 70%, transparent 100%); opacity: 0; transition: opacity 0.3s; z-index: 3; pointer-events: none; }
.player-card:hover::before { opacity: 1; }
.player-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--accent-color), #f9a825); z-index: 4; }
.player-card.captain::after { height: 6px; background: linear-gradient(90deg, #f9a825, #fff176, #f9a825); background-size: 200% 100%; animation: goldShimmer 2s linear infinite; }
@keyframes goldShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.player-card .card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.4s ease; }
.player-card:hover .card-photo { transform: scale(1.05); }
.player-card .card-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, transparent 100%); z-index: 2; }
.player-card .card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 14px 16px; z-index: 3; }
.player-card .card-position { display: inline-block; background: var(--accent-color); color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; text-transform: uppercase; }
.player-card.captain .card-position { background: linear-gradient(90deg, #f9a825, #f57f17); }
.player-card .card-name { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; color: #fff; line-height: 1; margin-bottom: 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.player-card .card-meta { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.player-card .card-school { position: absolute; top: 14px; right: -28px; background: linear-gradient(90deg, var(--accent-color), #f9a825); color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 1px; padding: 3px 36px; transform: rotate(45deg); z-index: 4; text-transform: uppercase; }
.captain-badge { position: absolute; top: 12px; left: 12px; z-index: 5; width: 28px; height: 28px; background: linear-gradient(135deg, #f9a825, #f57f17); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(249,168,37,0.6); font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #fff; line-height: 1; }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.standings-table th { background: var(--accent-color); color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; text-align: center; white-space: nowrap; padding: 10px 12px; }
.standings-table td { text-align: center; vertical-align: middle; padding: 10px 12px; font-size: 13px; }
.standings-table td:first-child { text-align: left; font-weight: 700; }
.standings-table tbody tr:hover { background: color-mix(in srgb, var(--accent-color), transparent 92%); }
.standings-table .my-school { background: color-mix(in srgb, var(--accent-color), transparent 85%); font-weight: 700; }
.standings-table .my-school td:first-child::after { content: ' ★'; color: var(--accent-color); }
.tier-badge { display: inline-block; background: var(--accent-color); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; padding: 4px 16px; border-radius: 4px; margin-bottom: 14px; }
html.dark-mode .standings-table .my-school { background: color-mix(in srgb, var(--accent-color), transparent 78%); }
.schedule-table th { background: color-mix(in srgb, var(--accent-color), transparent 15%); color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; padding: 10px 14px; }
.schedule-table td { vertical-align: middle; padding: 10px 14px; font-size: 13px; }
.manual-table th { background: var(--accent-color); color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; padding: 10px 14px; }
.manual-table td { vertical-align: middle; padding: 10px 14px; font-size: 13px; }
.manual-table tbody tr:hover { background: color-mix(in srgb, var(--accent-color), transparent 92%); }
.badge-win      { background:#198754; color:#fff; padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-loss     { background:#495057; color:#fff; padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; }
html.dark-mode .badge-loss { background:#5c636a; color:#f1f3f5; }
.badge-upcoming { background:#6c757d; color:#fff; padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; }
.replay-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:20px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.3px; text-decoration:none;
  transition: background .2s, color .2s;
}
.replay-btn:hover { background: var(--accent-color); color:#fff; text-decoration:none; }
/* Solid button in dark mode: the schedule rows stay white, so a pale tint disappears */
html.dark-mode .replay-btn { background: var(--accent-color); color:#fff; }
html.dark-mode .replay-btn:hover { background:#2e8b50; color:#fff; }
.data-loading { color: var(--default-color); opacity: 0.8; font-style: italic; }
.updated-tag  { font-size: 11px; color: var(--default-color); opacity: 0.9; margin-top: 8px; }

.schedule-table .date-row {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--heading-color);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: .4px;
  padding: 7px 14px;
}
html.dark-mode .schedule-table .date-row {
  background: rgba(255,255,255,0.10);
  color: #e9e9e9;
}
/* Mobile : l'équipe devient un carrousel qu'on glisse avec le doigt (l'ordinateur garde la grille) */
@media (max-width: 767px) {
  .roster-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 10px 4px 18px; margin: 0 -4px; scrollbar-width: thin; }
  .roster-grid .player-card { flex: 0 0 68%; max-width: 260px; scroll-snap-align: center; }
  .roster-grid .player-card:hover { transform: none; }
  .roster-grid .data-loading { flex: 1 0 100%; }
}