/* ==========================================================================
   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-date {
    color: var(--gamer-text-muted);
}

.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);
}

.match-hero .mh-minute {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--gamer-green);
    color: #04231a;
    font-size: 0.8rem;
}

.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-dispositif {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.match-hero .mh-equipe-dom .mh-dispositif {
    color: #93c5fd;
}

.match-hero .mh-equipe-ext .mh-dispositif {
    color: #fca5a5;
}

.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;
}

.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;
    padding: 0.35rem 0.8rem 0.6rem;
}

/* 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.4rem;
        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;
}

.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 : la pastille du
   rail, elle, dit à quel camp l'action appartient (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 la pastille du rail.
 *
 * Le titre et l'icône disent déjà le type ; la pastille reprenait la même
 * couleur, sans rien apprendre de plus. Elle sert maintenant à distinguer les
 * deux équipes : en descendant le fil, la colonne de pastilles montre d'un coup
 * d'œil qui a tenu quelle période.
 *
 * 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-dot {
    background: #93c5fd;
}

.mtl-cote-ext .mtl-dot {
    background: #fca5a5;
}

/* Coup d'envoi, mi-temps, fin de match : ni l'un ni l'autre camp. Gris, 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;
}

.match-compo-liste .mc-titre {
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--gamer-border);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gamer-text);
}

.match-compo-liste .mc-titre-dom {
    border-bottom-color: var(--mp-dom);
}

.match-compo-liste .mc-titre-ext {
    border-bottom-color: var(--mp-ext);
}

.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;
}

.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);
}

.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;
}

/* 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;
}

/* 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;
    }
}