/* ============================================================
   SAISON EN COURS — PROJECTION (ps-) ET COMPARAISON 26-27 (cp-)
   (cf. js/pages/saison-projection.js et js/pages/comparaison.js)
   ============================================================
   Or = Top 2, bleu = qualification, gris = milieu, rouge = barrage et
   relégation ; vert / gris / rouge pour victoire / nul / défaite ; orange
   pour le trait 26-27 des jauges (comme l'appli). La disposition suit la
   largeur réelle de la page (requêtes de conteneur) : menu replié ou non,
   elle se recale seule.
   FLUIDITÉ : on n'anime que transform et opacity. */

.ps-page, .cp-page { container-type: inline-size; --v: #36d27a; --n: #8b97b4; --d: #ff5a63; --o: #ff9f43; }
.ps-entete, .cp-entete { align-items: flex-start; }
.ps-entete h1, .cp-entete h1 { font-size: clamp(34px, 4.4vw, 62px); }
.ps-badge {
  margin-left: auto; align-self: flex-start; padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .18em;
  color: #c8d8ff; background: rgba(47, 107, 255, .16); border: 1px solid rgba(91, 140, 255, .35);
}
.ps-lib { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.ps-attente { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--texte-3); }
.ps-attente i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bleu-2); border-right-color: transparent; animation: tourne .8s linear infinite; }
.ps-erreur { max-width: 640px; margin: 40px auto; padding: 30px; text-align: center; border-radius: 24px; background: var(--surface); border: 1px solid var(--ligne); }
.ps-erreur svg { width: 40px; height: 40px; color: var(--bleu-2); }
.ps-erreur h2 { margin: 10px 0 6px; font: 600 24px var(--titre); text-transform: uppercase; }
.ps-erreur p { margin: 0; color: var(--texte-2); }
.ps-vide { padding: 34px 16px; text-align: center; color: var(--texte-3); font-size: 13.5px; }

/* ---------------- La console : nombre de saisons, lancement, compteur ---------------- */
.ps-console {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px;
  padding: 20px 22px; margin-bottom: 14px; border-radius: 24px; border: 1px solid var(--ligne-2);
  background: radial-gradient(70% 140% at 0% 0%, rgba(47, 107, 255, .26), transparent 60%), linear-gradient(160deg, rgba(14, 28, 70, .85), rgba(6, 12, 34, .9));
  box-shadow: 0 30px 80px -40px rgba(47, 107, 255, .6);
}
.ps-console::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(143, 179, 255, .14) 50%, transparent 70%); background-size: 220% 100%;
}
.ps-page.est-en-cours .ps-console::after { opacity: 1; animation: ps-balayage 1.1s linear infinite; }
@keyframes ps-balayage { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ps-console-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; min-width: 0; }
.ps-console-choix .ps-lib { width: 100%; }
.ps-court { display: none; }
.ps-lancer { padding: 11px 18px; font-size: 14px; }
.ps-lancer svg { width: 15px; height: 15px; fill: currentColor; }
.ps-page.est-en-cours .ps-lancer { pointer-events: none; opacity: .65; }
.ps-compteur { --p: 0; position: relative; display: flex; align-items: center; gap: 12px; }
.ps-compteur svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ps-anneau-f { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.ps-anneau { fill: none; stroke: var(--bleu-2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: calc(var(--p) * 100) 100; filter: drop-shadow(0 0 6px rgba(91, 140, 255, .8)); }
.ps-page.est-fini .ps-anneau { stroke: var(--vert); filter: drop-shadow(0 0 10px rgba(54, 210, 122, .9)); }
.ps-compteur b { display: block; font: 600 30px/1 var(--titre); font-variant-numeric: tabular-nums; min-width: 4.4ch; }
.ps-compteur small { font-size: 11.5px; color: var(--texte-3); font-weight: 700; }
.ps-tirage { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--texte-2); }
.ps-tirage code { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c8d8ff; background: rgba(47, 107, 255, .16); padding: 1px 6px; border-radius: 6px; }
.ps-lien { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--bleu-2); font-weight: 750; font-size: 12.5px; }
.ps-lien svg { width: 13px; height: 13px; }
.ps-lien:hover { color: #fff; }

/* ---------------- Bandeau des sources ---------------- */
.ps-bandeau {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 20px; border-radius: 16px;
  background: rgba(54, 210, 122, .06); border: 1px solid rgba(54, 210, 122, .22); font-size: 12.5px; color: var(--texte-2);
}
.ps-bandeau-i svg { width: 20px; height: 20px; color: #6fe3a0; margin-top: 2px; }
.ps-bandeau b { display: block; color: #a9f0c6; font-size: 13.5px; }
.ps-bandeau span { display: block; margin-top: 2px; }

/* ---------------- Chiffres clés ---------------- */
.ps-kpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.1fr; gap: 14px; margin-bottom: 26px; }
.ps-kpi {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--ligne);
  background: linear-gradient(160deg, rgba(47, 107, 255, .16), rgba(255, 255, 255, .02) 58%);
}
.ps-kpi::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(160px 80px at 90% 0%, rgba(143, 179, 255, .16), transparent); }
.ps-kpi-lib { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.ps-kpi-val { margin-top: 8px; font: 600 54px/.95 var(--titre); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ps-kpi-val sup { font-size: .42em; vertical-align: top; margin-left: 2px; position: relative; top: .25em; }
.ps-kpi small { margin-top: 8px; font-size: 12.5px; color: var(--texte-2); }
.ps-kpi.est-rang { background: radial-gradient(90% 120% at 0% 0%, rgba(245, 196, 81, .16), transparent 60%), linear-gradient(160deg, rgba(47, 107, 255, .2), rgba(255, 255, 255, .02) 60%); border-color: rgba(143, 179, 255, .26); }
.ps-kpi.est-rang .ps-kpi-val { font-size: 76px; background: linear-gradient(180deg, #fff 30%, #b9cbff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-kpi-echelle { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; align-items: end; height: 34px; margin-top: 12px; }
.ps-kpi-echelle i { display: block; height: 100%; border-radius: 3px; background: var(--c); transform-origin: 50% 100%; transform: scaleY(max(.04, var(--h))); opacity: .9; transition: transform .25s var(--doux); }
.ps-kpi.est-alerte .ps-kpi-val { color: #ffb0b5; }
.ps-kpi.est-bon .ps-kpi-val { color: #a9f0c6; }
.ps-kpi-barre { height: 6px; margin-top: auto; padding-top: 0; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; position: relative; top: 6px; }
.ps-kpi-barre i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff5a63, #ff9f43 40%, #36d27a); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform .3s var(--doux); }

/* ---------------- Sections ---------------- */
.ps-section { margin: 0 0 26px; }
.ps-section-t { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.ps-section-t h2 { margin: 0; font: 600 23px var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.ps-section-t p { margin: 4px 0 0; font-size: 13px; color: var(--texte-2); }
.ps-etiquette { margin-left: auto; flex: none; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); background: var(--surface-2); border: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }

/* ---------------- Indicateurs ramenés à un match ---------------- */
.ps-jauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ps-jauge { padding: 16px 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ligne); }
.ps-jauge.est-bon { border-color: rgba(54, 210, 122, .28); background: linear-gradient(170deg, rgba(54, 210, 122, .08), var(--surface) 55%); }
.ps-jauge.est-veille { border-color: rgba(255, 159, 67, .3); background: linear-gradient(170deg, rgba(255, 159, 67, .08), var(--surface) 55%); }
.ps-jauge-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ps-jauge-t h3 { margin: 0; font: 600 15px/1.15 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.ps-jauge-t span { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.ps-jauge-v { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.ps-jauge-v span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap; }
.ps-jauge-v b { display: block; margin-top: 3px; font: 600 26px/1 var(--titre); font-variant-numeric: tabular-nums; }
.ps-jauge-v div:first-child b { color: #fff; }
.ps-jauge-v div:last-child b { color: var(--texte-2); }
.ps-jauge-piste { position: relative; height: 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(91, 140, 255, .1), rgba(91, 140, 255, .32)); }
.ps-jauge-ref, .ps-jauge-pt { position: absolute; top: 50%; transform: translate(-50%, -50%); transition: left .3s var(--doux); }
.ps-jauge-ref { width: 3px; height: 22px; border-radius: 2px; background: var(--texte-2); }
.ps-jauge-pt { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--bleu-2); box-shadow: 0 0 14px rgba(91, 140, 255, .8); }
.ps-jauge.est-bon .ps-jauge-pt { border-color: var(--vert); box-shadow: 0 0 14px rgba(54, 210, 122, .7); }
.ps-jauge.est-veille .ps-jauge-pt { border-color: var(--o); box-shadow: 0 0 14px rgba(255, 159, 67, .7); }

/* ---------------- Zones de classement ---------------- */
.ps-ruban { display: flex; height: 34px; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid var(--ligne); }
.ps-ruban i { position: relative; font-style: normal; flex: var(--p) 1 0; min-width: 0; background: var(--c); display: grid; place-items: center; box-shadow: inset -1px 0 0 rgba(4, 8, 22, .45); }
.ps-ruban span { font-size: 11px; font-weight: 800; color: #0a1433; white-space: nowrap; overflow: hidden; text-overflow: clip; padding: 0 4px; }
.ps-bandes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.ps-bande { position: relative; overflow: hidden; padding: 12px 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--ligne); }
.ps-bande::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.ps-bande span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.ps-bande b { display: block; margin: 6px 0 10px; font: 600 28px/1 var(--titre); font-variant-numeric: tabular-nums; }
.ps-bande div { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ps-bande div i { display: block; height: 100%; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform .3s var(--doux); }
.ps-bande.est-cible { background: linear-gradient(170deg, rgba(47, 107, 255, .12), var(--surface) 60%); border-color: rgba(91, 140, 255, .3); }
.ps-bande.est-danger { background: linear-gradient(170deg, rgba(224, 49, 58, .12), var(--surface) 60%); border-color: rgba(224, 49, 58, .3); }
.ps-bande.est-danger b { color: #ffb0b5; }

/* ---------------- Cartes et graphiques ---------------- */
.ps-duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-bottom: 16px; }
.ps-duo-b { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
.ps-carte { min-width: 0; padding: 18px 18px 16px; margin-bottom: 16px; border-radius: 24px; border: 1px solid var(--ligne); background: linear-gradient(170deg, rgba(47, 107, 255, .07), rgba(255, 255, 255, .02) 45%); }
.ps-duo > .ps-carte { margin-bottom: 0; }
.ps-carte-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.ps-carte-t h2 { margin: 0; font: 600 19px var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.ps-carte-t span { font-size: 12px; color: var(--texte-3); font-weight: 650; }
.ps-graphe { min-height: 120px; }
.ps-svg { display: block; overflow: visible; font-family: var(--corps); }
.ps-g-grille { stroke: rgba(143, 179, 255, .1); stroke-width: 1; }
.ps-g-grille.est-moitie { stroke: rgba(255, 255, 255, .28); stroke-dasharray: 4 4; }
.ps-g-axe { fill: var(--texte-3); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ps-g-tic { stroke: var(--ligne-2); }
.ps-g-titre-axe { fill: var(--texte-3); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ps-g-zone { fill: transparent; }
.ps-g-col:hover .ps-g-zone { fill: rgba(143, 179, 255, .07); }
.ps-g-barre { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); transition: opacity .2s; }
.ps-g-col.est-max .ps-g-barre { filter: drop-shadow(0 0 12px rgba(143, 179, 255, .55)); }
.ps-g-val { fill: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ps-g-rang { fill: var(--texte-2); font-size: 12px; font-weight: 800; }
.ps-g-rang.est-dom { fill: #6fe3a0; }
.ps-g-moy { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.ps-g-moy-t { fill: #fff; font-size: 11px; font-weight: 800; }
.ps-g-bande { fill: color-mix(in srgb, var(--c) 22%, transparent); stroke: color-mix(in srgb, var(--c) 60%, transparent); }
.ps-g-bande-t { fill: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ps-g-histo { fill: #4f86ff; opacity: .92; }
.ps-g-col:hover .ps-g-histo { fill: #8fb3ff; }
.ps-g-moyenne { stroke: var(--d); stroke-width: 2.2; stroke-dasharray: 7 5; }
.ps-g-moyenne-t { fill: #ff8a90; font-size: 12.5px; font-weight: 800; }
.ps-g-v { fill: var(--v); }
.ps-g-n { fill: var(--n); }
.ps-g-d { fill: var(--d); opacity: .9; }
.ps-g-col .ps-g-v, .ps-g-col .ps-g-n, .ps-g-col .ps-g-d { transition: opacity .2s; }
.ps-graphe-cal:hover .ps-g-col:not(:hover) .ps-g-v, .ps-graphe-cal:hover .ps-g-col:not(:hover) .ps-g-n, .ps-graphe-cal:hover .ps-g-col:not(:hover) .ps-g-d { opacity: .45; }
.ps-g-pc { fill: #062a16; font-size: 10.5px; font-weight: 800; }
.ps-g-reel { stroke: rgba(4, 8, 22, .9); stroke-width: 2; }
.ps-g-reel.est-v { fill: var(--v); } .ps-g-reel.est-d { fill: var(--d); } .ps-g-reel.est-n { fill: var(--or); }
.ps-g-reel-t { fill: #0a1433; font-size: 9px; font-weight: 900; pointer-events: none; }
.ps-g-ecu { fill: #fff; }
.ps-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 14px; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.ps-leg span { display: inline-flex; align-items: center; gap: 7px; }
.ps-leg i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.ps-leg i.ps-leg-joue { border-radius: 50%; background: var(--v); box-shadow: 0 0 0 2px rgba(4, 8, 22, .9), 0 0 0 3px var(--ligne-2); }

/* ---------------- Tableaux ---------------- */
.ps-table-c { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ps-table th { padding: 8px 9px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--ligne-2); }
.ps-table td { padding: 7px 9px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--ligne); color: var(--texte-2); }
.ps-table th.g, .ps-table td.g { text-align: left; }
.ps-table tbody tr { transition: background .15s; }
.ps-table tbody tr:hover { background: rgba(47, 107, 255, .08); }
.ps-table td b { color: #fff; font-weight: 750; }
.ps-rang { font: 600 15px var(--titre); color: #fff !important; }
.ps-club { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ps-club b { font-weight: 750; color: #fff; }
.ps-ecu { flex: none; width: 30px; height: 30px; padding: 3px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6); }
.ps-ecu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ps-ecu i { font: 600 11px var(--titre); font-style: normal; color: #0a1433; }
.ps-nom-court { display: none; }
.ps-classement tr.est-co td { background: linear-gradient(90deg, rgba(47, 107, 255, .26), rgba(47, 107, 255, .08)); }
.ps-classement tr.est-co td:first-child { box-shadow: inset 3px 0 0 var(--bleu-2); }
.ps-top6 { display: inline-flex; align-items: center; gap: 7px; }
.ps-top6 i { width: 44px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.ps-top6 i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #3b6fe6, #8fb3ff); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.ps-top6 b { min-width: 2.2ch; text-align: right; }
.ps-classement th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.ps-classement td.g .ps-club b { white-space: normal; line-height: 1.2; }
.ps-chaleur { display: grid; grid-template-columns: repeat(14, 13px); gap: 2px; }
.ps-chaleur i { height: 18px; border-radius: 4px; background: var(--c); opacity: max(.06, var(--a)); cursor: default; }
.ps-chaleur i:hover { outline: 1.5px solid #fff; outline-offset: 1px; }
.ps-lieu { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ps-lieu.est-dom { background: rgba(61, 220, 132, .13); color: #6fe3a0; }
.ps-lieu.est-ext { background: rgba(91, 140, 255, .15); color: var(--bleu-2); }
.ps-pc { display: inline-flex; align-items: center; gap: 6px; }
.ps-pc i { width: 40px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.ps-pc i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.ps-pc.est-v i::after { background: var(--v); }
.ps-pc.est-d i::after { background: var(--d); }
.ps-pc b { min-width: 2ch; text-align: right; }
.ps-diff { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.ps-diff.est-fav { background: rgba(54, 210, 122, .18); color: #8ff0b8; }
.ps-diff.est-leger { background: rgba(170, 220, 90, .16); color: #cdeb98; }
.ps-diff.est-equi { background: rgba(245, 196, 81, .16); color: #ffe3a1; }
.ps-diff.est-diff { background: rgba(255, 159, 67, .17); color: #ffc999; }
.ps-diff.est-tres { background: rgba(255, 90, 99, .18); color: #ffb0b5; }
.ps-reel { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #fff; }
.ps-reel.est-v { background: #2f8f68; } .ps-reel.est-d { background: #b23a40; } .ps-reel.est-n { background: #8a6d1e; }
.ps-avenir { font-size: 11.5px; color: var(--texte-3); font-style: italic; }
.ps-matchs td.g b { white-space: normal; line-height: 1.2; display: block; max-width: 210px; }
.ps-matchs .ps-pc i { width: 30px; }
.ps-matchs th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.ps-matchs tr.est-joue td:first-child { box-shadow: inset 3px 0 0 rgba(143, 179, 255, .4); }

/* ---------------- Lecture du modèle ---------------- */
.ps-methode h2 { margin: 0 0 4px; font: 600 19px var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.ps-methode h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--bleu-2); }
.ps-methode ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--texte-2); font-size: 13.5px; }
.ps-methode li::marker { color: var(--bleu-2); }
.ps-methode-plus { margin: 12px 0 0; font-size: 12.5px; color: var(--texte-3); }
.ps-avert { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 14px; background: rgba(245, 196, 81, .08); border: 1px solid rgba(245, 196, 81, .22); font-size: 12.5px; color: #ffe3a1; }
.ps-avert svg { width: 18px; height: 18px; flex: none; }

/* ---------------- La bulle ---------------- */
.ps-bulle {
  position: fixed; left: 0; top: 0; z-index: 70; max-width: 320px; padding: 11px 14px; border-radius: 14px; pointer-events: none;
  background: rgba(8, 16, 42, .97); border: 1px solid var(--ligne-2); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  opacity: 0; transition: opacity .15s; display: grid; gap: 3px; will-change: transform; font-variant-numeric: tabular-nums;
}
.ps-bulle.est-visible { opacity: 1; }
.ps-bulle b { font: 600 15px var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.ps-bulle span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; color: var(--texte); }
.ps-bulle span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--bleu-2)); flex: none; }
.ps-bulle span em { font-style: normal; font-weight: 600; color: var(--texte-3); }
.ps-bulle small { font-size: 12px; color: var(--texte-2); }
.ps-bulle small b { font: 800 12px var(--corps); text-transform: none; letter-spacing: 0; padding: 1px 6px; border-radius: 5px; }
.ps-b-reel.est-v { background: #2f8f68; } .ps-b-reel.est-d { background: #b23a40; } .ps-b-reel.est-n { background: #8a6d1e; }

/* ============================================================
   COMPARAISON 26-27
   ============================================================ */
.cp-commande {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: 18px 28px; padding: 20px 22px 18px; margin-bottom: 14px;
  border-radius: 24px; border: 1px solid var(--ligne-2);
  background: radial-gradient(70% 140% at 0% 0%, rgba(47, 107, 255, .24), transparent 60%), linear-gradient(160deg, rgba(14, 28, 70, .85), rgba(6, 12, 34, .9));
  box-shadow: 0 30px 80px -40px rgba(47, 107, 255, .6);
}
.cp-periode { min-width: 0; }
.cp-periode-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cp-periode-t b { font: 600 30px/1 var(--titre); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }

/* Le curseur à deux poignées : --a et --b en % de la piste. */
.cp-curseur { --a: 0; --b: 0; position: relative; padding: 0 13px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.cp-piste { position: relative; height: 34px; }
.cp-piste::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 8px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.cp-plage {
  position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 8px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%);
  background: linear-gradient(90deg, var(--bleu), var(--ciel)); box-shadow: 0 0 16px rgba(91, 140, 255, .6); transition: left .18s var(--doux), width .18s var(--doux);
}
.cp-curseur.est-meme .cp-plage { width: 0; }
.cp-cran { position: absolute; top: 50%; left: calc(var(--x) * 1%); width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 2px; background: rgba(255, 255, 255, .16); pointer-events: none; }
.cp-cran.est-joue::after { content: ""; position: absolute; left: 50%; top: -9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--o); box-shadow: 0 0 8px rgba(255, 159, 67, .8); }
.cp-poignee {
  position: absolute; top: 50%; left: calc(var(--a) * 1%); width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 50%;
  border: 3px solid var(--bleu-2); background: #fff; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .7), 0 0 0 0 rgba(91, 140, 255, .5);
  transition: left .18s var(--doux), box-shadow .2s, transform .2s var(--ressort); z-index: 2; cursor: grab;
}
.cp-poignee[data-p="b"] { left: calc(var(--b) * 1%); }
.cp-poignee:focus-visible, .cp-poignee:hover { box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .7), 0 0 0 7px rgba(91, 140, 255, .28); outline: none; }
.cp-curseur.est-tenu .cp-poignee:focus { transform: scale(1.12); cursor: grabbing; }
.cp-curseur.est-tenu .cp-plage, .cp-curseur.est-tenu .cp-poignee { transition: box-shadow .2s, transform .2s var(--ressort); }
.cp-poignee span {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  font: 600 12px var(--titre); letter-spacing: .04em; color: #fff; background: #1d3f9e; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8); pointer-events: none;
}
.cp-curseur.est-meme .cp-poignee[data-p="a"] span { display: none; }
.cp-graduation { position: relative; height: 18px; margin-top: 2px; }
.cp-graduation span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.cp-graduation span.est-cle { color: var(--texte-2); }
.cp-raccourcis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cp-raccourcis button {
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--ligne-2); background: var(--surface-2); font-size: 12.5px; font-weight: 750; color: var(--texte-2);
  transition: background .2s, color .2s, border-color .2s, transform .15s var(--ressort);
}
.cp-raccourcis button:hover { color: #fff; background: var(--surface-3); }
.cp-raccourcis button:active { transform: scale(.96); }
.cp-raccourcis button.est-actif { color: #fff; background: rgba(47, 107, 255, .3); border-color: rgba(91, 140, 255, .55); }
.cp-leg-joue { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11.5px; color: var(--texte-3); font-weight: 650; }
.cp-leg-joue i { width: 7px; height: 7px; border-radius: 50%; background: var(--o); box-shadow: 0 0 8px rgba(255, 159, 67, .8); }
.cp-lieu { display: grid; align-content: start; gap: 10px; min-width: 0; }
.cp-lieu .segments { max-width: 100%; }
.cp-aide { display: flex; gap: 8px; margin: 4px 0 0; font-size: 12px; color: var(--texte-3); }
.cp-aide svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.cp-bandeau { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px; border-radius: 16px; font-size: 12.5px; color: var(--texte-2); }
.cp-bandeau svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cp-bandeau b { display: block; font-size: 14px; }
.cp-bandeau span { display: block; margin-top: 2px; }
.cp-bandeau.est-pret { background: rgba(54, 210, 122, .07); border: 1px solid rgba(54, 210, 122, .24); }
.cp-bandeau.est-pret svg, .cp-bandeau.est-pret b { color: #8ff0b8; }
.cp-bandeau.est-attente { background: rgba(255, 159, 67, .07); border: 1px solid rgba(255, 159, 67, .26); }
.cp-bandeau.est-attente svg, .cp-bandeau.est-attente b { color: #ffc999; }

.cp-resume { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.cp-total { position: relative; overflow: hidden; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--ligne); background: linear-gradient(160deg, rgba(47, 107, 255, .12), rgba(255, 255, 255, .02) 58%); }
.cp-total span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.cp-total b { display: block; margin-top: 6px; font: 600 46px/1 var(--titre); font-variant-numeric: tabular-nums; }
.cp-total small { display: block; margin-top: 6px; font-size: 12px; color: var(--texte-2); }
.cp-total.est-premier { background: linear-gradient(160deg, rgba(47, 107, 255, .3), rgba(255, 255, 255, .02) 65%); border-color: rgba(91, 140, 255, .35); }
.cp-total.est-courant { background: linear-gradient(160deg, rgba(255, 159, 67, .14), rgba(255, 255, 255, .02) 60%); border-color: rgba(255, 159, 67, .3); }

/* Les jauges : 14 segments, une barre par saison, le trait orange 26-27. */
.cp-jauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-jauge { min-width: 0; padding: 16px 18px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--ligne); }
.cp-jauge.est-tete { border-color: rgba(54, 210, 122, .3); background: linear-gradient(170deg, rgba(54, 210, 122, .07), var(--surface) 55%); }
.cp-jauge.est-queue { border-color: rgba(255, 90, 99, .3); background: linear-gradient(170deg, rgba(255, 90, 99, .07), var(--surface) 55%); }
.cp-jauge.est-vide { opacity: .7; }
.cp-jauge-t { display: flex; align-items: flex-start; gap: 12px; }
.cp-jauge-t h3 { margin: 0; font: 600 16px/1.1 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.cp-jauge-t p { margin: 3px 0 0; font-size: 11.5px; color: var(--texte-3); }
.cp-jauge-i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(47, 107, 255, .18); color: var(--ciel); }
.cp-jauge-i svg { width: 18px; height: 18px; }
.cp-sens { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); background: var(--surface-2); }
.cp-jauge-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 56px; }
.cp-jauge-chiffres span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.cp-jauge-chiffres b { display: block; margin-top: 4px; font: 600 23px/1 var(--titre); font-variant-numeric: tabular-nums; }
.cp-jauge-chiffres .est-26 b { color: var(--o); }
.cp-piste-j { position: relative; height: 16px; margin: 0 4px; }
.cp-segments { display: grid; grid-template-columns: repeat(14, 1fr); height: 100%; border-radius: 6px; overflow: hidden; }
.cp-segments i { background: hsl(calc(218 - var(--k) * 1.5), calc(80% - var(--k) * 2%), calc(14% + var(--k) * 5.6%)); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18); }
.cp-saison { position: absolute; top: -5px; bottom: -5px; left: calc(var(--x) * 1%); width: 4px; margin-left: -2px; border-radius: 3px; background: #c9d4ea; box-shadow: 0 0 0 1.5px rgba(4, 8, 22, .8); transition: left .3s var(--doux); }
.cp-saison::before { content: ""; position: absolute; inset: -6px -7px; }
.cp-saison.est-derniere { background: var(--d); box-shadow: 0 0 0 1.5px rgba(4, 8, 22, .8), 0 0 10px rgba(255, 90, 99, .7); }
.cp-saison-t { --dx: 0px; position: absolute; top: calc(100% + 7px); left: calc(var(--x) * 1%); transform: translateX(calc(-50% + var(--dx))); font-size: 10.5px; font-weight: 800; color: var(--texte-2); white-space: nowrap; transition: left .3s var(--doux); pointer-events: none; }
.cp-saison-t.est-dessus { top: auto; bottom: calc(100% + 7px); }
.cp-saison-t.est-derniere { color: #ff8a90; }
.cp-courant { position: absolute; top: -9px; bottom: -9px; left: calc(var(--x) * 1%); width: 6px; margin-left: -3px; border-radius: 4px; background: var(--o); box-shadow: 0 0 0 2px rgba(4, 8, 22, .85), 0 0 16px rgba(255, 159, 67, .85); transition: left .3s var(--doux); z-index: 2; }
.cp-courant::before { content: ""; position: absolute; inset: -4px -8px; }
.cp-courant-t { position: absolute; bottom: calc(100% + 24px); left: calc(var(--x) * 1%); transform: translateX(-50%); padding: 2px 7px; border-radius: 7px; font: 600 11px var(--titre); color: #2a1500; background: var(--o); white-space: nowrap; transition: left .3s var(--doux); z-index: 3; pointer-events: none; }
.cp-courant-t::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--o); }
/* L'échelle de 14 valeurs (comme l'appli : réparties d'un bord à l'autre) ;
   quand la carte est étroite, une sur deux, puis une sur quatre. */
.cp-jauge { container-type: inline-size; }
.cp-echelle { display: flex; justify-content: space-between; gap: 4px; margin: 30px 0 0; }
.cp-echelle span { font-size: 9.5px; font-weight: 650; color: var(--texte-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@container (max-width: 640px) { .cp-echelle span.est-impair { display: none; } }
@container (max-width: 380px) { .cp-echelle span.est-pair { display: none; } }

.cp-duo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-matchs td.g b { white-space: normal; line-height: 1.2; display: block; max-width: 150px; }
.cp-matchs td, .cp-matchs th { padding-left: 6px; padding-right: 6px; }
.cp-g-col rect { fill: transparent; }
.cp-g-col line { stroke: rgba(143, 179, 255, .25); stroke-width: 1; opacity: 0; }
.cp-g-col:hover rect { fill: rgba(143, 179, 255, .05); }
.cp-g-col:hover line { opacity: 1; }
.cp-g-ligne { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cp-g-ligne.est-autre { opacity: .38; }
.cp-g-ligne.est-derniere { opacity: .85; stroke-width: 2.4; }
.cp-g-ligne.est-cible { stroke-width: 3.4; filter: drop-shadow(0 0 8px rgba(91, 140, 255, .65)); }
.cp-g-point { fill: #fff; stroke: #5b8cff; stroke-width: 3; pointer-events: none; }
.cp-g-fin { font-size: 12px; font-weight: 800; pointer-events: none; }
.cp-g-fin.est-cible { fill: #8fb3ff; } .cp-g-fin.est-derniere { fill: #ff8a90; }
.cp-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.cp-leg span { display: inline-flex; align-items: center; gap: 7px; }
.cp-leg i { width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.cp-leg i.est-pale { opacity: .45; }
.cp-leg-note { width: 100%; color: #ff8a90; font-size: 11.5px; font-weight: 650; }
.cp-table-c { max-height: 460px; overflow-y: auto; }
.cp-table-c thead th { position: sticky; top: 0; background: #0a1536; z-index: 1; }
.cp-source { display: flex; gap: 8px; margin: 8px 0 0; font-size: 12px; color: var(--texte-3); }
.cp-source svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ============================================================
   LARGEURS INTERMÉDIAIRES ET TÉLÉPHONE (largeur de la page)
   ============================================================ */
@container (max-width: 1240px) {
  .ps-duo-b { grid-template-columns: minmax(0, 1fr); }
  .ps-duo-b .ps-methode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; }
  .ps-duo-b .ps-methode > h2, .ps-duo-b .ps-methode > h3 { grid-column: 1 / -1; }
  .ps-duo-b .ps-methode > ul { grid-row: span 2; }
  .ps-duo-b .ps-methode-plus, .ps-duo-b .ps-avert { grid-column: 2; margin-top: 0; align-self: start; }
}
@container (max-width: 1000px) {
  .ps-bandes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-jauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 980px) {
  .ps-duo, .cp-duo { grid-template-columns: minmax(0, 1fr); }
  .cp-jauges { grid-template-columns: minmax(0, 1fr); }
  .cp-commande { grid-template-columns: minmax(0, 1fr); }
  .ps-col-rangs { display: none; }
}
@container (max-width: 640px) {
  .ps-badge { display: none; }
  .ps-console { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ps-console-choix .segments { width: 100%; }
  .ps-console-choix .segments button { flex: 1; padding: 8px 6px; }
  .ps-long { display: none; }
  .ps-court { display: inline; }
  .ps-lancer { width: 100%; justify-content: center; }
  .ps-compteur { justify-content: flex-start; }
  .ps-kpis { gap: 10px; }
  .ps-kpi { padding: 14px; border-radius: 18px; }
  .ps-kpi-val { font-size: 36px; }
  .ps-kpi.est-rang { grid-column: 1 / -1; }
  .ps-kpi.est-rang .ps-kpi-val { font-size: 64px; }
  .ps-jauges { grid-template-columns: minmax(0, 1fr); }
  .ps-bandes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ps-bande b { font-size: 24px; }
  .ps-section-t { flex-wrap: wrap; }
  .ps-section-t h2 { font-size: 20px; }
  .ps-etiquette { margin-left: 0; }
  .ps-carte { padding: 14px 12px 12px; border-radius: 20px; }
  .ps-nom-long { display: none; }
  .ps-duo-b .ps-methode { display: block; }
  .ps-nom-court { display: inline; }
  .ps-table { font-size: 12.5px; }
  .ps-table th, .ps-table td { padding: 7px 6px; }
  .cp-commande { padding: 16px; }
  .cp-periode-t b { font-size: 24px; }
  .cp-graduation span:not(.est-cle) { display: none; }
  .cp-leg-joue { margin-left: 0; width: 100%; }
  .cp-lieu .segments { width: 100%; }
  .cp-lieu .segments button { flex: 1; padding: 8px 6px; font-size: 12.5px; }
  .cp-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cp-total b { font-size: 36px; }
  .cp-jauge { padding: 14px 14px 12px; }
  .cp-jauge-chiffres b { font-size: 19px; }
  .cp-sens { display: none; }
  /* Les matchs en fiches empilées : plus rien ne défile de côté. */
  .ps-matchs thead, .cp-matchs thead { display: none; }
  .ps-matchs, .ps-matchs tbody, .cp-matchs, .cp-matchs tbody { display: block; }
  .ps-matchs tr, .cp-matchs tr { display: grid; align-items: center; gap: 6px 8px; padding: 11px 2px; border-bottom: 1px solid var(--ligne); }
  .ps-matchs td, .cp-matchs td { display: block; padding: 0; border: 0; text-align: left; white-space: nowrap; }
  .ps-matchs tr { grid-template-columns: 30px auto auto auto minmax(0, 1fr) auto; grid-template-areas: "j adv adv adv adv diff" "j date lieu lieu . score" "j v n d . reel"; }
  .ps-matchs td:nth-child(1) { grid-area: j; align-self: start; padding-left: 7px; }
  .ps-matchs td:nth-child(2) { grid-area: date; font-size: 11.5px; }
  .ps-matchs .ps-reel, .ps-matchs .ps-diff { font-size: 11px; padding: 2px 7px; }
  .ps-matchs .ps-lieu { font-size: 9.5px; padding: 2px 7px; }
  .ps-matchs td:nth-child(3) { grid-area: adv; min-width: 0; }
  .ps-matchs td:nth-child(4) { grid-area: lieu; }
  .ps-matchs td:nth-child(5) { grid-area: v; }
  .ps-matchs td:nth-child(6) { grid-area: n; font-size: 12px; }
  .ps-matchs td:nth-child(6)::before { content: "nul "; color: var(--texte-3); }
  .ps-matchs td:nth-child(7) { grid-area: d; }
  .ps-matchs td:nth-child(8) { grid-area: score; text-align: right; }
  .ps-matchs td:nth-child(8)::before { content: "score moyen "; font-size: 10.5px; font-weight: 650; color: var(--texte-3); }
  .ps-matchs td:nth-child(9) { grid-area: diff; text-align: right; }
  .ps-matchs td:nth-child(10) { grid-area: reel; text-align: right; }
  .ps-matchs td.g b { max-width: none; }
  .ps-matchs .ps-pc i { width: 22px; }
  .cp-matchs tr { grid-template-columns: 34px auto minmax(0, 1fr) auto; grid-template-areas: "j adv adv score" "j date lieu res"; }
  .cp-matchs td:nth-child(1) { grid-area: j; align-self: start; padding-left: 4px; }
  .cp-matchs td:nth-child(2) { grid-area: date; font-size: 12px; }
  .cp-matchs td:nth-child(3) { grid-area: lieu; }
  .cp-matchs td:nth-child(4) { grid-area: adv; min-width: 0; }
  .cp-matchs td:nth-child(5) { grid-area: score; text-align: right; }
  .cp-matchs td:nth-child(6) { grid-area: res; text-align: right; }
  .cp-matchs td.g b { max-width: none; }
  .cp-table-c { max-height: none; }
}