/* =============================================================================================
   Page « Mes parties » (mes-parties.html, générée par scripts/generer_mes_parties.py).
   Fichier additif, comme style-mon-compte.css : la page charge style-comment-jouer.css pour
   l'en-tête et le conteneur .rules-content, puis cette feuille. Tout est dessiné par
   mes-parties.js. Mise en page validée sur maquettes/mes-parties/index.html, couleurs de la
   charte (CHARTE.md) ; gris des défaites #C9D0C3 comme dans la maquette.
============================================================================================= */

/* Le site ne fixe pas box-sizing : sans ça, les lignes à 100 % de large (boutons des parties,
   des joueurs, des records) débordent de leur carte de la largeur de leur marge intérieure. */
.mes-parties *,
.mp-fiche,
.mp-fiche * {
    box-sizing: border-box;
}

/* Toute la largeur de .rules-content, alignée sur le titre de la page */
.mes-parties {
    display: grid;
    gap: 22px;
}

.mp-sous-titre {
    margin: -8px 0 0;
    font-size: 14px;
    color: #56604F;
}

.mp-mention {
    font-size: 14px;
    color: #56604F;
    margin: 0;
}

.mp-statut {
    font-size: 13.5px;
    margin: 0;
}

.mp-statut:empty {
    display: none;
}

.mp-statut.erreur {
    color: #C62828;
}

.mp-carte {
    background: #fff;
    border: 1px solid #E2E6DE;
    border-radius: 16px;
}

.mp-bloc {
    display: grid;
    gap: 10px;
}

.mp-titre {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    color: #1D2619;
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mp-titre small {
    font-family: 'Figtree', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #56604F;
}

.mp-lien {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #3D7A2A;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.mp-btn {
    display: inline-block;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
}

.mp-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.mp-btn.vert {
    background: #74C15A;
    color: #fff;
}

.mp-btn.vert:hover {
    background: #56A03D;
}

.mp-btn.ligne {
    background: #fff;
    color: #1D2619;
    border: 1px solid #E2E6DE;
}

.mp-btn.ligne:hover {
    border-color: #74C15A;
}

.mp-btn.danger {
    background: #C62828;
    color: #fff;
}

.mes-parties button:focus-visible,
.mes-parties a:focus-visible,
.mp-fiche button:focus-visible,
.mp-fiche a:focus-visible {
    outline: 2px solid #3D7A2A;
    outline-offset: 2px;
}

/* --- Filtres ------------------------------------------------------------------------------ */
.mp-filtres {
    display: grid;
    gap: 8px;
}

.mp-segment {
    display: flex;
    background: #fff;
    border: 1px solid #E2E6DE;
    border-radius: 999px;
    padding: 3px;
}

.mp-segment button {
    flex: 1;
    border: 0;
    background: none;
    color: #56604F;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 6px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.mp-segment button.actif {
    background: #1D2619;
    color: #fff;
}

.mp-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mp-filtre {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E2E6DE;
    color: #1D2619;
    cursor: pointer;
    white-space: nowrap;
}

.mp-filtre:hover {
    border-color: #74C15A;
}

.mp-filtre b {
    margin-left: 4px;
}

.mp-filtre.actif {
    background: #1D2619;
    border-color: #1D2619;
    color: #fff;
}

.mp-filtre-joueur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E7F4E1;
    border-color: #E7F4E1;
}

.mp-filtre-joueur svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.4;
}

/* --- Chiffres clés ------------------------------------------------------------------------ */
.mp-tuiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mp-tuile {
    padding: 12px 14px;
    display: grid;
    gap: 2px;
    align-content: start;
}

.mp-lib {
    font-size: 13px;
    color: #56604F;
}

.mp-val {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: #1D2619;
}

.mp-val small {
    font-size: 15px;
    font-weight: 700;
    color: #56604F;
    margin-left: 4px;
}

.mp-sous {
    font-size: 12.5px;
    color: #56604F;
}

.mp-tuile.grande {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
}

.mp-anneau {
    width: 76px;
    height: 76px;
}

/* --- Avec qui ----------------------------------------------------------------------------- */
.mp-joueurs ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.mp-joueurs li + li {
    border-top: 1px solid #EEF0EC;
}

.mp-ligne-joueur {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 10px 14px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mp-ligne-joueur:hover {
    background: #F7F9F6;
}

.mp-nomj {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-chiffres {
    font-size: 13px;
    color: #56604F;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mp-chiffres b {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #1D2619;
    margin-left: 6px;
}

.mp-jauge {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 3px;
    background: #C9D0C3;
    overflow: hidden;
    display: flex;
}

.mp-jauge span {
    background: #3D7A2A;
}

.mp-vide-petit {
    padding: 12px 14px;
    font-size: 14px;
    color: #56604F;
    margin: 0;
}

/* --- Liste des parties -------------------------------------------------------------------- */
.mp-liste {
    overflow: hidden;
}

.mp-mois {
    padding: 9px 14px;
    background: #F7F9F6;
    border-top: 1px solid #E2E6DE;
    font-size: 12.5px;
    color: #56604F;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.mp-mois:first-child {
    border-top: 0;
}

.mp-mois b {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1D2619;
}

.mp-partie {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    background: none;
    border: 0;
    border-top: 1px solid #EEF0EC;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mp-partie:hover {
    background: #F7F9F6;
}

.mp-res {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.mp-res.v {
    background: #E7F4E1;
    color: #3D7A2A;
}

.mp-res.d {
    background: #EEF0EC;
    color: #56604F;
}

.mp-milieu {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.mp-qui {
    font-weight: 600;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-meta {
    font-size: 12.5px;
    color: #56604F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-sc {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.mp-sc small {
    display: block;
    font-family: 'Figtree', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #7D8676;
}

.mp-fanny {
    display: inline-block;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #F6E6DF;
    color: #B5502E;
    border-radius: 999px;
    padding: 3px 6px;
    margin-left: 4px;
    vertical-align: 2px;
}

.mp-plus {
    display: flex;
    gap: 14px;
    justify-content: center;
    padding: 10px;
    border-top: 1px solid #EEF0EC;
}

.mp-plus button {
    background: none;
    border: 0;
    color: #3D7A2A;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Records ------------------------------------------------------------------------------ */
.mp-records {
    padding: 4px 0;
    overflow: hidden;
}

.mp-record {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 14px;
    align-items: baseline;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
}

button.mp-record {
    cursor: pointer;
}

button.mp-record:hover {
    background: #F7F9F6;
}

.mp-record + .mp-record {
    border-top: 1px solid #EEF0EC;
}

.mp-rec-lib {
    color: #56604F;
    font-size: 14px;
}

.mp-rec-val {
    text-align: right;
    font-weight: 600;
    font-size: 14.5px;
}

.mp-rec-val small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #56604F;
}

/* --- Terrains ----------------------------------------------------------------------------- */
.mp-terrains {
    padding: 4px 0;
}

.mp-terrain {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
}

a.mp-terrain:hover,
button.mp-terrain:hover {
    background: #F7F9F6;
}

button.mp-terrain {
    cursor: pointer;
}

.mp-terrain + .mp-terrain {
    border-top: 1px solid #EEF0EC;
}

.mp-terrain svg {
    width: 18px;
    height: 18px;
    color: #3D7A2A;
}

.mp-terrain small {
    display: block;
    font-size: 12.5px;
    color: #56604F;
}

.mp-nb {
    font-size: 13px;
    color: #56604F;
    white-space: nowrap;
}

.mp-note {
    padding: 8px 14px 12px;
    margin: 0;
    font-size: 12.5px;
    color: #56604F;
}

/* --- Carnet ------------------------------------------------------------------------------- */
.mp-carnet {
    padding: 4px 0;
}

.mp-j {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 0;
}

.mp-j + .mp-j {
    border-top: 1px solid #EEF0EC;
}

.mp-j span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mp-j small {
    color: #56604F;
    font-size: 12.5px;
    margin-left: 6px;
}

.mp-j .mp-lien {
    font-size: 13px;
}

.mp-carnet .mp-statut {
    padding: 0 14px;
}

.mp-j input,
.mp-champ {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 7px 10px;
    border: 1px solid #E2E6DE;
    border-radius: 8px;
    background: #F7F9F6;
    color: #1D2619;
}

.mp-j input:focus,
.mp-champ:focus {
    outline: none;
    border-color: #74C15A;
    background: #fff;
}

/* --- Page vide ---------------------------------------------------------------------------- */
.mp-vide {
    padding: 28px 18px;
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.mp-main {
    font-family: 'Caveat', 'Manrope', Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #3D7A2A;
}

.mp-vide p {
    margin: 0;
    color: #56604F;
    font-size: 14.5px;
    max-width: 34ch;
}

/* --- Graphiques --------------------------------------------------------------------------- */
.mp-graph {
    padding: 12px 12px 8px;
    position: relative;
}

.mp-graph-mois {
    border-top: 1px solid #EEF0EC;
}

.mp-graph svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mp-legende {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #56604F;
    padding: 0 2px 8px;
}

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

.mp-legende i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #3D7A2A;
}

.mp-legende i.d {
    background: #C9D0C3;
}

.mp-legende i.eux {
    background: #B5502E;
}

.mp-bulle {
    position: absolute;
    pointer-events: none;
    background: #1D2619;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.35;
    padding: 7px 10px;
    border-radius: 8px;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 3;
}

.mp-bulle.vu {
    opacity: 1;
}

.mp-axe {
    fill: #56604F;
    font-family: 'Figtree', Arial, sans-serif;
    font-size: 12px;
}

.mp-valeur {
    fill: #1D2619;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

/* --- Fiche d'une partie (panneau du bas sur téléphone, centré sur ordinateur) ------------- */
.mp-voile {
    position: fixed;
    inset: 0;
    background: rgba(29, 38, 25, 0.45);
    z-index: 3000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
}

.mp-voile.ouvert {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s;
}

body.mp-fiche-ouverte {
    overflow: hidden;
}

.mp-fiche {
    width: min(500px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    color: #1D2619;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    display: grid;
    gap: 16px;
}

@media (min-width: 700px) {
    .mp-voile {
        align-items: center;
    }

    .mp-fiche {
        border-radius: 20px;
    }
}

.mp-fiche-tete {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.mp-r {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
}

.mp-r.v {
    color: #3D7A2A;
}

.mp-d {
    font-size: 13.5px;
    color: #56604F;
}

.mp-fermer {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F7F9F6;
    border: 1px solid #E2E6DE;
    color: #1D2619;
    cursor: pointer;
}

.mp-fermer svg {
    width: 16px;
    height: 16px;
}

.mp-equipes-fiche {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.mp-eqf {
    background: #F7F9F6;
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mp-t {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #56604F;
    overflow-wrap: anywhere;
}

.mp-t i {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3D7A2A;
}

.mp-eqf.eux .mp-t i {
    background: #B5502E;
}

.mp-n {
    font-weight: 600;
    font-size: 14.5px;
    overflow-wrap: anywhere;
}

.mp-s {
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mp-contre {
    font-size: 13px;
    color: #56604F;
}

.mp-infos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 0;
}

.mp-infos .large {
    grid-column: 1 / -1;
}

.mp-infos dt {
    font-size: 12.5px;
    color: #56604F;
}

.mp-infos dd {
    margin: 0;
    font-weight: 600;
    font-size: 14.5px;
}

.mp-infos dd a {
    color: #3D7A2A;
    text-underline-offset: 3px;
}

.mp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-confirmer {
    background: #F6E6DF;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 10px;
    font-size: 14px;
}

/* Modifier les équipes, chercher un terrain */
.mp-edition {
    display: grid;
    gap: 14px;
}

.mp-champ-groupe {
    display: grid;
    gap: 6px;
}

.mp-etiquette {
    font-size: 13px;
    font-weight: 700;
    color: #56604F;
}

.mp-vous {
    justify-self: start;
    font-size: 13.5px;
    font-weight: 700;
    color: #3D7A2A;
    background: #E7F4E1;
    border-radius: 999px;
    padding: 5px 12px;
}

.mp-changer {
    justify-self: start;
}

.mp-recherche {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-recherche svg {
    width: 18px;
    height: 18px;
    color: #56604F;
    flex: 0 0 auto;
}

.mp-resultats:empty {
    display: none;
}

.mp-resultats {
    border: 1px solid #E2E6DE;
    border-radius: 12px;
    overflow: hidden;
}