@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── POP-UP DE CHARGEMENT BLOQUANT (demandé le 21/06/2026) ──
   Plein écran, au-dessus de tout (z-index élevé) : couvre et intercepte donc
   tous les clics sur le reste de la page tant qu'il est affiché, pas besoin
   de logique JS séparée pour "bloquer" — masqué seulement quand le calcul
   se termine (succès ou erreur), jamais par un clic dessus. */
.pronoia-loading-overlay{position:fixed;inset:0;z-index:9999;
  background:rgba(13,17,23,.88);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center}
.pronoia-loading-box{background:var(--s1);border:1px solid var(--bd);border-radius:14px;
  padding:36px 44px;text-align:center;min-width:280px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.pronoia-loading-ball{font-size:42px;display:inline-block;animation:pronoia-ball-roll 1s infinite linear}
@keyframes pronoia-ball-roll{
  0%{transform:translateX(-14px) rotate(0deg)}
  50%{transform:translateX(14px) rotate(180deg)}
  100%{transform:translateX(-14px) rotate(360deg)}
}
.pronoia-loading-title{font-size:14px;font-weight:700;margin-top:16px;color:var(--tx)}
.pronoia-loading-sub{font-size:12px;color:var(--mu);margin-top:6px;min-height:16px}
.pronoia-loading-bar{height:6px;background:var(--s2);border-radius:4px;overflow:hidden;margin-top:16px;width:240px}
.pronoia-loading-fill{height:100%;background:var(--ac);transition:width .3s linear;width:0%}

:root {
  /* Sans ceci, les éléments natifs du navigateur (cases à cocher, etc.)
     gardent leur rendu pensé pour un fond clair et restent quasi invisibles
     une fois non cochés sur ce thème sombre — même famille de bug que la
     transparence du menu déroulant des saisons corrigée le 04/07/2026,
     signalée à nouveau le 11/07/2026 sur les cases à cocher jamais encore
     cochées (ex. 2020/2021, ajoutées cette nuit, jamais sélectionnées avant). */
  color-scheme: dark;
  --bg:#090909;
  --s1:rgba(255,255,255,0.04);
  --s2:rgba(255,255,255,0.07);
  --bd:rgba(255,255,255,0.09);
  --tx:#f2f2f2; --mu:#666; --mu2:#888;
  --ac:#C9A84C; --ac-dim:#a8893c;
  --gr:#4ade80; --am:#fbbf24; --rd:#f87171; --pu:#c084fc;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --r:8px; --r-lg:12px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
select,select option{background:#1a1a1a;color:var(--tx)}
body{font-family:var(--font);background:var(--bg);color:var(--tx);
  line-height:1.6;font-size:14px;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%,rgba(201,168,76,0.07) 0%,transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 100%,rgba(201,168,76,0.04) 0%,transparent 50%);
}
.page,.page-sm{position:relative;z-index:1}

/* ── TOPBAR ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:500;height:52px;
  display:flex;align-items:stretch;
  background:rgba(9,9,9,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.07)}
.topbar-brand{display:flex;align-items:center;padding:0 22px;
  font-size:16px;font-weight:700;letter-spacing:-.04em;color:var(--tx);
  border-right:1px solid var(--bd);text-decoration:none;white-space:nowrap;flex-shrink:0}
.topbar-brand span{color:var(--ac)}
.topbar-nav{display:flex;align-items:stretch;padding:0 8px;gap:0}
.topbar-nav a{display:flex;align-items:center;padding:0 15px;font-size:13px;font-weight:500;
  color:var(--mu);text-decoration:none;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap}
.topbar-nav a:hover{color:var(--tx)}
.topbar-nav a.active{color:var(--ac);border-bottom-color:var(--ac)}

/* ── LAYOUT ── */
.page{max-width:1600px;margin:0 auto;padding:72px 24px 56px}
.page-sm{max-width:960px;margin:0 auto;padding:72px 24px 56px}
.ph{margin-bottom:24px}
.ph h1{font-size:22px;font-weight:700;letter-spacing:-.03em}
.ph p{font-size:13px;color:var(--mu);margin-top:5px}

/* ── TOOLBAR ── */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;
  backdrop-filter:blur(6px)}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:10px;font-weight:600;color:var(--mu);
  text-transform:uppercase;letter-spacing:.07em}
.fld select,.fld input[type="number"],.fld input[type="text"]{
  background:rgba(255,255,255,0.05);color:var(--tx);border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--r);padding:8px 12px;font-size:13px;font-family:var(--font);
  min-width:170px;cursor:pointer;transition:border-color .15s;appearance:none}
.fld select:focus,.fld input:focus{outline:none;border-color:var(--ac)}

/* ── BUTTONS ── */
.btn{padding:8px 18px;border-radius:var(--r);border:1px solid transparent;
  font-size:13px;font-weight:600;font-family:var(--font);
  cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,#d4a84b,#b88a38);color:#0a0800;border:none;
  box-shadow:0 2px 12px rgba(201,168,76,0.25)}
.btn-primary:hover{opacity:.9;box-shadow:0 4px 20px rgba(201,168,76,0.4)}
.btn-primary:disabled{opacity:.4;cursor:wait;box-shadow:none}
.btn-ghost{background:rgba(255,255,255,0.05);color:var(--mu);border:1px solid rgba(255,255,255,0.09)}
.btn-ghost:hover{color:var(--tx);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.14)}
.btn-ghost.active{background:rgba(201,168,76,0.1);color:var(--ac);border-color:rgba(201,168,76,0.3)}

/* ── CARD ── */
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s}
.card:hover{border-color:rgba(255,255,255,0.13)}
.card-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.03)}
.card-title{font-size:14px;font-weight:600}
.card-sub{font-size:12px;color:var(--mu)}
.card-foot{padding:10px 18px;border-top:1px solid var(--bd);
  font-size:11px;color:var(--mu);line-height:1.7}

/* ── TABLE ── */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{padding:9px 12px;font-size:10px;font-weight:600;color:var(--mu);
  text-transform:uppercase;letter-spacing:.07em;text-align:left;
  background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.07);white-space:nowrap}
.data-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,0.03)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--mu)}

/* ── CURSORS ── */
.cursors{display:flex;flex-wrap:wrap;gap:14px;background:var(--s1);
  border:1px solid var(--bd);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px}
.citem{display:flex;flex-direction:column;gap:5px;min-width:130px;flex:1}
.citem label{font-size:10px;font-weight:600;color:var(--mu);
  text-transform:uppercase;letter-spacing:.07em;
  display:flex;justify-content:space-between;align-items:center}
.citem label .cv{color:var(--ac);font-weight:700}
.citem input[type=range]{width:100%;accent-color:var(--ac);cursor:pointer;height:4px}

/* ── STRAT FILTER ── */
.strat-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:9px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-lg);margin-bottom:12px;font-size:12px}
.strat-row .lbl{color:var(--mu);font-weight:600;font-size:11px;margin-right:2px}
.sbtn{padding:4px 12px;border-radius:20px;border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);color:var(--mu);cursor:pointer;font-size:12px;
  font-family:var(--font);transition:all .12s}
.sbtn:hover{color:var(--tx);background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.14)}
.sbtn.active{background:rgba(201,168,76,0.12);color:var(--ac);border-color:rgba(201,168,76,0.3)}

/* ── RATE BAR ── */
.rbar{position:relative;height:20px;background:var(--s2);border-radius:4px;
  overflow:hidden;min-width:80px;display:inline-block;width:90px}
.rfill{position:absolute;left:0;top:0;height:100%;border-radius:4px;opacity:.2}
.rtxt{position:relative;font-size:11px;font-weight:700;padding:0 6px;line-height:20px;z-index:1}

/* ── PILLS ── */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill-gr{background:rgba(63,185,80,.15);color:var(--gr)}
.pill-am{background:rgba(210,153,34,.15);color:var(--am)}
.pill-rd{background:rgba(248,81,73,.15);color:var(--rd)}
.pill-ac{background:rgba(88,166,255,.15);color:var(--ac)}
.pill-or{background:rgba(240,136,62,.15);color:var(--or,#f0883e)}

/* ── LINK PILL ── */
.link-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
  border-radius:6px;background:rgba(88,166,255,.12);color:var(--ac);
  text-decoration:none;font-size:11px;font-weight:600;transition:background .15s}
.link-pill:hover{background:rgba(88,166,255,.22)}

/* ── Lien vers l'explication d'une stratégie (/infos) ── */
.strat-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ac)}
.strat-link:hover{color:var(--ac)}

/* ── STATUS ── */
.status-line{font-size:12px;color:var(--mu);margin-bottom:10px;min-height:18px}

/* ── MATCH LIST ── */
.list-table{width:100%;border-collapse:collapse;font-size:13px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-lg);overflow:hidden}
.list-table th{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;
  padding:9px 10px;text-align:left;background:var(--s2);border-bottom:1px solid var(--bd);
  font-weight:600}
.list-table td{padding:9px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
.list-table tr:hover td{background:rgba(33,38,45,.8);cursor:pointer}
.list-table tr:last-child td{border-bottom:none}
.dc-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.dc-good{background:rgba(63,185,80,.18);color:var(--gr)}
.dc-mid{background:rgba(210,153,34,.18);color:var(--am)}

/* ── MATCH CARD ── */
.match-card{background:var(--s1);border:1px solid var(--bd);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:12px}
.match-card.has-trophy{border-color:rgba(210,153,34,.4)}
.mcard-head{display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:var(--s2);font-size:11px;color:var(--mu);border-bottom:1px solid var(--bd)}
.mcard-head .rd{background:var(--bg);padding:2px 8px;border-radius:5px;font-weight:600}
.mcard-head .dt{margin-left:auto}
.matchup{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;
  gap:10px;padding:16px}
.team{text-align:center}
.team .name{font-size:15px;font-weight:600}
.team .rank{font-size:11px;color:var(--mu);margin-top:2px}
.center{text-align:center}
.center .score{font-size:26px;font-weight:700;letter-spacing:-.02em}
.center .vs{font-size:12px;color:var(--mu)}
.probas{padding:0 14px 12px}
.proba-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}
.proba-row .lbl{width:120px;color:var(--mu);flex-shrink:0}
.bars{flex:1;display:flex;height:22px;border-radius:5px;overflow:hidden;background:var(--s2)}
.bar{display:flex;align-items:center;justify-content:center;font-size:11px;
  font-weight:600;color:#fff;min-width:0}
.bar.b1{background:var(--ac)}.bar.bn{background:#6e7681}.bar.b2{background:var(--rd)}
.mcard-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:8px;padding:0 14px 14px}
.mstat{background:var(--s2);border-radius:var(--r);padding:10px}
.mstat .k{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em}
.mstat .v{font-size:18px;font-weight:600;margin-top:4px}
.trophy-badge{background:rgba(210,153,34,.15);color:var(--am);
  font-size:10px;padding:2px 8px;border-radius:5px;font-weight:600}
.mcard-toggle{width:100%;background:none;border:none;border-top:1px solid var(--bd);
  padding:8px;color:var(--mu);cursor:pointer;font-size:12px;font-family:var(--font)}
.mcard-toggle:hover{background:var(--s2)}
.mcard-detail{display:none;padding:14px;border-top:1px solid var(--bd)}
.mcard-detail table{width:100%;font-size:12px;border-collapse:collapse}
.mcard-detail td{padding:5px 8px;border-bottom:1px solid var(--bd)}
.mcard-detail td:last-child{text-align:right;color:var(--ac);font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:0 14px 12px}
.form-col{background:var(--s2);border-radius:var(--r);padding:9px 10px}
.form-team{font-size:12px;font-weight:600;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.form-team .rk{color:var(--mu);font-weight:400;font-size:11px}
.fdot{display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:4px}
.ftag{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-size:10px}
.fopp{color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw .ftag{background:var(--gr)}.fd .ftag{background:#6e7681}.fl .ftag{background:var(--rd)}
.mcard-alert{background:rgba(210,153,34,.1);border-left:3px solid var(--am);
  padding:8px 14px;font-size:13px;margin:0 14px 10px}

/* ── VIEW TOGGLE ── */
.vtab{background:var(--s2);border:1px solid var(--bd);color:var(--mu);
  padding:6px 12px;border-radius:var(--r);cursor:pointer;font-size:12px;
  font-family:var(--font);transition:all .12s}
.vtab.active{background:var(--s1);border-color:var(--ac);color:var(--ac)}

/* ── EMPTY / SPINNER ── */
.empty{text-align:center;padding:48px 24px;color:var(--mu);font-size:13px;line-height:1.8}
.spinner{text-align:center;padding:48px 24px;color:var(--mu);font-size:13px}

/* ── LEAGUE COMPARE ── */
.league-block{border:1px solid var(--bd);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.league-header{display:flex;align-items:center;gap:10px;padding:10px 16px;
  cursor:pointer;background:var(--s1);transition:background .12s}
.league-header:hover{background:var(--s2)}
.expand-icon{color:var(--mu);font-size:11px;transition:transform .2s;margin-left:auto}
.expand-icon.open{transform:rotate(180deg)}
.league-detail{display:none;border-top:1px solid var(--bd);background:var(--s2);padding:0 14px 12px}

/* ── SEASON MULTI-SELECT ── */
/* Bug confirmé le 11/07/2026 : .toolbar a un léger flou de fond
   (backdrop-filter), ce qui crée sans le vouloir un "contexte d'empilement"
   séparé pour CHAQUE .toolbar de la page (dont le panneau "Filtres avancés",
   qui est un .toolbar séparé placé juste après dans la page). Le z-index:300
   du menu déroulant des saisons ne compte alors QUE face aux autres éléments
   DANS SON PROPRE .toolbar — il ne peut pas passer devant un autre .toolbar
   entier qui vient après lui dans la page, même à z-index inférieur (règle
   CSS : un z-index élevé sur un élément ne le fait jamais sortir du contexte
   d'empilement de son parent). Résultat vérifié : le panneau "Filtres
   avancés" recevait les clics à la place des dernières années du menu,
   là où les deux panneaux se chevauchent. Corrigé en donnant explicitement
   au toolbar qui contient le sélecteur de saisons un rang d'empilement à
   lui, plus élevé que celui des autres .toolbar (qui restent à leur rang
   par défaut) — jamais un z-index isolé sur le seul menu déroulant, qui
   n'aurait rien changé vu la cause réelle du problème. */
.toolbar:has(.season-multi){position:relative;z-index:2}
.season-multi{position:relative;display:inline-block}
.season-btn{background:var(--s2);color:var(--tx);border:1px solid var(--bd);
  border-radius:var(--r);padding:8px 14px;font-size:13px;font-family:var(--font);
  cursor:pointer;min-width:120px;text-align:left}
.season-btn:hover{border-color:var(--mu)}
.season-dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:300;
  /* Bug confirmé le 04/07/2026 : --s1 (rgba blanc à 4%) n'est pensé que
     comme un léger voile POSÉ SUR un fond déjà opaque (cf. les cartes, qui
     reposent sur --bg en flux normal) — jamais comme fond autonome d'un
     élément qui flotte au-dessus de la page (position:absolute). Utilisé
     seul ici, il laissait transparaître tout ce qu'il y avait derrière
     (quasi invisible), rendant les cases à cocher illisibles et difficiles
     à cliquer précisément. Fond recomposé en deux couches : --bg (opaque)
     en dessous, --s1 au-dessus pour garder le même voile visuel qu'ailleurs. */
  background:linear-gradient(var(--s1),var(--s1)),var(--bg);
  border:1px solid var(--bd);border-radius:var(--r);
  padding:8px;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.season-item{display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:6px;cursor:pointer;font-size:13px}
.season-item:hover{background:var(--s2)}
.season-item input{accent-color:var(--ac);cursor:pointer}