/* ==========================================================================
   FEUILLE DE MATCH — bandeau, onglets, fil, stats, bancs
   --------------------------------------------------------------------------
   Pensée mobile d'abord : une seule section visible à la fois, sous un bandeau
   collant qui garde le score à l'écran. À partir de 992px, les sections qui se
   lisent ensemble (résumé + fil, terrain + stats) passent en deux colonnes.
   ========================================================================== */

.match-page {
    --mp-dom: #2563eb;
    --mp-ext: #dc2626;
    --mp-rail: rgba(148, 163, 184, 0.28);
    --mp-surface: rgba(15, 23, 42, 0.72);
    --mp-surface-haut: rgba(30, 41, 59, 0.82);
}

/* --------------------------------------------------------------------------
   BANDEAU
   -------------------------------------------------------------------------- */

.match-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--gamer-border);
    padding: 0.75rem 0.75rem 1rem;
    text-align: center;
    isolation: isolate;
}

/* Les deux camps sont lisibles avant même de lire les noms : le fond part du
   bleu à gauche vers le rouge à droite. */
.match-hero .mh-fond {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.55), transparent 60%),
        radial-gradient(120% 140% at 100% 0%, rgba(220, 38, 38, 0.5), transparent 60%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.95));
}

.match-hero .mh-contexte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.match-hero .mh-competition {
    color: var(--gamer-text);
    font-weight: 700;
    text-decoration: none;
}

.match-hero .mh-competition:hover {
    color: var(--gamer-cyan);
}

.match-hero .mh-statut {
    margin: 0.15rem 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.match-hero.is-live .mh-statut {
    color: var(--gamer-green);
}

.match-hero.is-upcoming .mh-statut {
    color: var(--gamer-cyan);
}

/* Chrono du direct : on garde le seul temps de jeu, secondes comprises, pour
   l'effet « match en cours » sans le doublon « EN COURS » + minute. */
.match-hero .mh-chrono {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gamer-green);
}

.match-hero .mh-score {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0.5rem;
}

.match-hero .mh-equipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.match-hero .mh-logo {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.match-hero .mh-logo:hover {
    transform: scale(1.06);
}

.match-hero .mh-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.match-hero .mh-nom {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    /* Un nom de club long ne doit pas pousser le score hors de l'axe. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.match-hero .mh-nom:hover {
    color: var(--gamer-cyan);
}

.match-hero .mh-chiffres {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.5rem;
}

.match-hero .mh-valeur {
    margin: 0;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.match-hero .mh-mitemps {
    padding: 0.1rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

/* Raccourci vers le salon Discord, dans le coin du bandeau. */
.match-hero .mh-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    /* Deux commandes y cohabitent — partager, rejoindre le salon Discord — et
       le partage est là même quand le salon n'existe pas. */
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Le rond de partage s'aligne sur la hauteur de la pastille Discord, sans quoi
   il dépasse du coin du bandeau. */
.match-hero .mh-actions .fl-share-btn {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.match-hero .mh-actions .match-chip {
    padding: 0.25rem 0.6rem;
    border-color: rgba(88, 101, 242, 0.55);
    background: rgba(88, 101, 242, 0.22);
    color: #c7ccff;
}

.match-hero .mh-actions .match-chip:hover {
    background: rgba(88, 101, 242, 0.4);
    color: #fff;
}

/* Sur un écran étroit, l'icône suffit : le mot « Salon Match » viendrait mordre
   sur le nom de la compétition, qui est centré juste à côté. */
@media (max-width: 575.98px) {
    .match-hero .mh-actions .match-chip span {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   ONGLETS
   -------------------------------------------------------------------------- */

.match-onglets {
    position: sticky;
    /* Hauteur réelle de la barre de navigation collante, mesurée par
       js/match-ux.js : elle diffère entre l'espace connecté et la vue publique,
       et le bandeau d'environnement la décale encore en dev. */
    top: var(--mp-onglets-top, 0px);
    z-index: 20;
    display: flex;
    margin: 0.4rem 0 0.5rem;
    padding: 0.1rem;
    gap: 0.15rem;
    border-radius: 0.9rem;
    border: 1px solid var(--gamer-border);
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Cinq onglets sur un écran étroit : on défile plutôt que de tronquer. */
    overflow-x: auto;
    scrollbar-width: none;
}

.match-onglets::-webkit-scrollbar {
    display: none;
}

.match-onglets .mo-onglet {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.3rem 0.5rem 0.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0.6rem 0.6rem 0 0;
    background: transparent;
    color: var(--gamer-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.match-onglets .mo-onglet i {
    font-size: 1rem;
}

.match-onglets .mo-onglet:hover {
    color: var(--gamer-text);
}

.match-onglets .mo-onglet.is-active {
    color: var(--gamer-yellow);
    border-bottom-color: var(--gamer-yellow);
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.match-pane {
    display: none;
}

.match-pane.is-active {
    display: block;
}

.match-bloc {
    margin-bottom: 0.9rem;
    border: 1px solid var(--gamer-border);
    border-radius: 1rem;
    background: var(--mp-surface);
    overflow: hidden;
}

/* Masqué pendant le coaching : la barre dédiée dit déjà tout. */
.match-bloc>.mb-titre[hidden] {
    display: none;
}

.match-bloc>.mb-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--gamer-border);
    background: var(--mp-surface-haut);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gamer-text);
}

.match-bloc>.mb-corps {
    padding: 0.75rem 0.8rem;
}

.match-bloc>.mb-corps-nu {
    padding: 0;
}

/* --------------------------------------------------------------------------
   ÉDITO DU MATCH
   --------------------------------------------------------------------------
   Un bloc de match comme les autres, replié sous son titre. Il flottait
   auparavant à même le fond de la page, en gros titre de presse : le seul
   élément sans cadre au milieu de cartes, et le plus gros texte de l'écran.
   Il garde son caractère — un empattement, qui va bien à un article — mais à
   une taille qui ne mange plus ses voisins.

   Le titre reste visible replié : c'est lui qui donne envie d'ouvrir, « L'édito
   du match » seul n'apprendrait rien.
   -------------------------------------------------------------------------- */

.press-editorial-toggle {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "kicker chevron"
        "title chevron";
    align-items: center;
    gap: 0.15rem 0.75rem;
    padding: 0.55rem 0.8rem;
    background: var(--mp-surface-haut);
    border-bottom: 1px solid var(--gamer-border);
    text-decoration: none !important;
}

/* Replié, le filet n'aurait rien à séparer. */
.press-editorial-toggle.collapsed {
    border-bottom-color: transparent;
}

.press-editorial-kicker {
    grid-area: kicker;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gamer-cyan);
}

.press-editorial-title {
    grid-area: title;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    /* Les titres générés arrivent tantôt en capitales, tantôt en casse
       normale : on ne force ni l'une ni l'autre, on choisit une taille qui
       supporte les deux. */
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gamer-text);
}

.press-editorial-toggle:hover .press-editorial-title {
    color: var(--gamer-cyan);
}

.press-editorial-chevron {
    grid-area: chevron;
    color: var(--gamer-text-muted);
    transition: transform 0.2s ease;
}

/* Bootstrap retire .collapsed quand le bloc est déplié. */
.press-editorial-toggle:not(.collapsed) .press-editorial-chevron {
    transform: rotate(180deg);
}

.press-editorial-body {
    padding: 0.8rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--gamer-text-muted);
}

.press-editorial-body p {
    margin: 0 0 0.75rem;
}

.press-editorial-body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   FIL DU MATCH
   -------------------------------------------------------------------------- */

.match-timeline .mtl-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--gamer-border);
}

.match-timeline .mtl-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.match-timeline .mtl-filtre {
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--gamer-border);
    border-radius: 999px;
    background: transparent;
    color: var(--gamer-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.match-timeline .mtl-filtre.is-active {
    border-color: var(--gamer-yellow);
    color: var(--gamer-yellow);
}

.match-timeline .mtl-liste {
    list-style: none;
    margin: 0;
    /* La bande de camp occupe le bord gauche des lignes : le retrait de la
       liste est repris par le padding des lignes elles-mêmes, pour que la
       colonne des minutes reste à la même place qu'avant. */
    padding: 0.35rem 0.8rem 0.6rem 0.35rem;
}

/* Sur téléphone, chaque pixel rendu à gauche est un pixel gagné par le texte,
   qui est ce qu'on vient lire. */
@media (max-width: 991.98px) {
    .match-timeline .mtl-liste {
        padding-left: 0;
        padding-right: 0.5rem;
    }
}

.match-timeline .mtl-evt {
    position: relative;
    display: grid;
    /* La colonne des minutes est dimensionnée par le fil lui-même
       (match/vue/timeline.php), selon qu'il contient du temps additionnel. */
    grid-template-columns: var(--mtl-min-largeur, 2.8rem) 0.9rem 1.6rem 1fr;
    align-items: start;
    gap: 0 0.35rem;
    padding: 0.5rem 0 0.5rem 0.45rem;
    border-radius: 0 0.3rem 0.3rem 0;
}

.match-timeline .mtl-evt+.mtl-evt {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.match-timeline .mtl-min {
    padding-top: 0.05rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gamer-cyan);
    text-align: right;
    white-space: nowrap;
}

/* Le rail relie les événements entre eux : il donne au fil sa lecture
   chronologique sans qu'aucune ligne n'ait à répéter « puis ». */
.match-timeline .mtl-rail {
    position: relative;
    align-self: stretch;
    display: block;
    width: 0.9rem;
}

.match-timeline .mtl-rail::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    left: 50%;
    width: 1px;
    background: var(--mp-rail);
}

.match-timeline .mtl-evt:first-child .mtl-rail::before {
    top: 0.6rem;
}

.match-timeline .mtl-evt:last-child .mtl-rail::before {
    bottom: calc(100% - 0.6rem);
}

.match-timeline .mtl-dot {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    width: 0.68rem;
    height: 0.68rem;
    margin-left: -0.34rem;
    border-radius: 50%;
    /* Le liseré détache la pastille du trait du rail, qu'elle chevauche. */
    border: 2px solid var(--gamer-bg);
    background: var(--mp-rail);
}

.match-timeline .mtl-icone {
    padding-top: 0.05rem;
    font-size: 0.95rem;
    text-align: center;
    color: var(--gamer-text-muted);
}

.match-timeline .mtl-corps {
    min-width: 0;
}

.match-timeline .mtl-titre {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gamer-text);
}

.match-timeline .mtl-texte {
    margin: 0.1rem 0 0;
    font-size: 0.86rem;
    line-height: 1.35;
    color: var(--gamer-text-muted);
}

.match-timeline .mtl-vide {
    margin: 0;
    padding: 1.2rem 0.8rem;
    text-align: center;
    color: var(--gamer-text-muted);
}

/* Tons par type d'événement — le titre et l'icône seulement : le camp, lui, est
   dit par la bande et le fond de la ligne (voir plus bas). */
.mtl-ton-but .mtl-titre,
.mtl-ton-but .mtl-icone {
    color: var(--gamer-red);
}

.mtl-ton-but .mtl-icone {
    font-size: 1.15rem;
}

.mtl-ton-jaune .mtl-titre,
.mtl-ton-jaune .mtl-icone {
    color: var(--gamer-yellow);
}


.mtl-ton-rouge .mtl-titre,
.mtl-ton-rouge .mtl-icone {
    color: var(--gamer-red);
}


.mtl-ton-changement .mtl-titre,
.mtl-ton-changement .mtl-icone {
    color: var(--gamer-green);
}


.mtl-ton-blessure .mtl-titre,
.mtl-ton-blessure .mtl-icone {
    color: #fb923c;
}


.mtl-ton-parade .mtl-titre,
.mtl-ton-parade .mtl-icone {
    color: var(--gamer-cyan);
}


.mtl-ton-jalon .mtl-titre,
.mtl-ton-jalon .mtl-icone {
    color: var(--gamer-cyan);
}

/*
 * Camp de l'action, porté par toute la ligne.
 *
 * La pastille du rail seule ne suffisait pas : sept pixels de couleur, sur un
 * fil surtout fait de faits de jeu (« Untel récupère le ballon », qui ne nomme
 * aucune équipe), et l'appartenance se devinait plus qu'elle ne se lisait. La
 * ligne entière la porte maintenant — une bande verticale à son bord gauche et
 * un fond dégradé qui s'efface avant le texte —, la pastille venant confirmer.
 *
 * L'écusson du club a été essayé à la place de la pastille : à cette taille,
 * un logo n'est plus lisible, il ne restait qu'une vignette brouillonne.
 *
 * Teintes pâles, empruntées aux dispositifs du bandeau, et non les rouges et
 * verts saturés des tons : un rouge vif ici se lirait comme un but à chaque
 * action de l'équipe extérieure.
 */
.mtl-cote-dom {
    --mtl-camp: #93c5fd;
    --mtl-camp-fond: rgba(147, 197, 253, 0.12);
}

.mtl-cote-ext {
    --mtl-camp: #fca5a5;
    --mtl-camp-fond: rgba(252, 165, 165, 0.12);
}

.match-timeline .mtl-cote-dom,
.match-timeline .mtl-cote-ext {
    background: linear-gradient(90deg, var(--mtl-camp-fond), transparent 65%);
    box-shadow: inset 0.18rem 0 0 0 var(--mtl-camp);
}

.mtl-cote-dom .mtl-dot,
.mtl-cote-ext .mtl-dot {
    background: var(--mtl-camp);
}

/* Coup d'envoi, mi-temps, fin de match : ni l'un ni l'autre camp. Gris et sans
   bande, ils servent de repères de chapitre dans le fil. */
.mtl-cote-neutre .mtl-dot {
    background: var(--mp-rail);
}

/* Les faits de jeu sont le bruit de fond du match : présents, pas bruyants. */
.mtl-ton-discret .mtl-min,
.mtl-ton-discret .mtl-icone {
    color: rgba(148, 163, 184, 0.75);
}

.mtl-ton-discret .mtl-titre {
    font-weight: 700;
    color: var(--gamer-text-muted);
}

.mtl-ton-discret .mtl-icone {
    font-size: 0.45rem;
    padding-top: 0.45rem;
}

/* --------------------------------------------------------------------------
   STATISTIQUES
   -------------------------------------------------------------------------- */

.match-stats .ms-entete {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.match-stats .ms-entete .ms-equipe {
    color: #93c5fd;
}

.match-stats .ms-entete .ms-equipe-ext {
    color: #fca5a5;
    text-align: right;
}

.match-stats .ms-ligne {
    display: grid;
    grid-template-columns: 2.2rem 1fr 2.2rem;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.4rem 0;
}

.match-stats .ms-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gamer-text-muted);
}

.match-stats .ms-val.is-max {
    color: #fff;
}

.match-stats .ms-val-ext {
    text-align: right;
}

.match-stats .ms-libelle {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gamer-text-muted);
}

.match-stats .ms-jauge {
    grid-column: 1 / -1;
    display: flex;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}

.match-stats .ms-part-dom {
    background: var(--mp-dom);
}

.match-stats .ms-part-ext {
    background: var(--mp-ext);
}

.match-stats .ms-ligne.is-vide .ms-part-dom,
.match-stats .ms-ligne.is-vide .ms-part-ext {
    background: rgba(148, 163, 184, 0.25);
}

/* --------------------------------------------------------------------------
   COMPOSITION EN LISTE (onglet Équipe)
   -------------------------------------------------------------------------- */

.match-compo-liste {
    display: grid;
    gap: 1.2rem;
}

/* Feuille par équipe : le sélecteur en tête n'affiche qu'un bloc à la fois,
   l'icône de terrain les montrant tous les deux. */
.match-compo-liste[data-vue="1"] .mc-bloc[data-equipe="2"],
.match-compo-liste[data-vue="2"] .mc-bloc[data-equipe="1"] {
    display: none;
}

.match-compo-liste .mc-ligne {
    margin: 0.75rem 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gamer-text-muted);
}

.match-compo-liste .mc-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.match-compo-liste .mc-joueur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

/* Le nom est le bouton : toute la ligne est cliquable, sans qu'un lien vienne
   se distinguer du texte par une couleur de plus. */
.match-compo-liste .mc-nom {
    flex: 1;
    padding: 0.45rem 0;
    border: 0;
    background: none;
    color: var(--gamer-text);
    font-size: 0.9rem;
    text-align: left;
}

.match-compo-liste .mc-nom:hover {
    color: var(--gamer-cyan);
}

.match-compo-liste .mc-joueur.is-banc .mc-nom {
    color: var(--gamer-text-muted);
}

.match-compo-liste .mc-marques {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Note de fin de match : c'est la colonne de droite du tableau de résultats,
   d'où une largeur fixe qui aligne toutes les lignes. */
.match-compo-liste .mc-note {
    flex-shrink: 0;
    min-width: 2.6rem;
    margin-left: 0.4rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.4rem;
    background: rgba(148, 163, 184, 0.18);
    color: var(--gamer-text);
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.match-compo-liste .mc-note.is-homme {
    background: #f0b429;
    color: #1a1a1a;
}

.match-compo-liste .mc-marque {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.78rem;
    color: var(--gamer-text-muted);
}

.match-compo-liste .mc-marque b {
    font-size: 0.7rem;
    font-weight: 700;
}

.match-compo-liste .mc-marque.is-but {
    color: var(--gamer-text);
}

/* Passe décisive : la chaussure, plus discrète que le ballon du buteur — sur
   une même action les deux marques se lisent alors sans se confondre. */
.match-compo-liste .mc-marque.is-passe {
    color: var(--gamer-cyan);
}

/* Emoji chaussure de foot : cale sa taille sur celle des icônes FontAwesome
   voisines pour ne pas déformer la ligne de marques. */
.match-compo-liste .mc-marque .mc-emoji {
    font-size: 0.82rem;
    line-height: 1;
    font-style: normal;
}

/* Mention accolée à une marque, « (Pen) » aujourd'hui : elle précise le but
   sans lui voler la vedette. */
.match-compo-liste .mc-marque .mc-mention {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gamer-text-muted);
}

.match-compo-liste .mc-marque.is-jaune {
    color: var(--gamer-yellow);
}

.match-compo-liste .mc-marque.is-rouge {
    color: var(--gamer-red);
}

.match-compo-liste .mc-marque.is-blesse {
    color: #fb923c;
}

.match-compo-liste .mc-marque.is-entre {
    color: var(--gamer-green);
}

.match-compo-liste .mc-marque.is-sorti {
    color: var(--gamer-red);
}

.match-compo-liste .mc-vide {
    margin: 0;
    color: var(--gamer-text-muted);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   COMPOSITIONS — sélecteur d'équipe et cadrage du terrain
   --------------------------------------------------------------------------
   Le terrain est unique et porte les deux équipes : l'équipe 1 occupe la
   moitié haute, l'équipe 2 la moitié basse. Sur mobile, 22 cartes sur un même
   écran sont illisibles ; on double donc la hauteur du terrain et on n'en
   montre qu'une moitié à la fois, sans jamais déformer les cartes.
   -------------------------------------------------------------------------- */

.compo-equipes[hidden] {
    display: none;
}

.compo-equipes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.compo-equipes .ce-bouton {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--gamer-border);
    border-radius: 0.7rem;
    background: var(--mp-surface);
    color: var(--gamer-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.compo-equipes .ce-bouton img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Le libellé « Les deux » cède la place à un terrain stylisé : la barre ne
   mélange plus une étiquette de texte et deux identités de club. */
.compo-equipes .ce-bouton-terrain {
    flex: 0 0 auto;
    padding: 0.35rem 0.9rem;
}

.compo-equipes .ce-terrain-icone {
    width: 34px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.compo-equipes .ce-bouton-terrain.is-active .ce-terrain-icone {
    stroke: var(--gamer-cyan);
}

/* Un nom de club long tenait sur trois lignes et faisait grandir toute la barre,
   juste au-dessus du terrain. Il se coupe désormais. */
.compo-equipes .ce-bouton span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.compo-equipes .ce-bouton[data-equipe="1"].is-active {
    border-color: var(--mp-dom);
    background: rgba(37, 99, 235, 0.18);
    color: #fff;
}

.compo-equipes .ce-bouton[data-equipe="2"].is-active {
    border-color: var(--mp-ext);
    background: rgba(220, 38, 38, 0.18);
    color: #fff;
}

.compo-equipes .ce-bouton[data-equipe="0"].is-active {
    border-color: var(--gamer-cyan);
    background: rgba(6, 182, 212, 0.15);
    color: #fff;
}

.compo-cadre {
    overflow: hidden;
    border-radius: 0.8rem;
    /* Échelle des vignettes de joueurs, lue par le style en ligne des cartes
       (feuillematch_common.php). Le mobile la relève : voir plus bas. */
    --mp-carte: 0.85;
}

/* Vue « une seule équipe » : la bande visible et le décalage du terrain sont
   calculés par js/match-ux.js, qui seul connaît le facteur de zoom en cours.
   Ne reste ici que le masquage de l'équipe qu'on ne regarde pas. */
.compo-cadre[data-vue="1"] .match-player-card[data-cote="2"],
.compo-cadre[data-vue="2"] .match-player-card[data-cote="1"] {
    display: none;
}

/*
 * Sur téléphone, le terrain sort des marges de la page : c'est la seule zone
 * dont la lisibilité dépend directement de la largeur — 15px de gouttière en
 * moins, ce sont des cartes de joueurs 4% plus grandes. Le calc() se passe de
 * connaître le rembourrage des conteneurs au-dessus, qui diffère entre l'espace
 * connecté et la vue publique.
 */
@media (max-width: 991.98px) {
    #pane-compo .match-bloc {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    /*
     * Vignettes plus grandes sur téléphone. Les deux réglages vont ensemble :
     * à la hauteur d'origine, une carte occupe déjà tout l'interligne, si bien
     * qu'agrandir sans écarter les lignes les ferait se chevaucher. Le terrain
     * s'allonge donc, ce qui écarte les quatre lignes, et la vignette grandit
     * jusqu'à effleurer sa voisine de gauche — la largeur est ici la contrainte,
     * les colonnes étant distantes de 20% du terrain.
     *
     * L'écran n'y perd rien : en vue « une seule équipe » on affichait 306px de
     * terrain sur les 812px d'un téléphone. La hauteur est réglée juste assez
     * haut pour que les quatre lignes ne se touchent pas — au-delà, on rouvrirait
     * les trous que la refonte cherche à fermer.
     */
    .compo-cadre {
        --mp-carte: 1.1;
    }

    .compo-cadre #terrain-match {
        height: 1150px;
    }
}

/* --------------------------------------------------------------------------
   PC — les sections se lisent côte à côte
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .match-hero {
        padding: 1rem 1.5rem 1.25rem;
    }

    .match-hero .mh-logo {
        width: 96px;
        height: 96px;
    }

    .match-hero .mh-nom {
        font-size: 1.05rem;
    }

    .match-hero .mh-valeur {
        font-size: 3.4rem;
    }

    .match-hero .mh-statut {
        font-size: 1.2rem;
    }

    .match-onglets .mo-onglet {
        flex-direction: row;
        gap: 0.45rem;
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
    }

    /* Résumé : les faits marquants à gauche, l'édito et le contexte à droite —
       deux lectures complémentaires que le mobile empile faute de place. */
    .match-pane-deux-colonnes.is-active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    /* Le fil est long : on le laisse défiler seul plutôt que d'entraîner toute
       la page, pour que le terrain reste visible à côté. */
    .match-pane .match-timeline .mtl-liste {
        max-height: 70vh;
        overflow-y: auto;
    }

    .match-compo-liste {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .compo-equipes {
        max-width: 480px;
        margin-inline: auto;
    }

    /* Une barre de statistiques ou une ligne de commentaire étirée sur 1100px
       ne se lit plus : au-delà, on borne la colonne au lieu de l'étaler. */
    #pane-stats .match-bloc,
    #pane-commentaires .match-bloc {
        max-width: 860px;
        margin-inline: auto;
    }
}

/* --------------------------------------------------------------------------
   RÉSUMÉ — colonne de droite (édito, pastilles, infos pratiques)
   -------------------------------------------------------------------------- */

.match-resume-cote>.match-chip,
.match-resume-cote .match-actions-row {
    margin-bottom: 0.9rem;
}

.match-infos p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--gamer-text-muted);
}

.match-infos p:last-child {
    margin-bottom: 0;
}

.match-infos i {
    width: 1rem;
    text-align: center;
    color: var(--gamer-cyan);
}

.match-chip .mc-compteur {
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   STATS — buteurs et passeurs
   -------------------------------------------------------------------------- */

.match-stats .ms-marqueurs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.match-stats .ms-marqueurs h4 {
    margin: 0 0 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gamer-text-muted);
}

.match-stats .ms-colonne-ext {
    text-align: right;
}

.match-stats .ms-buteurs {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--gamer-text);
}

.match-stats .ms-buteurs li {
    margin-bottom: 0.15rem;
}

.match-stats .ms-min {
    color: var(--gamer-cyan);
    font-weight: 700;
}

/* Le passeur se lit comme une note de bas de ligne, pas comme un second buteur. */
.match-stats .ms-passeur {
    color: var(--gamer-text-muted);
    font-size: 0.78rem;
}

.match-stats .ms-passeur::before {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.25rem;
    opacity: 0.6;
}

.match-stats .ms-aucun {
    margin: 0;
    font-size: 0.82rem;
    color: var(--gamer-text-muted);
}

/* --------------------------------------------------------------------------
   MATCH À VENIR
   -------------------------------------------------------------------------- */

.match-avenir {
    margin: 0.75rem 0;
}

.match-avenir:empty {
    display: none;
}

/* Le coach de l'équipe affichée disparaît sur la vue « les deux » (.mb-coach
   :empty) : le titre n'a plus qu'un enfant, et space-between colle alors le
   bouton de coaching à gauche. Cette marge automatique le tient à droite quoi
   qu'il reste dans l'en-tête. */
.match-bloc>.mb-titre>.coach-ouvrir {
    margin-left: auto;
}

/* Bouton d'ouverture du coaching, dans l'en-tête du bloc Terrain.
   C'est la seule action de la page pour un entraîneur pendant son match : il
   est plein et lumineux là où le reste de l'en-tête est sobre. Il n'apparaît
   qu'aux deux entraîneurs de la rencontre. */
.coach-ouvrir {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-height: 34px;
    padding: 0.25rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gamer-cyan), #0e7490);
    color: #03202a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Halo respirant : sur un match en cours, c'est le bouton qu'on cherche.
       Il pulse lentement, assez pour attraper l'œil sans faire clignoter la
       page. Le mouvement s'arrête au survol, quand la limite est atteinte, et
       pour qui a demandé moins d'animations. */
    animation: coach-halo 2.6s ease-in-out infinite;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@keyframes coach-halo {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.55), 0 0 12px rgba(6, 182, 212, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.9), 0 0 26px rgba(6, 182, 212, 0.85), 0 4px 14px rgba(0, 0, 0, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .coach-ouvrir {
        animation: none;
        box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.7), 0 0 18px rgba(6, 182, 212, 0.6);
    }
}

.coach-ouvrir i {
    font-size: 0.9rem;
}

.coach-ouvrir:hover:not(:disabled),
.coach-ouvrir:focus-visible {
    /* Le doigt est dessus : le halo n'a plus rien à signaler, il se fige. */
    animation: none;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.9), 0 0 26px rgba(6, 182, 212, 0.9);
    color: #03202a;
}

.coach-ouvrir:active:not(:disabled) {
    transform: translateY(0);
}

/* Limite de coachings atteinte, ou forfait : le bouton reste à sa place pour
   que le titre ne se réorganise pas, mais cesse d'appeler le regard. */
.coach-ouvrir:disabled {
    animation: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--gamer-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* ==========================================================================
   COACHING EN DIRECT — interface tactile
   --------------------------------------------------------------------------
   Une chose à la fois : une barre d'état en haut, et une feuille d'actions qui
   ne parle que du joueur touché. Le banc et la liste des dispositifs n'occupent
   l'écran que le temps d'un choix.
   ========================================================================== */

#coaching-ui-wrapper[hidden] {
    display: none;
}

/* La barre vit juste au-dessus du terrain, à la place du sélecteur d'équipe.
   Elle se colle sous les onglets seulement quand on descend dans la moitié
   basse du terrain, pour que Valider reste à portée. */
.coach-bar[hidden] {
    display: none;
}

.coach-bar {
    position: sticky;
    top: var(--mp-onglets-top, 0px);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--gamer-cyan);
    border-radius: 0.8rem;
    background: rgba(8, 47, 58, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.coach-bar .cb-etat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    font-size: 0.72rem;
    color: var(--gamer-text-muted);
}

.coach-bar .cb-pastille {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gamer-cyan);
}

.coach-bar .cb-compteur b {
    font-size: 0.9rem;
    color: #fff;
}

.coach-bar .cb-actions {
    display: flex;
    gap: 0.35rem;
}

/* Des cibles au pouce : 44px de haut, pas les 24px de l'ancienne barre. */
.coach-bar .cb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--gamer-border);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--gamer-text);
    font-size: 0.78rem;
    font-weight: 700;
}

.coach-bar .cb-btn.is-annuler {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.coach-bar .cb-btn.is-valider {
    border-color: var(--gamer-green);
    background: var(--gamer-green);
    color: #04231a;
}

/* Sur écran étroit, les libellés des trois boutons ne tiennent pas ensemble. */
@media (max-width: 575.98px) {
    .coach-bar .cb-btn span {
        display: none;
    }

    .coach-bar .cb-btn {
        min-width: 44px;
        justify-content: center;
    }
}

/* Bandeau d'attente pendant une permutation. */
.coach-hint {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    padding-bottom: calc(0.7rem + var(--safe-area-bottom, 0px));
    background: var(--gamer-cyan);
    color: #04222b;
    font-size: 0.85rem;
    font-weight: 700;
}

.coach-hint[hidden] {
    display: none;
}

.coach-hint button {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0.2rem 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 0.5rem;
    background: transparent;
    color: #04222b;
    font-weight: 700;
}

/* --- Feuille d'actions --- */

.coach-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1102;
    max-height: 72vh;
    overflow-y: auto;
    border-top: 1px solid var(--gamer-cyan);
    border-radius: 1rem 1rem 0 0;
    background: rgba(9, 15, 28, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
    padding-bottom: calc(0.8rem + var(--safe-area-bottom, 0px));
}

.coach-sheet[hidden] {
    display: none;
}

.coach-sheet .cs-entete {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem 0.5rem;
    background: inherit;
}

.coach-sheet .cs-nom {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
}

.coach-sheet .cs-fermer {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gamer-text-muted);
}

.coach-sheet .cs-corps {
    padding: 0 0.9rem;
}

.coach-sheet .cs-boutons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.coach-sheet .cs-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 62px;
    border: 1px solid var(--gamer-border);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--gamer-text);
    font-size: 0.78rem;
    font-weight: 700;
}

.coach-sheet .cs-action i {
    font-size: 1.1rem;
    color: var(--gamer-cyan);
}

.coach-sheet .cs-groupe {
    margin-top: 0.9rem;
}

.coach-sheet .cs-groupe h4 {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gamer-text-muted);
}

.coach-sheet .cs-choix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.coach-sheet .cs-choix button {
    min-height: 44px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--gamer-border);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--gamer-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.coach-sheet .cs-choix button.is-active {
    border-color: var(--gamer-cyan);
    background: rgba(6, 182, 212, 0.2);
    color: #fff;
}

.coach-sheet .cs-consigne-texte {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--gamer-text-muted);
}

/* Le banc : des cartes de joueurs, en grille plutôt qu'en bande à faire défiler
   — on choisit un remplaçant en le voyant, pas en le cherchant. */
.coach-sheet .cs-banc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 0.5rem;
    justify-items: center;
}

/* Reprises des styles de l'ancienne barre de coaching : la carte de remplaçant
   n'a pas de dimensions propres, elle les tenait de là. */
.coach-sheet .cs-banc .bench-card {
    position: relative;
    width: 115px;
    height: 120px;
    flex-shrink: 0;
    cursor: pointer;
}

.bench-card .carte_bleue,
.bench-card .carte_verte,
.bench-card .carte_rouge,
.bench-card .carte_bleue_claire {
    /* Annule la marge négative que ces cartes portent sur le terrain. */
    margin-left: 0 !important;
}

.player-out {
    opacity: 0.5;
    filter: grayscale(100%);
}

.coach-sheet .cs-dispositifs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.4rem;
}

.coach-sheet .cs-dispositifs button {
    min-height: 44px;
    border: 1px solid var(--gamer-border);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--gamer-text);
    font-size: 0.85rem;
    font-weight: 700;
}

.coaching-busy {
    opacity: 0.7;
    pointer-events: none !important;
}

.coaching-busy * {
    pointer-events: none !important;
}

@media (min-width: 992px) {
    .coach-sheet {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        width: 380px;
        max-height: 70vh;
        border: 1px solid var(--gamer-cyan);
        border-radius: 1rem;
    }
}

/* En-tête des onglets Composition et Équipe : le coach et le dispositif de
   l'équipe affichée, à la place de l'ancien intitulé « Vue terrain ». */
.match-bloc .mb-titre .mb-coach {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gamer-text);
}

.match-bloc .mb-titre .mb-coach:empty {
    display: none;
}

.match-bloc .mb-titre .mb-coach::before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--gamer-cyan);
}