/* ==========================================================
   Pages d'équipe — en-tête commun (layout/equipe.php)
   ========================================================== */

.equipe-entete {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-top: 4px solid var(--ligne);
    border-bottom: 0;
    border-radius: var(--rayon) var(--rayon) 0 0;
    overflow: hidden;
}

.equipe-entete__identite {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.5rem 1.25rem;
}
.equipe-entete__logo {
    width: 112px; height: 112px;
    flex: none;
}
.equipe-entete__texte { min-width: 0; }
.equipe-entete__ville {
    margin: 0;
    color: var(--texte-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .95rem;
}
.equipe-entete__nom {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1;
}

.equipe-entete__faits {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    color: var(--texte-2);
    font-size: .95rem;
}
.equipe-entete__faits strong {
    color: var(--texte);
    font-family: var(--police-titre);
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-right: .15rem;
}

/* Onglets des pages de l'équipe : bande accrochée sous la barre du haut (60 px + ligne de 3 px) en défilant */
.equipe-onglets {
    position: sticky;
    top: 63px;
    z-index: 40;
    margin-bottom: 2rem;
    border: 1px solid var(--trait);
    border-radius: 0 0 var(--rayon) var(--rayon);
    background: var(--surface-2);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}
.equipe-onglets ul {
    list-style: none;
    margin: 0;
    padding: 0 .75rem;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.equipe-onglets ul::-webkit-scrollbar { display: none; }
.equipe-onglets a {
    display: block;
    padding: .8rem .85rem .7rem;
    color: var(--texte-2);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.equipe-onglets a:hover { color: var(--texte); text-decoration: none; }
.equipe-onglets a[aria-current="page"] {
    color: var(--texte);
    border-bottom-color: var(--bleu);
}


/* Masse salariale : deux cases à droite de l'identité de l'équipe */
.equipe-entete__masse {
    margin: 0 0 0 auto;
    display: flex;
    gap: .75rem;
    flex: none;
}
.masse-case {
    min-width: 12.5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--surface-2);
}
.masse-case dt {
    color: var(--texte-2);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.masse-case dd { margin: 0; }
.masse-case__valeur {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.masse-case__note { color: var(--texte-2); font-size: .85rem; }
.masse-case__valeur.est-negatif { color: var(--baisse); }

@media (max-width: 1100px) {
    .equipe-entete__identite { flex-wrap: wrap; }
    .equipe-entete__masse { margin-left: 0; flex-basis: 100%; }
    .masse-case { flex: 1; min-width: 0; }
}
@media (max-width: 640px) {
    .equipe-entete__identite { gap: 1rem; padding: 1.25rem 1rem 1rem; }
    .equipe-entete__logo { width: 72px; height: 72px; }
    .equipe-entete__faits { gap: .25rem 1rem; }
}

/* Tablette et cellulaire : une bande de pastilles qui glisse au doigt (l'onglet actif est centré, layout/equipe.php),
   et un en-tête compact (logo à côté du nom, fiche sur une ligne, masse salariale en deux petites tuiles) */
@media (max-width: 960px) {
    /* Cellulaire : les pages de l'équipe sont dans le menu burger (layout/menu.php) ; l'en-tête redevient un cadre complet */
    .equipe-onglets { display: none; }
    .equipe-entete { border-bottom: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: 1.25rem; }
    .equipe-onglets ul { gap: .4rem; padding: .55rem .6rem; scroll-snap-type: x proximity; }
    .equipe-onglets li { flex: none; scroll-snap-align: center; }
    .equipe-onglets a {
        padding: .45rem .85rem;
        border: 1px solid var(--trait);
        border-radius: 999px;
        background: var(--surface);
        font-size: .8rem;
    }
    .equipe-onglets a[aria-current="page"] {
        background: var(--accent-fond);
        border-color: var(--accent-fond);
        color: var(--accent-texte);
    }
}
@media (max-width: 640px) {
    .equipe-entete__identite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; padding: 1rem 1rem .9rem; align-items: center; }
    .equipe-entete__logo { width: 58px; height: 58px; }
    .equipe-entete__ville { font-size: .78rem; }
    .equipe-entete__nom { font-size: 2.1rem; }
    .equipe-entete__faits { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: .2rem; gap: 1rem; font-size: .85rem; white-space: nowrap; }
    .equipe-entete__faits::-webkit-scrollbar { display: none; }
    .equipe-entete__faits strong { font-size: 1.15rem; }
    .equipe-entete__masse { grid-column: 1 / -1; flex-direction: row; gap: .5rem; }
    .masse-case { padding: .5rem .7rem; }
    .masse-case dt { font-size: .66rem; }
    .masse-case__valeur { font-size: 1.45rem; }
    .masse-case__note { font-size: .72rem; line-height: 1.25; }
}

/* Pastille de résultat : V, D, DP (accueil et calendrier de l'équipe) */
.pastille-resultat {
    display: inline-grid;
    place-items: center;
    min-width: 2.2rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
    border: 2px solid currentColor;
}
.pastille-resultat--victoire { color: var(--monte); }
.pastille-resultat--defaite  { color: var(--baisse); }

/* ==========================================================
   Tableaux des pages d'équipe (Formation, Statistiques)
   Tri : js/tableaux2026.js (<table data-triable>)
   ========================================================== */

/* Un groupe : attaquants, défenseurs ou gardiens */
.groupe { padding: 1rem 0 .5rem; min-width: 0; }
.groupe__titre {
    font-size: 1.3rem;
    padding: 0 1rem .6rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.groupe__compte {
    font-family: var(--police-texte);
    font-size: .9rem;
    font-weight: 600;
    color: var(--texte-2);
}
.groupe > .discret { padding: 0 1rem; margin: 0; }

/* Défilement horizontal sur petit écran, la colonne du nom reste visible */
.defilement { overflow-x: auto; }

.tableau--equipe { font-size: .9rem; }
.tableau--equipe th,
.tableau--equipe td { text-align: center; padding: .45rem .5rem; white-space: nowrap; }
.tableau--equipe thead th { position: relative; cursor: pointer; user-select: none; }
.tableau--equipe thead th:hover { color: var(--texte); }
.tableau--equipe thead abbr { text-decoration: none; cursor: inherit; }
.tableau--equipe thead th[aria-sort="ascending"],
.tableau--equipe thead th[aria-sort="descending"] { color: var(--bleu); }
.tableau--equipe thead th[aria-sort="ascending"]::after  { content: " ▲"; font-size: .65em; }
.tableau--equipe thead th[aria-sort="descending"]::after { content: " ▼"; font-size: .65em; }

.tableau--equipe .col-nom {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    padding-left: 1rem;
    min-width: 13rem;
    font-weight: 600;
}
.tableau--equipe tbody tr:hover .col-nom { background: var(--surface-2); }
.tableau--equipe .col-nom a { color: var(--texte); }
.tableau--equipe .col-nom a:hover { color: var(--bleu); }
.tableau--equipe .col-salaire { text-align: right; padding-right: 1rem; font-variant-numeric: tabular-nums; }

/* Réservistes : séparés et en retrait */
.ligne-separation th {
    text-align: left !important;
    position: sticky;
    left: 0;
    padding: .6rem 1rem .35rem !important;
    color: var(--texte-2);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--surface);
}
.tableau--equipe tbody.sans-tri tr:hover { background: transparent; }
.est-reserve td,
.est-reserve .col-nom a { color: var(--texte-2); }

/* Moyenne du groupe */
.tableau--equipe tfoot th,
.tableau--equipe tfoot td {
    border-top: 2px solid var(--trait);
    border-bottom: 0;
    font-weight: 700;
    color: var(--texte-2);
}
.tableau--equipe tfoot .col-nom { color: var(--texte); }


@media (max-width: 640px) {
    .tableau--equipe .col-nom { min-width: 10.5rem; padding-left: .75rem; }
    .groupe__titre { padding: 0 .75rem .5rem; }
}

/* Pastilles pour aller à une section de la page (Lignes, Profondeur) */
.pastilles-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilles-nav a {
    padding: .45rem .9rem;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    font-weight: 700;
}
.pastilles-nav a:hover { border-color: var(--bleu); text-decoration: none; }

/* Boutons de filtre (Calendrier, Mouvements) */
.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.filtres__groupe {
    display: inline-flex;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--surface);
    padding: .2rem;
}
.filtres__groupe button {
    border: 0;
    background: transparent;
    color: var(--texte-2);
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    cursor: pointer;
}
.filtres__groupe button:hover { color: var(--texte); }
.filtres__groupe button[aria-pressed="true"] {
    background: var(--accent-fond);
    color: var(--accent-texte);
}

/* UFA / RFA à l'échéance du contrat */
.statut-contrat {
    display: inline-block;
    padding: .05rem .45rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    border: 1px solid currentColor;
}
.contrat--ufa .statut-contrat, .statut-contrat.contrat--ufa { color: var(--ufa); }
.contrat--rfa .statut-contrat, .statut-contrat.contrat--rfa { color: var(--bleu); }


/* ==========================================================
   En-tête d'équipe ouvert, au style de l'accueil (sans cadre ni 2e ligne rouge) :
   logo et nom à gauche, tuiles de masse salariale à droite (comme « Champions en titre »),
   onglets soulignés en bleu (comme les titres de section) accrochés en haut en défilant,
   avec le logo et le nom qui s'y glissent (classe est-colle, layout/equipe.php)
   ========================================================== */
.equipe-entete { background: none; border: 0; border-radius: 0; overflow: visible; margin-bottom: 0; }
.equipe-entete__identite { padding: .5rem 0 1.25rem; gap: 1.75rem; }
.equipe-entete__logo { width: 120px; height: 120px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.equipe-entete__nom { font-size: clamp(2.6rem, 5.5vw, 4rem); letter-spacing: -.01em; }
.equipe-entete__faits li { display: inline-flex; align-items: baseline; gap: .15rem; }
.masse-case { background: var(--surface); border-left: 4px solid var(--bleu); padding: .65rem 1rem; }
.masse-case:last-child { border-left-color: var(--monte); }
.masse-case:has(.est-negatif) { border-left-color: var(--baisse); }

.equipe-onglets {
    display: flex; align-items: stretch;
    background: var(--fond); border: 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
    border-radius: 0; box-shadow: none;
    transition: box-shadow .2s ease;
}
.equipe-onglets ul { padding: 0; flex: 1; min-width: 0; }
.equipe-onglets a { padding: .95rem .9rem .8rem; letter-spacing: .05em; }
.equipe-onglets li:first-child a { padding-left: 0; }
.equipe-onglets a[aria-current="page"] { border-bottom-color: var(--bleu); }
.equipe-onglets .equipe-onglets__mini {
    display: flex; align-items: center; gap: .5rem; flex: none;
    max-width: 0; overflow: hidden; opacity: 0; padding: 0;
    color: var(--texte); font-family: var(--police-titre); font-size: 1.25rem; font-weight: 800; text-transform: uppercase; white-space: nowrap;
    transition: max-width .3s ease, opacity .25s ease, padding .3s ease;
}
.equipe-onglets .equipe-onglets__mini:hover { text-decoration: none; color: var(--texte); }
.equipe-onglets.est-colle { box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.equipe-onglets.est-colle .equipe-onglets__mini { max-width: 16rem; opacity: 1; padding-right: 1.25rem; margin-right: .5rem; border-right: 1px solid var(--trait); }
.equipe-onglets.est-colle li:first-child a { padding-left: .9rem; }

@media (max-width: 1100px) {
    .equipe-entete__masse { margin-top: .25rem; }
}
@media (max-width: 960px) {
    /* Cellulaire : pages de l'équipe dans le menu burger ; en-tête ouvert, séparé du contenu par une fine ligne */
    .equipe-entete { border-bottom: 1px solid var(--trait); border-radius: 0; margin-bottom: 1.25rem; }
    .equipe-onglets { display: none; }
}
@media (max-width: 640px) {
    .equipe-entete__identite { padding: .25rem 0 1rem; }
    .equipe-entete__logo { width: 64px; height: 64px; }
}
/* Cellulaire : pastilles de sections sur une ligne qui glisse au doigt */
@media (max-width: 640px) {
    .pastilles-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: .1rem; }
    .pastilles-nav::-webkit-scrollbar { display: none; }
    .pastilles-nav a { flex: none; }
}@media (max-width: 640px) {
    /* La bande de pastilles ne doit jamais élargir la page : ses conteneurs peuvent rétrécir */
    .stats-avancees__entete > *, .stats-ligue__entete > *, .meneurs-page__outils { min-width: 0; max-width: 100%; }
    .meneurs-page__outils > .pastilles-nav { flex: 1 1 100%; }
}
@media (max-width: 640px) {
    /* La largeur de la bande (toutes les pastilles) ne compte pas dans la largeur de la page : elle défile dans son espace */
    .pastilles-nav { contain: inline-size; flex: 1 1 100%; width: 100%; }
}

/* Tablette et cellulaire : les pages de l'équipe sont dans le menu burger (layout/menu.php, ouvert tout seul) */
@media (max-width: 960px) {
    .equipe-onglets, .equipe-bascule { display: none; }
    .equipe-entete { margin-bottom: 1rem; }
}
/* Cellulaire : en-tête compact. Seule la fiche reste sous le nom (points, rangs et série sont dans le classement) ;
   le logo s'aligne en haut, à la hauteur de la ville et du nom */
@media (max-width: 640px) {
    .equipe-entete__identite { align-items: start; }
    .equipe-entete__logo { width: 64px; height: 64px; margin-top: .15rem; }
    .equipe-entete__faits { flex-wrap: nowrap; overflow: visible; margin-top: .1rem; }
    .equipe-entete__faits li:not(:first-child) { display: none; }
}