:root {
    --fond: #f5f7fa;
    --surface: #ffffff;
    --texte: #15202b;
    --secondaire: #697586;
    --bordure: #e3e8ef;
    --accent: #176b4d;
    --accent-clair: #e9f5f0;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.entete {
    min-height: 64px;
    padding: 0 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.marque {
    color: var(--texte);
    font-size: 21px;
    font-weight: 800;
    text-decoration: none;
}

nav {
    display: flex;
    gap: 22px;
}

nav a {
    color: var(--secondaire);
    font-size: 14px;
    text-decoration: none;
}

.conteneur {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    padding: 32px 0 80px;
}

.hero {
    margin-bottom: 40px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 14px;
}

.hero h1 {
    margin: 5px 0 8px;
    font-size: clamp(28px, 4vw, 46px);
}

.hero p {
    margin: 0;
    color: var(--secondaire);
}

.sur-titre {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

section {
    margin-bottom: 38px;
}

.titre-section {
    margin-bottom: 14px;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.titre-section h2 {
    margin: 0;
    font-size: 21px;
}

.titre-section span {
    color: var(--secondaire);
    font-size: 13px;
}

.grille-matchs {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.carte-match {
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px;
}

.competition {
    margin-bottom: 14px;
    color: var(--secondaire);
    font-size: 12px;

    display: flex;
    align-items: center;
    gap: 7px;
}

.competition img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.heure {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
}

.equipe {
    min-height: 34px;

    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
}

.equipe img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.equipe strong {
    font-size: 14px;
}

.equipe span {
    font-size: 16px;
    font-weight: 800;
}

.tableau-wrapper {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--bordure);
    text-align: left;
    font-size: 13px;
}

th {
    color: var(--secondaire);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

tbody tr:last-child td {
    border-bottom: 0;
}

.score {
    font-weight: 800;
}

.deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.liste-joueurs {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px;
}

.joueur {
    padding: 13px 15px;
    border-bottom: 1px solid var(--bordure);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.joueur:last-child {
    border-bottom: 0;
}

.joueur strong {
    display: block;
    font-size: 14px;
}

.joueur small {
    color: var(--secondaire);
}

.stat-principale {
    font-size: 17px;
    font-weight: 800;
}

.proposition {
    margin-top: 5px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.vide {
    color: var(--secondaire);
}

@media (max-width: 800px) {

    .entete {
        padding: 14px 20px;
        align-items: flex-start;
        flex-direction: column;
    }

    nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .conteneur {
        width: min(100% - 24px, 1400px);
        padding-top: 20px;
    }

    .deux-colonnes {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 22px;
    }
}

/* ================================================================
   PAGES INTERNES
   ================================================================ */

.page-entete {
    margin-bottom: 24px;
}

.page-entete h1,
.fiche-indicateur h1,
.joueur-identite h1 {
    margin: 5px 0 8px;
}

.page-entete p {
    color: var(--secondaire);
}

/* LEXIQUE */

.filtres-lexique {
    margin-bottom: 18px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filtres-lexique input,
.filtres-lexique select {
    min-height: 42px;
    padding: 0 12px;

    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 9px;
}

.filtres-lexique input {
    flex: 1;
    min-width: 250px;
}

.filtres-lexique button,
.bouton-secondaire {
    min-height: 42px;
    padding: 0 17px;

    border-radius: 9px;

    display: inline-flex;
    align-items: center;

    font-weight: 700;
    text-decoration: none;
}

.filtres-lexique button {
    color: white;
    background: var(--accent);
    border: 0;
}

.bouton-secondaire {
    color: var(--texte);
    background: var(--surface);
    border: 1px solid var(--bordure);
}

.compteur {
    margin-bottom: 12px;
    color: var(--secondaire);
    font-size: 13px;
}

.lexique-grille {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.carte-indicateur {
    padding: 18px;

    color: inherit;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px;

    text-decoration: none;
}

.carte-indicateur:hover {
    border-color: var(--accent);
}

.carte-indicateur h2 {
    margin: 6px 0;
    font-size: 17px;
}

.carte-indicateur p {
    color: var(--secondaire);
    font-size: 13px;
    line-height: 1.5;
}

.carte-indicateur code,
.fiche-indicateur code {
    color: var(--accent);
}

.indicateur-categorie {
    color: var(--secondaire);
    font-size: 11px;
    text-transform: uppercase;
}

.indicateur-meta {
    margin-top: 12px;

    display: flex;
    gap: 6px;
}

.indicateur-meta span {
    padding: 4px 7px;

    background: var(--accent-clair);
    border-radius: 6px;

    color: var(--accent);
    font-size: 11px;
}

.retour {
    color: var(--secondaire);
    text-decoration: none;
}

.fiche-indicateur {
    max-width: 900px;
    margin-top: 20px;

    padding: 28px;

    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 14px;
}

.bloc-detail {
    margin-top: 28px;
}

.bloc-detail h2 {
    font-size: 16px;
}

.bloc-detail p {
    line-height: 1.65;
}

.grille-details {
    margin-top: 28px;

    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.grille-details > div {
    padding: 12px;

    background: var(--fond);
    border-radius: 9px;
}

.grille-details span,
.grille-details strong {
    display: block;
}

.grille-details span {
    margin-bottom: 4px;

    color: var(--secondaire);
    font-size: 11px;
}

/* JOUEUR */

.joueur-entete {
    padding: 24px;

    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 14px;

    display: grid;
    grid-template-columns: 105px 1fr auto;
    gap: 22px;
    align-items: center;
}

.joueur-photo img,
.photo-vide {
    width: 105px;
    height: 105px;

    border-radius: 12px;

    object-fit: cover;
}

.photo-vide {
    background: var(--accent-clair);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--accent);
    font-size: 42px;
    font-weight: 800;
}

.ligne-identite {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;

    color: var(--secondaire);
    font-size: 13px;
}

.valeur-joueur {
    text-align: right;
}

.valeur-joueur span,
.valeur-joueur strong {
    display: block;
}

.valeur-joueur span {
    margin-bottom: 4px;

    color: var(--secondaire);
    font-size: 11px;
}

.valeur-joueur strong {
    font-size: 20px;
}

.alerte-blessure {
    padding: 15px 18px;

    background: #fff4e6;
    border: 1px solid #ffd8a8;
    border-radius: 10px;

    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

.alerte-blessure small {
    color: var(--secondaire);
}

.trois-colonnes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.carte-info {
    height: calc(100% - 40px);
    padding: 17px;

    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px;
}

.carte-info dl {
    margin: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.carte-info dt {
    color: var(--secondaire);
    font-size: 12px;
}

.carte-info dd {
    margin: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
}

.grille-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.grille-stats > div {
    padding: 10px;

    background: var(--fond);
    border-radius: 9px;

    text-align: center;
}

.grille-stats strong,
.grille-stats span {
    display: block;
}

.grille-stats strong {
    font-size: 22px;
}

.grille-stats span {
    margin-top: 4px;

    color: var(--secondaire);
    font-size: 10px;
}

.liste-carriere > div {
    padding: 8px 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-carriere > div:last-child {
    border-bottom: 0;
}

.liste-carriere strong,
.liste-carriere small {
    display: block;
}

.liste-carriere small {
    color: var(--secondaire);
}

.joueur a {
    color: inherit;
    text-decoration: none;
}

.joueur a:hover {
    color: var(--accent);
}

.etat-vide {
    padding: 30px;

    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px;
}

@media (max-width: 900px) {

    .joueur-entete {
        grid-template-columns: 80px 1fr;
    }

    .joueur-photo img,
    .photo-vide {
        width: 80px;
        height: 80px;
    }

    .valeur-joueur {
        grid-column: 1 / -1;
        text-align: left;
    }

    .trois-colonnes {
        grid-template-columns: 1fr;
    }

}

/* ================================================================
   ACTIVEFOOT DESIGN SYSTEM
   ================================================================ */

:root,
html[data-theme="light"] {

    --af-noir: #0F1117;
    --af-vert: #22C55E;
    --af-blanc: #E2EAF5;
    --af-or: #F0B429;
    --af-bleu: #131A24;

    --fond: #F4F7F9;
    --surface: #FFFFFF;
    --surface-2: #EEF3F7;

    --texte: #0F1117;
    --secondaire: #647184;
    --bordure: #DCE4EA;

    --accent: #22C55E;
    --accent-clair: #E7F8ED;

    --ombre:
        0 10px 30px
        rgba(15, 17, 23, .07);
}


html[data-theme="dark"] {

    --fond: #0F1117;
    --surface: #131A24;
    --surface-2: #192332;

    --texte: #E2EAF5;
    --secondaire: #95A3B7;
    --bordure: #273344;

    --accent: #22C55E;
    --accent-clair: #163A27;

    --ombre:
        0 10px 30px
        rgba(0, 0, 0, .25);
}


body {
    transition:
        background-color .2s ease,
        color .2s ease;
}


.entete {
    background: var(--surface);
    border-bottom:
        1px solid var(--bordure);
}


.marque {
    display: flex;
    align-items: center;
    gap: 10px;
}


.logo-site {
    width: 94px;
    height: 48px;
    object-fit: contain;
}


.logo-sombre {
    display: none;
}


html[data-theme="dark"]
.logo-clair {
    display: none;
}


html[data-theme="dark"]
.logo-sombre {
    display: block;
}


.marque-data {
    padding-left: 10px;

    border-left:
        1px solid var(--bordure);

    color: var(--accent);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .18em;
}


.actions-entete {
    display: flex;
    align-items: center;
    gap: 10px;
}


.bouton-theme,
.deconnexion {

    min-height: 36px;

    padding:
        0 11px;

    background:
        var(--surface-2);

    border:
        1px solid
        var(--bordure);

    border-radius: 8px;

    color:
        var(--texte);

    cursor: pointer;
}


.bouton-theme:hover,
.deconnexion:hover {
    border-color:
        var(--accent);
}


.utilisateur-connecte {

    color:
        var(--secondaire);

    font-size: 12px;
}


.hero,
.carte-match,
.tableau-wrapper,
.liste-joueurs,
.carte-info,
.fiche-indicateur,
.carte-indicateur,
.etat-vide,
.joueur-entete {

    background:
        var(--surface);

    border-color:
        var(--bordure);

    box-shadow:
        var(--ombre);
}


/* ================================================================
   LOGIN
   ================================================================ */

.page-connexion {

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at top,
            rgba(34, 197, 94, .10),
            transparent 42%
        ),
        var(--fond);
}


.connexion-cadre {

    width:
        min(430px, calc(100% - 30px));

    position: relative;
}


.connexion-marque {

    margin-bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


.logo-auth {

    width: 150px;
    height: 85px;

    object-fit: contain;
}


.connexion-marque span {

    padding-left: 12px;

    border-left:
        1px solid var(--bordure);

    color:
        var(--accent);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .18em;
}


.connexion-carte {

    padding: 30px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 16px;

    box-shadow:
        var(--ombre);
}


.connexion-titre {

    margin-bottom: 24px;
}


.connexion-titre h1 {

    margin:
        0 0 6px;

    font-size: 27px;
}


.connexion-titre p {

    margin: 0;

    color:
        var(--secondaire);
}


.form-auth {

    display: grid;
    gap: 18px;
}


.form-auth label {

    display: grid;
    gap: 7px;

    font-size: 13px;
    font-weight: 700;
}


.form-auth input {

    width: 100%;

    height: 45px;

    padding:
        0 13px;

    background:
        var(--fond);

    border:
        1px solid
        var(--bordure);

    border-radius: 9px;

    color:
        var(--texte);

    outline: none;
}


.form-auth input:focus {

    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(34, 197, 94, .12);
}


.form-auth button {

    height: 46px;

    margin-top: 3px;

    background:
        var(--af-vert);

    border: 0;

    border-radius: 9px;

    color:
        #0F1117;

    font-weight: 900;

    cursor: pointer;
}


.form-auth button:hover {

    filter:
        brightness(1.05);
}


.erreur-auth {

    margin-bottom: 18px;

    padding:
        11px 13px;

    background:
        rgba(240, 180, 41, .13);

    border:
        1px solid
        rgba(240, 180, 41, .45);

    border-radius: 8px;

    color:
        var(--texte);

    font-size: 13px;
}


.theme-auth {

    position: absolute;

    top: 8px;
    right: 0;

    width: 42px;
    height: 42px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 10px;

    color:
        var(--texte);

    cursor: pointer;
}


@media (max-width: 950px) {

    .entete {
        align-items:
            flex-start;
    }

    .actions-entete {

        width: 100%;

        justify-content:
            flex-end;
    }

}

/* ================================================================
   RECHERCHE JOUEURS
   ================================================================ */

.recherche-joueurs {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        180px
        210px
        auto
        auto;

    gap: 10px;
}

.recherche-joueurs input,
.recherche-joueurs select {
    height: 44px;

    padding:
        0 13px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 9px;

    color:
        var(--texte);
}

.recherche-joueurs button {
    padding:
        0 18px;

    background:
        var(--accent);

    border: 0;
    border-radius: 9px;

    color:
        #0F1117;

    font-weight: 800;
}

.barre-resultats {
    margin-bottom: 13px;

    color:
        var(--secondaire);

    font-size: 13px;
}

.grille-joueurs {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                310px,
                1fr
            )
        );

    gap: 12px;
}

.carte-joueur-recherche {
    min-height: 94px;

    padding: 13px;

    display: grid;
    grid-template-columns:
        66px 1fr auto;

    gap: 13px;

    align-items: center;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 12px;

    color:
        var(--texte);

    text-decoration: none;

    box-shadow:
        var(--ombre);
}

.carte-joueur-recherche:hover {
    border-color:
        var(--accent);

    transform:
        translateY(-1px);
}

.avatar-recherche img,
.avatar-initiale {
    width: 66px;
    height: 66px;

    border-radius: 10px;

    object-fit: cover;
}

.avatar-initiale {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        var(--accent-clair);

    color:
        var(--accent);

    font-weight: 900;
    font-size: 25px;
}

.infos-joueur-recherche h2 {
    margin:
        0 0 6px;

    font-size: 15px;
}

.ligne-meta-joueur {
    display: flex;
    flex-wrap: wrap;

    gap:
        5px 10px;

    font-size: 12px;
}

.ligne-meta-joueur.secondaire {
    margin-top: 5px;

    color:
        var(--secondaire);
}

.valeur-recherche {
    color:
        var(--accent);

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}


/* ================================================================
   ANALYSE SPATIALE
   ================================================================ */

.section-spatiale {
    margin-top: 28px;
}

.sous-titre-section {
    margin:
        -5px 0 0;

    color:
        var(--secondaire);

    font-size: 12px;
}

.grille-spatiale {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 18px;
}

.carte-spatiale {
    padding: 17px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 12px;

    box-shadow:
        var(--ombre);
}

.entete-spatial {
    margin-bottom: 13px;
}

.entete-spatial h3 {
    margin: 0;

    font-size: 16px;
}

.entete-spatial p {
    margin:
        4px 0 0;

    color:
        var(--secondaire);

    font-size: 11px;
}

.carte-spatiale canvas {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 8px;
}

.spatial-vide {
    height: 260px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        var(--surface-2);

    border-radius: 8px;

    color:
        var(--secondaire);
}

.legende-shotmap {
    margin-top: 10px;

    display: flex;
    flex-wrap: wrap;

    gap: 15px;

    color:
        var(--secondaire);

    font-size: 11px;
}

.legende-shotmap span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.legende-shotmap .point {
    width: 9px;
    height: 9px;

    display: inline-block;

    border-radius: 50%;
}

.legende-shotmap .but {
    background:
        #F0B429;
}

.legende-shotmap .cadre {
    background:
        #22C55E;
}

.legende-shotmap .autre {
    background:
        #94A3B8;
}


@media (
    max-width: 1000px
) {

    .recherche-joueurs {
        grid-template-columns:
            1fr 1fr;
    }

    .champ-recherche-joueur {
        grid-column:
            1 / -1;
    }

    .grille-spatiale {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 600px
) {

    .recherche-joueurs {
        grid-template-columns:
            1fr;
    }

    .champ-recherche-joueur {
        grid-column:
            auto;
    }

    .carte-joueur-recherche {
        grid-template-columns:
            58px 1fr;
    }

    .avatar-recherche img,
    .avatar-initiale {
        width: 58px;
        height: 58px;
    }

    .valeur-recherche {
        grid-column:
            2;

        justify-self:
            start;
    }

}

/* ================================================================
   FICHE JOUEUR V2
   ================================================================ */

.section-fiche,
.section-historiques {
    margin-top: 30px;
}


.joueur-entete-v2 {
    grid-template-columns:
        110px 1fr auto;
}


.resume-saison {
    display: grid;

    grid-template-columns:
        repeat(
            8,
            minmax(95px, 1fr)
        );

    gap: 10px;
}


.stat-principale {
    min-height: 82px;

    padding: 13px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 11px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-shadow:
        var(--ombre);
}


.stat-principale strong {
    color:
        var(--texte);

    font-size: 23px;
}


.stat-principale span {
    margin-top: 4px;

    color:
        var(--secondaire);

    font-size: 11px;
}


.stat-principale.accent {
    border-color:
        rgba(
            34,
            197,
            94,
            .55
        );
}


.stat-principale.accent strong {
    color:
        var(--accent);
}


/* TRAITS */

.traits-joueur {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                190px,
                1fr
            )
        );

    gap: 9px;
}


.trait-joueur {
    padding: 12px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 9px;
}


.trait-joueur span,
.trait-joueur strong,
.trait-joueur small {
    display: block;
}


.trait-joueur span {
    color:
        var(--secondaire);

    font-size: 10px;

    text-transform:
        uppercase;
}


.trait-joueur strong {
    margin-top: 4px;

    font-size: 13px;
}


.trait-joueur small {
    margin-top: 5px;

    color:
        var(--accent);
}


/* STATS DETAILLEES */

.familles-stats {
    display: grid;
    gap: 10px;
}


.famille-stat {
    overflow: hidden;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 11px;
}


.famille-stat summary,
.bloc-historique summary {
    padding: 14px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    cursor: pointer;

    font-weight: 800;
}


.famille-stat summary:hover,
.bloc-historique summary:hover {
    background:
        var(--surface-2);
}


.famille-stat summary small {
    color:
        var(--secondaire);

    font-size: 11px;
}


.tableau-stats-detaillees {
    border: 0;
    border-radius: 0;
}


.tableau-stats-detaillees table {
    margin: 0;
}


.lien-indicateur {
    color:
        var(--texte);

    text-decoration: none;

    font-weight: 600;
}


.lien-indicateur:hover {
    color:
        var(--accent);
}


.unite-stat {
    margin-left: 5px;

    color:
        var(--secondaire);

    font-size: 10px;
}


/* HISTORIQUES */

.section-historiques {
    margin-top: 45px;

    padding-top: 30px;

    border-top:
        2px solid
        var(--bordure);
}


.bloc-historique {
    margin-bottom: 10px;

    overflow: hidden;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 11px;
}


.bloc-historique summary span {
    min-width: 26px;

    padding:
        3px 7px;

    background:
        var(--surface-2);

    border-radius: 20px;

    color:
        var(--secondaire);

    text-align: center;

    font-size: 11px;
}


.bloc-historique .tableau-wrapper {
    margin: 0;

    border: 0;
    border-radius: 0;
}


/* RESPONSIVE */

@media (
    max-width: 1250px
) {

    .resume-saison {
        grid-template-columns:
            repeat(
                4,
                1fr
            );
    }

}


@media (
    max-width: 700px
) {

    .joueur-entete-v2 {
        grid-template-columns:
            80px 1fr;
    }

    .resume-saison {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

}

/* ================================================================
   MATCH
   ================================================================ */

.match-entete,
.equipe-entete {
    padding: 25px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 14px;

    box-shadow:
        var(--ombre);
}

.competition-match {
    margin-bottom: 22px;

    color:
        var(--secondaire);

    text-align: center;

    font-size: 12px;
}

.score-match {
    display: grid;

    grid-template-columns:
        1fr 170px 1fr;

    align-items: center;

    gap: 20px;
}

.equipe-score {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;

    color:
        var(--texte);

    text-decoration: none;

    text-align: center;
}

.equipe-score img {
    width: 70px;
    height: 70px;

    object-fit: contain;
}

.score-central {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-central > strong {
    font-size: 38px;
}

.score-central span,
.score-central small {
    color:
        var(--secondaire);

    font-size: 11px;
}

.stats-match {
    overflow: hidden;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 11px;
}

.ligne-stat-match {
    min-height: 42px;

    padding:
        8px 15px;

    display: grid;

    grid-template-columns:
        90px 1fr 90px;

    align-items: center;

    border-bottom:
        1px solid
        var(--bordure);

    text-align: center;
}

.ligne-stat-match:last-child {
    border-bottom: 0;
}

.ligne-stat-match strong {
    font-size: 12px;
}

.deux-equipes {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}

.liste-match-joueurs {
    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 11px;

    overflow: hidden;
}

.liste-match-joueurs h3 {
    margin: 0;

    padding: 14px;

    border-bottom:
        1px solid
        var(--bordure);
}

.joueur-match-ligne {
    padding: 10px 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color:
        var(--texte);

    text-decoration: none;

    border-bottom:
        1px solid
        var(--bordure);
}

.joueur-match-ligne:last-child {
    border-bottom: 0;
}

.joueur-match-ligne small {
    display: block;

    margin-top: 3px;

    color:
        var(--secondaire);
}

.joueur-match-note {
    display: flex;

    gap: 8px;

    align-items: center;
}

.joueur-match-note span {
    color:
        var(--secondaire);

    font-size: 11px;
}

.grille-joueurs-simple {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px, 1fr)
        );

    gap: 10px;
}

.carte-simple {
    padding: 13px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 9px;

    color:
        var(--texte);

    text-decoration: none;
}

.carte-simple strong,
.carte-simple span {
    display: block;
}

.carte-simple span {
    margin-top: 4px;

    color:
        var(--secondaire);

    font-size: 11px;
}


/* ================================================================
   EQUIPE
   ================================================================ */

.equipe-entete {
    display: flex;

    gap: 22px;

    align-items: center;
}

.equipe-entete > img {
    width: 100px;
    height: 100px;

    object-fit: contain;
}

.equipe-entete h1 {
    margin:
        5px 0 8px;
}

.liste-matchs-equipe {
    display: grid;
    gap: 6px;
}

.match-equipe-ligne {
    padding:
        11px 14px;

    display: grid;

    grid-template-columns:
        110px 1fr 220px;

    align-items: center;

    gap: 14px;

    background:
        var(--surface);

    border:
        1px solid
        var(--bordure);

    border-radius: 8px;

    color:
        var(--texte);

    text-decoration: none;
}

.match-equipe-ligne span,
.match-equipe-ligne small {
    color:
        var(--secondaire);

    font-size: 11px;
}


@media (max-width: 800px) {

    .score-match {
        grid-template-columns:
            1fr 90px 1fr;
    }

    .deux-equipes {
        grid-template-columns:
            1fr;
    }

    .match-equipe-ligne {
        grid-template-columns:
            1fr;
    }

}