/* =========================================================================
   clubpanel.css — Fiche club (popup centrée)
   ========================================================================= */
.cp-backdrop{
  position:fixed; inset:0; z-index:95;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(3,6,18,.66);
}
.cp-backdrop[hidden]{ display:none !important; }
html.cp-open{ overflow:hidden; }

.cp-panel{
  --cp-bg:#0d1426; --cp-line:rgba(255,255,255,.08); --cp-text:#e6eaf5; --cp-muted:#9aa3c4;
  position:relative; box-sizing:border-box;
  width:min(480px,100%); max-height:min(88vh,860px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--cp-bg); color:var(--cp-text);
  border:1px solid var(--cp-line); border-top:3px solid #f5b50a; border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.4;
  animation:cpIn .22s ease-out;
}
.cp-panel:focus{ outline:none; }
.cp-panel *{ box-sizing:border-box; }
@keyframes cpIn{ from{ transform:translateY(10px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- en-tête : ballon étoilé de la Ligue des Champions ---------- */
.cp-head{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  padding:22px 20px 20px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(59,123,255,.30) 0%, rgba(59,123,255,.08) 45%, transparent 70%),
    linear-gradient(160deg, #13235a 0%, #0f1a3d 55%, #0d1426 100%);
  border-bottom:1px solid var(--cp-line);
}
/* Le ballon : grand, à moitié hors champ en haut à droite, très lente rotation.
   Décor seulement (pointer-events:none), derrière le texte (z-index:-1). */
.cp-head::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:-150px; right:-150px; width:360px; height:360px;
  background:url("starball.svg?v=2") center/contain no-repeat;
  opacity:.42; mix-blend-mode:screen;
  animation:cpBallSpin 120s linear infinite;
}
@keyframes cpBallSpin{ to{ transform:rotate(360deg); } }
/* Fondu vers le bas : le texte de gauche reste sur un fond sombre et lisible. */
.cp-head::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(13,20,38,.55) 0%, rgba(13,20,38,0) 60%);
}
.cp-crest{ width:58px; height:58px; flex:none; object-fit:contain; border-radius:50%; background:rgba(255,255,255,.06); padding:4px; }
.cp-crest-ph{ display:inline-block; }
.cp-htxt{ flex:1; min-width:0; }
.cp-fav{ display:inline-block; margin-bottom:6px; padding:3px 10px; border-radius:999px; background:#f5b50a; color:#1a1300;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cp-name{ margin:0; font-size:22px; font-weight:800; color:#fff; line-height:1.15; }
.cp-sub{ margin-top:4px; font-size:13px; color:var(--cp-muted); }
.cp-zone{ display:inline-block; margin-top:8px; padding:2px 9px; border-radius:6px; font-size:11.5px; font-weight:700; border:1px solid; }
.cp-zone.z-q{ color:#4ade80; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.08); }
.cp-zone.z-po{ color:#7cc4ff; border-color:rgba(124,196,255,.35); background:rgba(124,196,255,.08); }
.cp-zone.z-out{ color:#ff8a95; border-color:rgba(255,138,149,.35); background:rgba(255,138,149,.08); }
/* Fond sombre propre : la croix reste lisible même posée sur une étoile du ballon. */
.cp-close{ flex:none; width:36px; height:36px; border:1px solid rgba(255,255,255,.14); border-radius:50%;
  background:rgba(8,13,30,.72); color:#e6eaf5; font-size:24px; line-height:1; cursor:pointer; }
.cp-close:hover{ background:rgba(8,13,30,.9); color:#fff; border-color:rgba(255,255,255,.3); }
.cp-close:focus-visible, .cp-panel a:focus-visible{ outline:2px solid #f5b50a; outline-offset:2px; }

/* ---------- match en cours ---------- */
.cp-live{ margin:16px 20px 0; padding:14px 16px; border-radius:14px;
  border:1px solid rgba(255,59,70,.38); background:linear-gradient(135deg, rgba(255,59,70,.16), rgba(255,59,70,.04)); }
.cp-live-top{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.cp-live-pill{ display:inline-flex; align-items:center; gap:7px; color:#ff8a95; }
.cp-live-pill i{ width:8px; height:8px; border-radius:50%; background:#ff3b46; animation:cpPulse 1.4s ease-in-out infinite; }
.cp-live-clock{ color:#fff; font-size:13px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.cp-live-score{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:12px; }
.cp-lv-logo{ width:30px; height:30px; object-fit:contain; }
.cp-lv-name{ font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cp-lv-name.r{ text-align:right; }
.cp-lv-num{ font-size:30px; font-weight:800; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.cp-lv-num.bump{ animation:cpBump .9s ease-out; }
@keyframes cpBump{ 0%{ transform:scale(1.4); color:#ffd166; } 100%{ transform:none; color:#fff; } }
.cp-lv-sep{ color:var(--cp-muted); font-size:22px; }
.cp-live-meta{ margin-top:10px; font-size:12.5px; color:#c9cfe3; }
/* annonces pour lecteurs d'écran : invisibles à l'écran */
.cp-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- sections ---------- */
.cp-sec{ padding:20px; border-bottom:1px solid var(--cp-line); }
.cp-sec:last-child{ border-bottom:0; }
.cp-sec h3{ margin:0 0 14px; font-size:16px; font-weight:800; color:#fff; }
.cp-sec-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.cp-sec-head h3{ margin:0; }
.cp-tally{ text-align:right; font-size:12.5px; color:var(--cp-muted); line-height:1.5; }
.cp-tally b{ font-weight:800; }
.cp-tally b.w{ color:#34d399; } .cp-tally b.d{ color:#cbd5e1; } .cp-tally b.l{ color:#f87171; }
.cp-count{ display:inline-block; margin-left:4px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.08); font-size:11.5px; color:var(--cp-muted); vertical-align:2px; }

/* badges V / N / D : texte blanc sur aplat, contraste ≥ 4,7:1 */
.cp-badge{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
  border-radius:7px; font-size:13px; font-weight:800; color:#fff; }
.cp-badge.w{ background:#15803d; } .cp-badge.d{ background:#64748b; } .cp-badge.l{ background:#b91c1c; }
.cp-badge.live{ background:rgba(255,59,70,.16); }
.cp-badge.live i{ width:9px; height:9px; border-radius:50%; background:#ff3b46; animation:cpPulse 1.4s ease-in-out infinite; }
@keyframes cpPulse{ 50%{ opacity:.3; } }

.cp-form{ display:flex; gap:8px; }
.cp-form .cp-badge{ width:34px; height:34px; }
.cp-legend{ margin:8px 0 6px; font-size:12px; color:var(--cp-muted); }

/* ---------- liste des matchs ---------- */
.cp-list{ list-style:none; margin:10px 0 0; padding:0; }
.cp-match{ display:flex; align-items:center; gap:12px; padding:12px 10px; margin:0 -10px; border-radius:10px; }
.cp-match + .cp-match{ border-top:1px solid var(--cp-line); }
.cp-match.is-live{ background:rgba(99,102,241,.14); box-shadow:inset 3px 0 0 #818cf8; border-top-color:transparent; }
.cp-match.is-live + .cp-match{ border-top-color:transparent; }
.cp-mid{ flex:1; min-width:0; }
.cp-opp{ display:flex; align-items:center; gap:7px; min-width:0; }
.cp-prep{ font-size:13px; color:var(--cp-muted); flex:none; }
.cp-ologo{ width:20px; height:20px; object-fit:contain; flex:none; }
.cp-oname{ font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cp-meta{ margin-top:3px; font-size:12.5px; color:var(--cp-muted); }
.cp-score{ flex:none; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.cp-score.w{ color:#34d399; } .cp-score.d{ color:#cbd5e1; } .cp-score.l{ color:#f87171; } .cp-score.live{ color:#ff8a95; }
.cp-empty{ margin:6px 0 0; color:var(--cp-muted); font-size:13.5px; }

/* ---------- objectifs (seuils des saisons précédentes) ---------- */
.cp-obj + .cp-obj{ margin-top:14px; }
.cp-obj-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; font-weight:700; }
.cp-obj-head b{ font-variant-numeric:tabular-nums; color:#fff; }
.cp-bar{ height:8px; margin-top:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.cp-bar i{ display:block; height:100%; border-radius:999px; }
.cp-obj.o-q .cp-bar i{ background:#f5b50a; }
.cp-obj.o-po .cp-bar i{ background:#7cc4ff; }
.cp-obj.is-reached .cp-bar i{ background:#34d399; }
.cp-obj.is-out .cp-bar i{ background:#f87171; }
.cp-obj-txt{ margin:6px 0 0; font-size:12.5px; color:var(--cp-muted); }
.cp-obj.is-reached .cp-obj-txt{ color:#34d399; }
.cp-obj.is-out .cp-obj-txt{ color:#f87171; }
.cp-obj-note{ color:var(--cp-muted); }
.cp-obj + .cp-legend{ margin-top:12px; }

/* ---------- prochain match ---------- */
.cp-next{ padding:16px; border-radius:14px; border:1px solid rgba(129,140,248,.35);
  background:linear-gradient(135deg, rgba(79,70,229,.28), rgba(30,58,138,.22)); }
.cp-next-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#c7d2fe; }
.cp-cd{ padding:3px 9px; border-radius:999px; background:#f5b50a; color:#1a1300; letter-spacing:.02em; }
.cp-next-main{ display:flex; align-items:center; gap:14px; }
.cp-nlogo{ width:46px; height:46px; object-fit:contain; flex:none; }
.cp-next-opp{ font-size:18px; font-weight:800; color:#fff; }
.cp-next-when{ margin-top:3px; font-size:13px; color:#c7d2fe; }

/* ---------- calendrier restant ---------- */
.cp-fix{ list-style:none; margin:0; padding:0; }
.cp-fix li{ display:flex; align-items:center; gap:8px; padding:9px 0; font-size:13.5px; }
.cp-fix li + li{ border-top:1px solid var(--cp-line); }
.cp-md{ flex:none; min-width:34px; font-size:12px; font-weight:800; color:#f5b50a; }
.cp-fdate{ margin-left:auto; flex:none; color:var(--cp-muted); font-size:12.5px; }

/* ---------- lignes cliquables du classement ---------- */
.standings tbody tr.cp-row{ cursor:pointer; }
.standings tbody tr.cp-row:hover td{ background:rgba(255,255,255,.035); }
.standings tbody tr.cp-row:focus-visible{ outline:2px solid #f5b50a; outline-offset:-2px; }

/* ---------- mobile : la popup garde une marge autour d'elle ---------- */
@media (max-width:640px){
  .cp-backdrop{ padding:12px; }
  .cp-panel{ max-height:calc(100vh - 24px); border-radius:16px; }
  .cp-head{ padding:18px 16px 16px; }
  .cp-head::before{ top:-120px; right:-135px; width:270px; height:270px; opacity:.36; }
  .cp-sec{ padding:16px; }
  .cp-name{ font-size:20px; }
  .cp-live{ margin:14px 16px 0; }
  .cp-lv-num{ font-size:26px; }
  .cp-lv-logo{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  .cp-panel{ animation:none; }
  .cp-head::before{ animation:none; }
  .cp-badge.live i{ animation:none; }
  .cp-live-pill i, .cp-lv-num.bump{ animation:none; }
}
/* Matchs de la fiche : ouvrent la fiche de match (matchpanel.js). */
.cp-panel [data-mp-open]{ cursor:pointer; }
.cp-panel .cp-match[data-mp-open]:hover{ background:rgba(255,255,255,.04); }
.cp-panel [data-mp-open]:focus-visible{ outline:2px solid #f5b50a; outline-offset:-2px; border-radius:10px; }
.cp-cmp{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800;
  color:#e6eaf5; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25); vertical-align:middle; }
.cp-cmp:hover{ border-color:#f5b50a; color:#fff; }
.cp-cmp:focus-visible{ outline:2px solid #f5b50a; outline-offset:2px; }
.cp-chances{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:14px 0 4px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); font-size:13px; }
.cp-chances span{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cp-muted, #9aa3c4); }
.cp-chances b{ color:#fff; font-variant-numeric:tabular-nums; }
.cp-chances small{ flex-basis:100%; font-size:11.5px; color:var(--cp-muted, #9aa3c4); }
.cp-probs{ margin-top:10px; }