/* =========================================================================
   matchpanel.css — Fiche de match (matchpanel.js), trois compétitions
   Couleur d'accent : --gold-rgb de la page (or LDC, orange Europa League,
   vert Conference League, ou couleur du club favori). Au-dessus de la fiche
   club (z-index 95), qui peut l'ouvrir.
   ========================================================================= */
.mp-host{ --mp-acc-rgb:var(--gold-rgb, 245, 181, 10); --mp-acc:rgb(var(--mp-acc-rgb));
  --mp-bg:#0d1426; --mp-line:rgba(255,255,255,.08); --mp-text:#e6eaf5; --mp-muted:#9aa3c4; }
.mp-host[hidden]{ display:none !important; }
.mp-backdrop{ position:fixed; inset:0; z-index:110; background:rgba(3,6,16,.72); }
.mp-panel{ position:fixed; z-index:111; left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px, calc(100vw - 32px)); max-height:min(88vh, 900px);
  overflow-y:auto; overscroll-behavior:contain; background:var(--mp-bg); color:var(--mp-text); border:1px solid var(--mp-line); border-top:3px solid var(--mp-acc);
  border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:mpIn .22s ease-out; }
.mp-panel:focus{ outline:none; }
@keyframes mpIn{ from{ opacity:0; transform:translate(-50%,-47%); } to{ opacity:1; transform:translate(-50%,-50%); } }
html.mp-open{ overflow:hidden; }

/* ---- En-tête : score ---- */
.mp-head{ position:relative; padding:18px 20px 16px; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, rgba(var(--mp-acc-rgb),.18), transparent 65%), linear-gradient(180deg,#121a35,#0d1426);
  border-bottom:1px solid var(--mp-line); }
.mp-comp{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mp-acc); padding:0 40px; }
.mp-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:#0a1024; color:#fff; font-size:21px; line-height:1; cursor:pointer; }
.mp-close:hover{ border-color:var(--mp-acc); }
.mp-close:focus-visible{ outline:2px solid var(--mp-acc); outline-offset:2px; }
.mp-board{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:14px; }
.mp-team{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.mp-crest{ width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.mp-tname{ font-weight:800; font-size:15px; color:#fff; line-height:1.2; overflow-wrap:anywhere; }
.mp-score{ font-family:'Bebas Neue', Impact, sans-serif; font-size:52px; line-height:1; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mp-score.is-live{ color:#ff5d6c; }
.mp-sep, .mp-vs{ opacity:.45; margin:0 6px; }
.mp-pens{ font-family:inherit; font-size:12px; font-weight:800; color:#8fb4ff; letter-spacing:.04em; margin-top:2px; }
.mp-status{ margin-top:8px; font-size:13px; font-weight:700; color:var(--mp-muted); }
.mp-live{ display:inline-flex; align-items:center; gap:7px; color:#ff8a95; font-weight:800; }
.mp-live i{ width:8px; height:8px; border-radius:50%; background:#ff3b46; animation:mpPulse 1.4s ease-in-out infinite; }
@keyframes mpPulse{ 50%{ opacity:.3; } }
.mp-ft{ color:#5fdc97; font-weight:800; }
.mp-ko{ color:var(--mp-acc); font-weight:800; }
.mp-scorers{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; margin-top:12px; font-size:12.5px; color:#c9cfe3; text-align:right; }
.mp-scorers ul{ list-style:none; margin:0; padding:0; }
.mp-scorers ul.r{ text-align:left; }
.mp-scorers li span{ color:var(--mp-muted); font-variant-numeric:tabular-nums; }
.mp-scorers abbr{ text-decoration:none; color:var(--mp-muted); }
.mp-ball{ font-size:12px; opacity:.7; }
.mp-venue{ margin-top:10px; font-size:12px; color:var(--mp-muted); }

/* ---- Onglets ---- */
.mp-tabs{ display:flex; gap:4px; padding:10px 14px 0; border-bottom:1px solid var(--mp-line); overflow-x:auto; position:sticky; top:0; background:var(--mp-bg); z-index:2; }
.mp-tabs button{ flex:none; padding:10px 14px; border:0; border-bottom:3px solid transparent; background:none; color:var(--mp-muted); font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; }
.mp-tabs button:hover{ color:#fff; }
.mp-tabs button.on{ color:#fff; border-bottom-color:var(--mp-acc); }
.mp-tabs button:focus-visible{ outline:2px solid var(--mp-acc); outline-offset:-2px; border-radius:6px; }
.mp-pane{ padding:16px 18px 20px; }
.mp-empty{ margin:8px 0; color:var(--mp-muted); font-size:14px; text-align:center; }

/* ---- Résumé : frise ---- */
.mp-tl{ list-style:none; margin:0; padding:0; }
.mp-tl li{ display:grid; grid-template-columns:52px 30px 1fr; align-items:center; gap:6px; padding:8px 0; border-bottom:1px solid var(--mp-line); font-size:14px; }
.mp-tl li.mp-tl-away{ grid-template-columns:1fr 30px 52px; text-align:right; }
.mp-tl li.mp-tl-away .mp-tl-min{ order:3; text-align:right; }
.mp-tl li.mp-tl-away .mp-tl-ico{ order:2; }
.mp-tl li.mp-tl-away .mp-tl-what{ order:1; align-items:flex-end; }
.mp-tl-min{ font-weight:800; color:var(--mp-muted); font-variant-numeric:tabular-nums; }
.mp-tl-ico{ text-align:center; }
.mp-tl-what{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mp-tl-what small{ font-size:12px; color:var(--mp-muted); }
.mp-tl li.k-goal{ background:rgba(var(--mp-acc-rgb),.08); }
.mp-tl li.k-goal b{ color:#fff; }
.mp-tl-ht{ display:block !important; text-align:center; border-bottom:0 !important; }
.mp-tl-ht span{ display:inline-block; padding:3px 12px; border-radius:999px; background:rgba(255,255,255,.06); font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mp-muted); }
.mp-in{ color:#5fdc97; font-weight:700; }
.mp-out{ color:#ff8a95; font-weight:600; font-size:13px; }

/* ---- Compositions ---- */
.mp-lus{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mp-lu-h{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:#fff; margin-bottom:8px; }
.mp-mini{ width:22px; height:22px; object-fit:contain; }
.mp-form{ margin-left:auto; padding:2px 8px; border-radius:6px; background:rgba(var(--mp-acc-rgb),.14); color:var(--mp-acc); font-size:12px; }
.mp-xi, .mp-bench{ list-style:none; margin:0; padding:0; }
.mp-xi li, .mp-bench li{ display:flex; align-items:center; gap:7px; padding:5px 0; font-size:13px; border-bottom:1px solid var(--mp-line); }
.mp-bench li{ color:var(--mp-muted); }
.mp-num{ min-width:24px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; color:var(--mp-acc); }
.mp-pname{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-pos{ font-size:11px; font-weight:800; color:var(--mp-muted); min-width:20px; text-align:right; }
.mp-mk{ font-size:11px; }
.mp-lu-s{ margin:12px 0 4px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mp-muted); }

/* ---- Statistiques ---- */
.mp-st + .mp-st{ margin-top:12px; }
.mp-st-row{ display:grid; grid-template-columns:60px 1fr 60px; align-items:baseline; font-size:13.5px; }
.mp-st-row span{ text-align:center; color:var(--mp-muted); font-weight:700; }
.mp-st-row b{ font-variant-numeric:tabular-nums; color:#c9cfe3; }
.mp-st-row b:last-child{ text-align:right; }
.mp-st-row b.lead{ color:#fff; }
.mp-bar{ display:flex; gap:3px; height:7px; margin-top:5px; }
.mp-bar i{ display:block; height:100%; border-radius:999px; }
.mp-bar i.h{ background:var(--mp-acc); }
.mp-bar i.a{ background:#6f9bff; }

/* ---- Avant-match ---- */
.mp-box + .mp-box{ margin-top:16px; }
.mp-box-t{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:10px; }
.mp-probs{ display:flex; gap:4px; border-radius:10px; overflow:hidden; --mp-acc-rgb:var(--gold-rgb, 245, 181, 10); --mp-acc:rgb(var(--mp-acc-rgb)); }
.mp-probs > div{ min-width:56px; padding:9px 10px; display:flex; flex-direction:column; gap:2px; }
.mp-probs b{ font-size:17px; color:#0b1020; }
.mp-probs span{ font-size:11.5px; font-weight:700; color:rgba(11,16,32,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-probs .h{ background:var(--mp-acc); }
.mp-probs .d{ background:#c9cfe3; }
.mp-probs .a{ background:#6f9bff; text-align:right; }
/* Version compacte (cartes de match, calendriers, listes) */
.mp-probs.sm{ gap:3px; border-radius:7px; font-size:12px; }
.mp-probs.sm > div{ min-width:0; padding:4px 7px; flex-direction:row; align-items:baseline; gap:5px; overflow:hidden; white-space:nowrap; }
.mp-probs.sm b{ flex:none; }
.mp-probs.sm span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mp-probs.sm .a{ flex-direction:row-reverse; }
.mp-probs.sm b{ font-size:12.5px; }
.mp-probs.sm span{ font-size:10.5px; }
.mp-note{ margin:8px 0 0; font-size:11.5px; color:var(--mp-muted); }
.mp-fcols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mp-fl{ list-style:none; margin:0; padding:0; }
.mp-fl li{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--mp-line); font-size:13px; }
.mp-fl .cp-badge{ width:24px; height:24px; font-size:11px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; font-weight:800; color:#fff; }
.mp-fl .cp-badge.w{ background:#15803d; } .mp-fl .cp-badge.d{ background:#64748b; } .mp-fl .cp-badge.l{ background:#b91c1c; }
.mp-fo{ flex:1; min-width:0; display:flex; flex-direction:column; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-fo small{ font-size:11px; color:var(--mp-muted); overflow:hidden; text-overflow:ellipsis; }
.mp-fl b{ font-variant-numeric:tabular-nums; }

/* Bouton « Fiche du match » posé dans les cartes de match des pages */
.mp-open-btn{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  color:inherit; font:inherit; font-size:11px; font-weight:800; letter-spacing:.04em; cursor:pointer; }
.mp-open-btn:hover{ border-color:rgb(var(--gold-rgb, 245, 181, 10)); color:#fff; }
.mp-open-btn:focus-visible{ outline:2px solid rgb(var(--gold-rgb, 245, 181, 10)); outline-offset:2px; }

@media (max-width:560px){
  .mp-panel{ width:calc(100vw - 16px); max-height:calc(100vh - 16px); border-radius:16px; }
  .mp-crest{ width:46px; height:46px; }
  .mp-score{ font-size:42px; }
  .mp-tname{ font-size:13.5px; }
  .mp-lus, .mp-fcols{ grid-template-columns:1fr; }
  .mp-pane{ padding:14px 14px 18px; }
}
@media (prefers-reduced-motion:reduce){ .mp-panel{ animation:none; } .mp-live i{ animation:none; } }