/* ═══════════════════════════════════════════
   DragonsMag — football.css
   Section Sport (accueil, compétitions, clubs, matches...)
   Dépend de base.css
═══════════════════════════════════════════ */

.page-football {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Les titres de section utilisent .bloc-header/.bloc-header-title (base.css),
   affichés dans un .simple-bloc (base.css) qui fournit fond + bordure + coins
   arrondis — cohérent avec accueil.tpl (bloc "Publications"). */

/* Colonne principale (entete, compétitions, programme du jour...) :
   espace vertical entre les .simple-bloc empilés dans <main>. */
.page-football main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.white {
    background: white;
}

/* ════════════════════════════════════════════
   COMPÉTITIONS EN AVANT (grille de logos)
════════════════════════════════════════════ */
.football-competitions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 16px;
}

.football-competition-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.football-competition-card:hover {
    border-color: var(--accent2);
    transform: translateY(-2px);
}

.football-competition-logo {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.football-competition-logo img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

.football-competition-name {
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    text-align: center;
    line-height: 1.3;
    transition: color .15s;
}
.football-competition-card:hover .football-competition-name { color: var(--accent3); }

/* ════════════════════════════════════════════
   GRILLE DE CLUBS (clubs.tpl)
════════════════════════════════════════════ */
.football-clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 16px;
}

.football-club-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.football-club-card:hover {
    border-color: var(--accent2);
    transform: translateY(-2px);
}

.football-club-logo {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.football-club-logo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.football-club-name {
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    text-align: center;
    line-height: 1.3;
    transition: color .15s;
}
.football-club-card:hover .football-club-name { color: var(--accent3); }

/* ════════════════════════════════════════════
   GRILLE DE PERSONNES (persons.tpl — joueurs/entraîneurs)
════════════════════════════════════════════ */
.football-persons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 16px;
}

.football-person-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    text-align: center;
    transition: border-color .15s, transform .15s;
}
.football-person-card:hover {
    border-color: var(--accent2);
    transform: translateY(-2px);
}

.football-person-photo {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--bg4);
}
.football-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.football-person-name {
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    line-height: 1.3;
    transition: color .15s;
}
.football-person-card:hover .football-person-name { color: var(--accent3); }

.football-person-original {
    font-family: var(--fb);
    font-size: 11px;
    color: var(--text3);
    line-height: 1.3;
}

/* ════════════════════════════════════════════
   GRILLE DE STADES (stadiums.tpl)
════════════════════════════════════════════ */
.football-stadiums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px;
}

.football-stadium-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.football-stadium-card:hover {
    border-color: var(--accent2);
    transform: translateY(-2px);
}

.football-stadium-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg4);
}
.football-stadium-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.football-stadium-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.football-stadium-name {
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    line-height: 1.3;
    transition: color .15s;
}
.football-stadium-card:hover .football-stadium-name { color: var(--accent3); }

.football-stadium-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fb);
    font-size: 11px;
    color: var(--text3);
}

/* ════════════════════════════════════════════
   CALENDRIER MENSUEL (calendar.tpl)
════════════════════════════════════════════ */
.football-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 0 16px 16px;
    border-radius: var(--r);
    overflow: hidden;
}

.football-calendar-daylabel {
    background: var(--bg3);
    padding: 8px 4px;
    text-align: center;
    font-family: var(--fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text3);
}

.football-calendar-cell {
    background: var(--bg2);
    min-height: 90px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.football-calendar-cell.empty { background: var(--bg); }
.football-calendar-cell.today {
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 2px var(--accent2);
}

.football-calendar-daynum {
    font-family: var(--fm);
    font-size: 11px;
    color: var(--text3);
}
.football-calendar-cell.today .football-calendar-daynum {
    color: var(--accent3);
    font-weight: 700;
}

.football-calendar-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.football-calendar-event {
    font-family: var(--fb);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text2);
    text-decoration: none;
}
.football-calendar-event:hover { color: var(--accent3); }

@media (max-width: 640px) {
    .football-calendar-daylabel { font-size: 9px; padding: 6px 2px; }
    .football-calendar-cell { min-height: 60px; padding: 4px; }
    .football-calendar-event { font-size: 9px; }
}

/* ════════════════════════════════════════════
   FILTRES SOUS FORME DE "CHIPS" (checkboxes/radios)
   Le <input> natif est masqué visuellement mais reste
   accessible/focusable ; le <label> sert de bouton.
════════════════════════════════════════════ */
.football-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px;
}
.football-filter-chips + .football-filter-chips { padding-top: 0; }

.football-filter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r);
    border: 1px solid var(--border2);
    background: var(--bg3);
    color: var(--text2);
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.football-filter-chip:hover { border-color: var(--accent2); color: var(--accent3); }
.football-filter-chip:has(input:checked) {
    border-color: var(--accent2);
    color: var(--accent3);
    background: var(--accent-bg);
}
.football-filter-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.football-filter-chip.letter {
    min-width: 30px;
    justify-content: center;
    padding: 6px 8px;
}

/* ════════════════════════════════════════════
   PAGINATION (clubs.tpl et listes similaires)
════════════════════════════════════════════ */
.football-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.football-pagination-info {
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    text-align: center;
    flex: 1;
}

.football-pagination-btns {
    display: flex;
    gap: 6px;
}

/* ════════════════════════════════════════════
   PROGRAMME DU JOUR
════════════════════════════════════════════ */
.football-matches-block {
    /* pas de fond/bordure propres : le conteneur .simple-bloc parent s'en charge déjà */
}

.football-matches-group + .football-matches-group {
    border-top: 1px solid var(--border);
}

.football-matches-group-title {
    background: var(--bg3);
    padding: 8px 16px;
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 700;
    color: var(--text3);
    letter-spacing: .3px;
    text-transform: uppercase;
}

.football-match-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.football-match-row:last-child { border-bottom: none; }

.football-match-team {
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text2);
    text-decoration: none;
    transition: color .15s;
}
.football-match-team:hover { color: var(--accent3); }
.football-match-team.home { text-align: right; }
.football-match-team.away { text-align: left; }

.football-match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 74px;
}

.football-match-time {
    font-family: var(--fm);
    font-size: 11px;
    color: var(--text3);
}

.football-match-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--bg4);
    transition: background .15s, color .15s;
}
.football-match-score:hover { background: var(--accent-bg); color: var(--accent3); }

.football-match-score img {
    width: 16px;
    height: 16px;
    opacity: .7;
}

.football-matches-empty {
    padding: 24px 16px;
    text-align: center;
    font-family: var(--fb);
    font-size: 12px;
    color: var(--text3);
}

.football-matches-note {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg3);
    border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════
   PAGES "FICHE" (compétition, club, équipe, joueur...)
   Réutilise le squelette de wiki_serie.css (serie-cover, serie-infos-table,
   serie-description, serie-panel...) + ces quelques ajouts spécifiques foot.
════════════════════════════════════════════ */

/* Boutons de navigation vers les pages liées (Fiche / Buteurs / Classement / Résultats)
   Même look que .serie-tab, mais ce sont de simples liens (pas de panneaux JS). */
.competition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 16px;
}
.competition-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r);
    border: 1px solid var(--border2);
    background: var(--bg3);
    color: var(--text2);
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.competition-action-btn:hover,
.competition-action-btn.active {
    border-color: var(--accent2);
    color: var(--accent3);
    background: var(--accent-bg);
}

/* Ligne de palmarès d'une compétition (nombre de victoires + liste des clubs) */
.competition-prize-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--accent-bg);
    color: var(--accent3);
    font-family: var(--fh);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Palmarès d'un club — grille de compétitions remportées + saisons */
.club-prizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 14px;
}
.club-prize-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.club-prize-card:hover { border-color: var(--accent2); background: var(--bg4); }
.club-prize-card-title {
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.club-prize-card-seasons {
    font-family: var(--fm);
    font-size: 11px;
    color: var(--text3);
    line-height: 1.5;
}

/* ════════════════════════════════════════════
   ONGLETS DE TYPE DE CLASSEMENT (Général / Domicile / Extérieur / Attaque / Défense)
   Réutilise .competition-actions / .competition-action-btn.
════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   BARRE DE FILTRES (résultats, calendrier, classement...)
   Les <select> reprennent le style générique de base.css.
════════════════════════════════════════════ */
.football-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
}
.football-filters .field { min-width: 160px; }

/* ════════════════════════════════════════════
   TABLEAU DE RÉSULTATS
════════════════════════════════════════════ */
.football-results-row {
    display: grid;
    grid-template-columns: 200px 1fr auto 1fr 100px;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
}
.football-results-row:last-child { border-bottom: none; }

.football-results-date {
    font-family: var(--fm);
    font-size: 11px;
    color: var(--text3);
    white-space: nowrap;
}
/* Bandeau "Groupe X" — un seul par groupe (au-dessus de ses matches), plutôt qu'une mention
   répétée sur chaque ligne (qui en plus cassait la grille à 5 colonnes de .football-results-row
   ci-dessus en s'y ajoutant comme 6e enfant). */
.football-results-group-banner {
    padding: 7px 16px;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    font-family: var(--fh);
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.football-results-team {
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text2);
}
.football-results-team.home { text-align: right; }
.football-results-team.away { text-align: left; }
.football-results-team.winner { color: var(--text); font-weight: 700; }

.football-results-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 90px;
}
.football-results-score-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.football-results-score-value a {
    display: inline-flex;
    color: var(--text3);
    transition: color .15s;
}
.football-results-score-value a:hover { color: var(--accent3); }
.football-results-score-value img { width: 13px; height: 13px; }
.football-results-extra {
    font-size: 10px;
    color: var(--text3);
}

.football-results-spectators {
    text-align: right;
    font-family: var(--fm);
    font-size: 12px;
    color: var(--text3);
}
.football-results-spectators-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}
.football-results-spectators-value svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.football-results-summary {
    padding: 10px 16px;
    background: var(--bg3);
    border-top: 1px solid var(--border);
    font-family: var(--fb);
    font-size: 11px;
    color: var(--text3);
    display: flex;
    gap: 20px;
}
.football-results-summary b { color: var(--text2); }

/* ════════════════════════════════════════════
   TABLEAU DE CLASSEMENT
════════════════════════════════════════════ */
.football-standings {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fb);
    font-size: 12px;
}
.football-standings th {
    background: var(--bg3);
    color: var(--text3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.football-standings th:nth-child(2) { text-align: left; }
.football-standings td {
    padding: 8px 6px;
    text-align: center;
    color: var(--text2);
    border-bottom: 1px solid var(--border);
}
.football-standings tr:last-child td { border-bottom: none; }
.football-standings td:nth-child(2) { text-align: left; }
.football-standings td:first-child { color: var(--text3); font-family: var(--fm); }
.football-standings a { color: var(--text2); text-decoration: none; font-weight: 600; transition: color .15s; }
.football-standings a:hover { color: var(--accent3); }
.football-standings td.pts { font-weight: 700; color: var(--text); }

/* Zones de qualification / relégation — toute la ligne colorisée + liseré à gauche */
.football-standings tr.zone-acc     td { background: var(--green-bg); }
.football-standings tr.zone-bar     td { background: var(--amber-bg); }
.football-standings tr.zone-bardown td { background: var(--blue-bg); }
.football-standings tr.zone-rel     td { background: var(--red-bg); }
.football-standings tr.zone-acc     td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.football-standings tr.zone-bar     td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.football-standings tr.zone-bardown td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.football-standings tr.zone-rel     td:first-child { box-shadow: inset 3px 0 0 var(--red); }

.football-standings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px;
    background: var(--bg3);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text3);
}
.football-standings-legend span { display: inline-flex; align-items: center; gap: 6px; }
.football-standings-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.football-standings-legend i.acc     { background: var(--green); }
.football-standings-legend i.bar     { background: var(--amber); }
.football-standings-legend i.bardown { background: var(--blue); }
.football-standings-legend i.rel     { background: var(--red); }

/* ════════════════════════════════════════════
   SIDEBAR FOOTBALL (accueil.tpl)
   Mini-classement + matches à venir/résultats,
   inclus via football/menu_football.tpl
════════════════════════════════════════════ */

/* Variante compacte du tableau de classement, réutilisée dans la sidebar */
.football-standings-mini {
    table-layout: fixed; /* nécessaire pour que la colonne nom respecte sa largeur allouée */
}
.football-standings-mini th,
.football-standings-mini td { padding: 6px 5px; font-size: 11px; }
.football-standings-mini th:nth-child(1),
.football-standings-mini td:nth-child(1) { width: 24px; }
.football-standings-mini th:nth-child(3),
.football-standings-mini td:nth-child(3) { width: 34px; }
.football-standings-mini th:nth-child(4),
.football-standings-mini td:nth-child(4) { width: 34px; }
.football-standings-mini td:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Onglets À venir / Résultats */
.football-mini-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.football-mini-tab {
    flex: 1;
    padding: 9px 6px;
    background: var(--bg3);
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--fm);
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.football-mini-tab:hover { color: var(--text2); }
.football-mini-tab.active { color: var(--accent3); border-bottom-color: var(--accent); background: var(--bg2); }

.football-mini-tab-panel { display: none; }
.football-mini-tab-panel.active { display: block; }

.football-mini-match-date {
    padding: 5px 12px;
    font-family: var(--fm);
    font-size: 10px;
    color: var(--text3);
    background: var(--bg3);
}
.football-mini-match-compet {
    padding: 5px 12px;
    font-family: var(--fb);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text3);
    text-align: center;
}
.football-mini-match-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}
.football-mini-match-row:last-child { border-bottom: none; }
.football-mini-match-team {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text2);
    text-decoration: none;
}
.football-mini-match-team:hover { color: var(--accent3); }
.football-mini-match-team.away { text-align: right; }
.football-mini-match-score {
    flex-shrink: 0;
    min-width: 34px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.football-mini-match-score img { width: 12px; height: 12px; }
.football-mini-empty { padding: 14px 12px; text-align: center; color: var(--text3); font-size: 11px; }

/* ════════════════════════════════════════════
   EFFECTIF D'UN CLUB (view_team.tpl)
════════════════════════════════════════════ */

/* Ligne "Entraîneur" */
.team-coach-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text2);
}
.team-coach-row b { color: var(--text3); font-weight: 600; margin-right: 2px; }
.team-coach-row a { color: var(--text2); text-decoration: none; font-weight: 600; transition: color .15s; }
.team-coach-row a:hover { color: var(--accent3); }
.team-coach-row img { flex-shrink: 0; }

/* Groupe par poste */
.team-position-group + .team-position-group { border-top: 1px solid var(--border); }
.team-position-title {
    background: var(--bg3);
    padding: 8px 16px;
    font-family: var(--fh);
    font-size: 12px;
    font-weight: 700;
    color: var(--text3);
    letter-spacing: .3px;
    text-transform: uppercase;
}

.team-player-row {
    display: grid;
    grid-template-columns: 24px 1fr 100px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
}
.team-player-row:last-child { border-bottom: none; }
.team-player-flag { width: 20px; flex-shrink: 0; }
.team-player-name {
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text2);
    text-decoration: none;
    transition: color .15s;
}
.team-player-name:hover { color: var(--accent3); }
.team-player-birthdate {
    font-family: var(--fm);
    font-size: 11px;
    color: var(--text3);
}
.team-player-age {
    font-size: 11px;
    color: var(--text3);
    white-space: nowrap;
}

.team-roster-note {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg3);
    border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════
   CALENDRIER D'UN CLUB (view_calendarclub.tpl)
   Réutilise football-results-team / football-results-score-value.
════════════════════════════════════════════ */
.club-calendar-row {
    display: grid;
    grid-template-columns: 150px 150px 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
}
.club-calendar-row:last-child { border-bottom: none; }

.club-calendar-competition {
    font-family: var(--fb);
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
}

.club-calendar-date {
    font-family: var(--fm);
    font-size: 11px;
    color: var(--text3);
    white-space: nowrap;
}

/* ════════════════════════════════════════════
   STATS D'UNE PERSONNE PAR COMPÉTITION (view_person.tpl)
   Tableau transposé : 1ère colonne = libellé de la stat, colonnes suivantes = compétitions.
════════════════════════════════════════════ */
.person-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fb);
    font-size: 12px;
}
.person-stats-table th,
.person-stats-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.person-stats-table thead th {
    background: var(--bg3);
    color: var(--text2);
    font-weight: 700;
}
.person-stats-table thead th a { color: var(--text2); text-decoration: none; }
.person-stats-table thead th a:hover { color: var(--accent3); }
.person-stats-table th:first-child,
.person-stats-table td:first-child {
    text-align: left;
    color: var(--text3);
    font-weight: 600;
}
.person-stats-table tbody tr:last-child td { border-bottom: none; }

/* ════════════════════════════════════════════
   RÉSUMÉ D'UN MATCH (view_match.tpl + view_match_side.tpl)
════════════════════════════════════════════ */
.match-meta {
    padding: 10px 16px;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    font-family: var(--fb);
    font-size: 12px;
    color: var(--text2);
}
.match-meta a { color: var(--text2); text-decoration: none; }
.match-meta a:hover { color: var(--accent3); }

.match-score-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 28px 16px;
    border-bottom: 1px solid var(--border);
}

.match-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.match-score-team.dom { justify-self: end; }
.match-score-team.ext { justify-self: start; }
.match-score-team img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.match-score-team span {
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    text-align: center;
    transition: color .15s;
}
.match-score-team:hover span { color: var(--accent3); }

.match-score-value {
    font-family: var(--fh);
    font-size: 36px;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
}
.match-score-extra {
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 600;
    color: var(--text3);
    margin-top: 4px;
}

.match-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.match-side-block + .match-side-block { border-top: 1px solid var(--border); }

.match-side-block-head {
    background: var(--bg3);
    padding: 8px 16px;
    font-family: var(--fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text3);
}

.match-side-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--fb);
    font-size: 12px;
    color: var(--text2);
}
.match-side-row:last-child { border-bottom: none; }
.match-side-row-name a { color: var(--text2); text-decoration: none; }
.match-side-row-name a:hover { color: var(--accent3); }
.match-side-row-min { color: var(--text3); font-size: 11px; white-space: nowrap; }
.match-side-row-assist { color: var(--text3); font-size: 11px; }

.match-card {
    display: inline-block;
    width: 8px;
    height: 11px;
    border-radius: 1px;
    margin-right: 4px;
    vertical-align: middle;
}
.match-card.yellow { background: var(--amber); }
.match-card.red { background: var(--red); }

.match-sub { font-size: 10px; margin-left: 4px; white-space: nowrap; }
.match-sub.in  { color: var(--green); }
.match-sub.out { color: var(--red); }

/* ── Terrain de composition (bloc "Compositions" de view_match.tpl) ─────────────────────
   Un seul terrain à l'horizontale, les deux équipes face à face (domicile à gauche attaquant
   vers la droite, extérieur à droite attaquant vers la gauche). Affiché quand au moins une des
   deux formations est connue (FootballController::view_match() calcule $pitch_ok_dom/ext +
   $posCoordsDom/Ext) ; sinon view_match_side.tpl retombe sur la liste classique des titulaires. */
/* max-width:60% (terrain, plus bas) = ~40% plus petit que la largeur de la colonne (retour
   utilisateur : le terrain à 100% était trop imposant).
   .formation-layout : le nom du club/formation/entraîneur reste toujours au-dessus du terrain
   (.formation-team-labels). Les avertissements + remplaçants de chaque équipe (.formation-side-
   info) sont en colonnes de part et d'autre du terrain à partir de 900px ; en dessous, ils
   repassent simplement au-dessus/en dessous du terrain (une seule colonne empilée, même
   balisage — pas de duplication, juste une réorganisation en CSS). */
.formation-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.formation-side-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.formation-pitch-col { min-width: 0; }

@media (min-width: 900px) {
    /* justify-content:space-between est sans effet quand .formation-pitch-col est présent (il
       occupe déjà tout l'espace restant, flex:1) mais écarte proprement les deux colonnes
       latérales quand le terrain est absent (aucune formation connue pour le match). */
    .formation-layout { flex-direction: row; align-items: flex-start; justify-content: space-between; }
    .formation-side-info { flex: 0 0 230px; }
    .formation-pitch-col { flex: 1; }
}

.formation-team-labels {
    display: flex;
    justify-content: space-between;
    max-width: 60%;
    margin: 0 auto;
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    padding: 0 4px 8px;
}
.formation-team-labels b { color: var(--accent3); font-weight: 700; }
.formation-team-labels > span { display: flex; flex-direction: column; gap: 2px; }
.formation-team-labels > span:last-child { align-items: flex-end; text-align: right; }
.formation-coach {
    font-family: var(--fb);
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    color: var(--text3);
}
.formation-coach a { color: var(--text3); text-decoration: none; }
.formation-coach a:hover { color: var(--accent3); }

.formation-pitch-h {
    position: relative;
    width: 100%;
    max-width: 60%;
    aspect-ratio: 100 / 62;
    margin: 0 auto 10px;
    background:
        repeating-linear-gradient(to right, rgba(255,255,255,.03) 0 10%, transparent 10% 20%),
        linear-gradient(90deg, #1e4d33, #16382a);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 6px;
    overflow: hidden;
}
.formation-pitch-h-halfway,
.formation-pitch-h-circle, .formation-pitch-h-box, .formation-pitch-h-box-small {
    content: "";
    position: absolute;
    border: 1.5px solid rgba(255,255,255,.35);
}
/* Ligne médiane (verticale, terrain à l'horizontale) */
.formation-pitch-h-halfway { left: 50%; top: 4%; bottom: 4%; width: 0; border-width: 0 0 0 1.5px; }
/* Rond central */
.formation-pitch-h-circle { top: 50%; left: 50%; height: 30%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); }
/* Surfaces de réparation (gauche = but domicile, droite = but extérieur) */
.formation-pitch-h-box { top: 18%; bottom: 18%; width: 12%; border-left: none; border-right: none; }
.formation-pitch-h-box.left  { left: -1.5px; border-left: none; }
.formation-pitch-h-box.right { right: -1.5px; border-right: none; }
.formation-pitch-h-box-small { top: 32%; bottom: 32%; width: 5%; }
.formation-pitch-h-box-small.left  { left: -1.5px; }
.formation-pitch-h-box-small.right { right: -1.5px; }

.formation-player {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: translate(-50%,-50%);
    text-decoration: none;
    z-index: 1;
}
.formation-player-dot {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: background .15s;
}
.formation-player:hover .formation-player-dot { background: var(--accent2); }
.formation-player-captain {
    position: absolute;
    top: -5px; right: -5px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--amber);
    color: #1a070f;
    font-size: 8px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
}
.formation-player-name {
    max-width: 66px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-family: var(--fb);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Petits pictos but/passe décisive/carton, empilés au-dessus du point ($player_icons) */
.formation-player-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 10px;
}
.formation-player-icons img { width: 10px; height: 10px; display: block; }
.formation-player-icons .match-card { width: 6px; height: 9px; margin-right: 0; }
.formation-player-sub {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}
.formation-player-sub.out { color: var(--red); }

@media (max-width: 640px) {
    .formation-team-labels, .formation-pitch-h { max-width: 100%; }
    .formation-player-name { max-width: 46px; font-size: 8px; padding: 0 3px; }
    .formation-player-dot { width: 16px; height: 16px; }
    .formation-player-icons img { width: 8px; height: 8px; }
}


@media (max-width: 640px) {
    .match-details-grid { grid-template-columns: 1fr; }
    .match-score-header { gap: 10px; padding: 20px 10px; }
    .match-score-value { font-size: 24px; }
    .match-score-team img { width: 44px; height: 44px; }
    .match-score-team span { font-size: 11px; }
}

/* La visionneuse d'image ("colorbox") utilisée par view_person.tpl est désormais globale dans
   base.css (déplacée car réutilisée par profils/view.tpl). */

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 640px) {
    .football-competitions-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .football-match-row { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 8px 10px; }
    .football-match-team { font-size: 12px; }
    .football-results-row { grid-template-columns: 1fr auto 1fr; }
    .football-results-date,
    .football-results-spectators { display: none; }
    .football-standings { font-size: 11px; }
    .football-standings th, .football-standings td { padding: 6px 4px; }
    .team-player-row { grid-template-columns: 20px 1fr auto; }
    .team-player-birthdate { display: none; }
    .club-calendar-row { grid-template-columns: 1fr auto 1fr; }
    .club-calendar-competition,
    .club-calendar-date { display: none; }
    .football-standings-mini th, .football-standings-mini td { padding: 5px 3px; font-size: 10px; }
}