/* ============================================================
   Statistiques historiques : Classement historique, Champions,
   Bilan, Qualification Top 14 (js/pages/historique.js,
   champions.js, bilan.js, qualification.js et leur module commun
   stats-historique-commun.js).
   ============================================================
   Préfixes : sh- (commun), hi- (historique), ch- (champions),
   bi- (bilan), qu- (qualification).
   La jauge à quatorze rangs est la pièce maîtresse des quatre
   écrans : 1 = meilleur (lumineux, à gauche), 14 = le plus faible
   (sombre, à droite) ; repère bleu-blanc = potentiel, or = réel.
   Couleur doublée d'un mot ou d'un signe, jamais seule.
   FLUIDITÉ : on n'anime que transform, opacity et
   stroke-dashoffset ; un graphique retracé (largeur qui change) ne
   rejoue pas ses animations (.sans-anim). */

.sh-page {
  --pot: #8fb3ff; --act: #f5c451; --bon: #36d27a; --mal: #ff5a63; --moy: #f2a93b; --or-champ: #e8c25a;
  --surface-g: #0a1433;
}

/* ---------------- En-tête ---------------- */
.sh-entete { align-items: center; margin-bottom: 20px; }
.sh-entete h1 { font-size: clamp(30px, 3.6vw, 52px); }
.sh-entete-logo { width: 74px; height: 74px; padding: 9px; border-radius: 22px; background: #fff; object-fit: contain; box-shadow: 0 18px 44px -18px rgba(47, 107, 255, .7); }
.sh-entete-t { min-width: 0; flex: 1 1 420px; }
.sh-entete-d { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.sh-pastille { padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #c8d8ff; background: linear-gradient(135deg, rgba(47, 107, 255, .35), rgba(47, 107, 255, .1)); border: 1px solid rgba(91, 140, 255, .4); }
.sh-source { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 14px; font-size: 12.5px; color: var(--texte-2); background: var(--surface); border: 1px solid var(--ligne-2); }
.sh-source b { color: var(--texte); white-space: nowrap; }
.sh-picto { width: 18px; height: 18px; flex: none; }
.sh-source .sh-picto { color: var(--ciel); }
.sh-attente { display: flex; align-items: center; gap: 12px; padding: 50px 0; color: var(--texte-3); font-weight: 650; }
.sh-attente i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bleu-2); border-right-color: transparent; animation: tourne .8s linear infinite; }
.sh-erreur { max-width: 620px; margin: 30px auto; padding: 34px 26px; text-align: center; border-radius: 22px; background: var(--surface); border: 1px solid var(--ligne-2); }
.sh-erreur .sh-picto { width: 46px; height: 46px; color: var(--orange); margin: 0 auto 10px; display: block; }
.sh-erreur h2 { margin: 0 0 8px; font: 600 24px var(--titre); text-transform: uppercase; }
.sh-erreur p { margin: 0; color: var(--texte-2); }
.sh-vide { padding: 40px 20px; text-align: center; color: var(--texte-3); border-radius: 18px; border: 1px dashed var(--ligne-2); }
.sh-vide-t { color: var(--texte-3); font-style: italic; }

/* ---------------- Filtres ---------------- */
.sh-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ligne); }
.sh-liste { display: grid; gap: 5px; min-width: 0; }
.sh-liste > span:first-child, .sh-lib { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.sh-liste .liste-deroulante select { max-width: 100%; min-width: 170px; }
.sh-puces-kpi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 420px; min-width: 0; }
.sh-puces-kpi .sh-lib { flex-basis: 100%; }
.sh-puce {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ligne-2);
  background: none; font-size: 12.5px; font-weight: 700; color: var(--texte-3); transition: background .2s, color .2s, border-color .2s, transform .2s var(--ressort);
}
.sh-puce .sh-picto { width: 14px; height: 14px; }
.sh-puce:hover { color: var(--texte); }
.sh-puce.est-actif { color: #fff; background: linear-gradient(135deg, rgba(47, 107, 255, .55), rgba(47, 107, 255, .25)); border-color: rgba(91, 140, 255, .6); }
.sh-puce:active { transform: scale(.96); }
.sh-onglets { margin-bottom: 18px; max-width: 100%; }
.sh-onglets .segments { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sh-onglets .segments::-webkit-scrollbar { display: none; }
.sh-court { display: none; }

/* ---------------- Cartes, sections ---------------- */
.sh-carte {
  position: relative; margin-top: 18px; padding: 20px 22px 18px; border-radius: 22px; min-width: 0;
  background: linear-gradient(165deg, rgba(47, 107, 255, .09), rgba(255, 255, 255, .02) 46%); border: 1px solid var(--ligne);
}
.sh-carte-t { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; }
.sh-carte-t .surtitre { margin-bottom: 5px; }
.sh-carte-t h2 { margin: 0; font: 600 23px/1.05 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.sh-carte-t .sh-liste .liste-deroulante select { min-width: 200px; }
.sh-section { margin: 34px 0 6px; display: flex; align-items: flex-end; gap: 14px; }
.sh-section h2 { margin: 0; font: 600 26px var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.sh-section p { margin: 4px 0 0; color: var(--texte-2); font-size: 14px; }
.sh-section::after { content: ""; flex: 1; height: 1px; margin-bottom: 10px; background: linear-gradient(90deg, var(--ligne-2), transparent); }
.sh-grille { display: grid; gap: 18px; align-items: start; }
.sh-grille > .sh-carte { margin-top: 18px; }
.sh-note { margin: 12px 0 0; font-size: 13px; color: var(--texte-3); line-height: 1.5; }
.sh-note b { color: var(--texte-2); }
.sh-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 650; color: var(--texte-3); }
.sh-leg span { display: inline-flex; align-items: center; gap: 6px; }
.sh-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sh-leg-b { margin-top: 10px; }
.sh-lg-pt { background: #7d8a9b; border-radius: 50% !important; }
.sh-lg-ligne { height: 3px !important; width: 16px !important; background: var(--bleu-2); }
.sh-lg-sel { border: 2px solid var(--mal); border-radius: 50% !important; background: none; }
.sh-lg-tiret { width: 0 !important; height: 12px !important; border-left: 2px dashed var(--pot); border-radius: 0 !important; }
.sh-sens { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--texte-2); background: var(--surface-2); border: 1px solid var(--ligne); }
.sh-mini { padding: 5px 10px; border-radius: 9px; border: 1px solid var(--ligne-2); background: var(--surface-2); font-size: 12px; font-weight: 750; color: var(--texte-2); }
.sh-mini:hover { color: #fff; border-color: rgba(143, 179, 255, .45); }
.sh-export { display: inline-flex; gap: 6px; }

/* ---------------- Badges de clubs ---------------- */
.sh-badge { display: inline-flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; }
.sh-badge-nom { overflow: hidden; text-overflow: ellipsis; }
.sh-badge-logo, .sh-badge-mono { width: var(--t); height: var(--t); flex: none; border-radius: 50%; display: grid; place-items: center; }
.sh-badge-logo { padding: calc(var(--t) * .12); background: #fff; box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .6); }
.sh-badge-logo img { width: 100%; height: 100%; object-fit: contain; }
.sh-badge-mono { font: 800 calc(var(--t) * .34) / 1 var(--corps); letter-spacing: .02em; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.sh-badge.est-grand .sh-badge-logo { padding: 10px; border-radius: 22px; }
.sh-badge.est-grand .sh-badge-mono { border-radius: 22px; }

/* ---------------- La jauge à quatorze rangs ---------------- */
.sh-jauge { --h: 14px; padding: 36px 0 30px; position: relative; }
.sh-jauge.est-grande { --h: 20px; padding: 40px 0 34px; }
.sh-jauge-piste { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; height: var(--h); }
.sh-seg {
  border-radius: 4px; transform-origin: 50% 100%;
  background: hsl(calc(214 + var(--i) * 1.2), calc(96% - var(--i) * 3.6%), calc(70% - var(--i) * 3.7%));
  animation: sh-seg .55s var(--doux) calc(var(--k, 0) * .06s + var(--i) * .025s) both;
}
.sh-seg:first-child { border-radius: 7px 4px 4px 7px; }
.sh-seg:last-child { border-radius: 4px 7px 7px 4px; }
@keyframes sh-seg { from { opacity: 0; transform: scaleY(.2); } }
.sh-rep { position: absolute; left: var(--x); z-index: 2; display: grid; justify-items: center; transform: translateX(-50%); pointer-events: none; animation: sh-glisse .8s var(--ressort) calc(.3s + var(--k, 0) * .06s) both; }
.sh-rep b { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.sh-rep.est-pot { bottom: calc(var(--h) - 2px); }
.sh-rep.est-pot b { color: var(--pot); margin-bottom: 3px; }
.sh-rep.est-pot i { width: 4px; height: calc(var(--h) + 12px); border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px var(--bleu), 0 0 18px 2px rgba(91, 140, 255, .8); margin-bottom: -10px; }
.sh-rep.est-act { top: calc(var(--h) - 2px); }
.sh-rep.est-act b { color: var(--act); margin-top: 3px; }
.sh-rep.est-act i { width: 13px; height: 13px; margin-top: -4px; border-radius: 50%; background: var(--act); box-shadow: 0 0 0 3px rgba(4, 8, 22, .85), 0 0 14px rgba(245, 196, 81, .7); }
@keyframes sh-glisse { from { opacity: 0; transform: translateX(-50%) scale(.4); } }
.sh-jauge-echelle { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: 22px; }
.sh-jauge-echelle span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.sh-jauge-echelle span.est-p { color: #fff; }
.sh-jauge-echelle span.est-a { color: var(--act); }
.sh-jauge.est-grande .sh-jauge-echelle { margin-top: 26px; }
.sh-jauge.est-grande .sh-jauge-echelle span { font-size: 12px; }

/* ---------------- Carte héros : ranking global ---------------- */
.sh-heros {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 28px; align-items: center;
  padding: 24px 28px 6px; border-radius: 26px; border: 1px solid rgba(91, 140, 255, .32);
  background: radial-gradient(120% 140% at 0% 0%, rgba(47, 107, 255, .38), transparent 55%), radial-gradient(80% 120% at 100% 0%, rgba(245, 196, 81, .12), transparent 60%), linear-gradient(160deg, #0c1a46, #060c24 70%);
  box-shadow: 0 40px 90px -46px rgba(47, 107, 255, .75);
}
.sh-heros::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px 120px at 50% -40px, rgba(255, 255, 255, .1), transparent); }
.sh-heros-club { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sh-heros-club b { display: block; font: 600 26px/1 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.sh-heros-club span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 650; color: var(--texte-2); }
.sh-heros-t { min-width: 0; }
.sh-heros-t .surtitre { margin-bottom: 6px; color: var(--ciel); }
.sh-heros-t h2 { margin: 0; font: 600 30px/1 var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.sh-heros-t p { margin: 7px 0 0; font-size: 13.5px; color: var(--texte-2); }
.sh-heros-chiffres { display: flex; gap: 10px; }
.sh-heros-chiffres > div { min-width: 112px; padding: 10px 16px 12px; border-radius: 18px; text-align: center; background: rgba(4, 8, 22, .45); border: 1px solid var(--ligne-2); }
.sh-heros-chiffres span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.sh-heros-chiffres b { display: flex; align-items: flex-start; justify-content: center; margin-top: 2px; font: 600 58px/1 var(--titre); font-variant-numeric: tabular-nums; }
.sh-heros-chiffres b i { font-style: normal; }
.sh-heros-chiffres b small { font-size: 22px; margin-top: 6px; }
.sh-heros-chiffres .est-pot b { color: #fff; text-shadow: 0 0 28px rgba(91, 140, 255, .9); }
.sh-heros-chiffres .est-pot { border-color: rgba(91, 140, 255, .5); }
.sh-heros-chiffres .est-act b { color: var(--act); }
.sh-heros-chiffres .est-act { border-color: rgba(245, 196, 81, .4); }
.sh-heros-jauge { grid-column: 1 / -1; }

/* ---------------- Paliers Top 2…Reste ---------------- */
.sh-bandes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sh-bande { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .02) 65%); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.sh-bande-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.sh-bande-ic .sh-picto { width: 20px; height: 20px; }
.sh-bande span:not(.sh-bande-ic) { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.sh-bande b { display: block; font: 600 36px/1 var(--titre); color: #fff; font-variant-numeric: tabular-nums; }
.sh-bande small { display: block; font-size: 11.5px; color: var(--texte-3); }
.sh-bande-barre { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 1s var(--doux) calc(.2s + var(--k) * .08s); }
.sh-bande:not(.est-vu) .sh-bande-barre { transform: scaleX(0); }

/* ---------------- Graphiques ---------------- */
.sh-graphe { min-width: 0; min-height: 120px; }
.sh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-svg text { font-family: var(--corps); }
.sh-tick { font-size: 11px; fill: var(--texte-3); font-variant-numeric: tabular-nums; }
.sh-axe { font-size: 11px; font-weight: 700; fill: var(--texte-3); letter-spacing: .04em; }
.sh-grille-l { stroke: rgba(143, 179, 255, .1); stroke-width: 1; }
.sans-anim *, .sans-anim *::before, .sans-anim *::after { animation: none !important; transition: none !important; }
.sans-anim .hi-ligne, .sans-anim .hi-profil, .sans-anim .hi-conv, .sans-anim .bi-rel-prof { stroke-dashoffset: 0 !important; }
@keyframes sh-trace { to { stroke-dashoffset: 0; } }
@keyframes sh-fondu { from { opacity: 0; transform: translateY(6px); } }
@keyframes sh-monte { from { transform: scaleY(0); } }

/* ---------------- Tableaux ---------------- */
.sh-defile { max-width: 100%; overflow-x: auto; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sh-table th, .sh-table td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.sh-table thead th { position: sticky; top: 0; z-index: 1; background: #0b1636; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); border-bottom-color: var(--ligne-2); }
.sh-table thead th.est-tri { cursor: pointer; user-select: none; }
.sh-table thead th.est-tri:hover { color: var(--texte); }
.sh-table thead th[aria-sort="ascending"]::after { content: " ▲"; color: var(--ciel); }
.sh-table thead th[aria-sort="descending"]::after { content: " ▼"; color: var(--ciel); }
.sh-table tbody th { font-weight: 750; color: var(--texte); }
.sh-table td { color: var(--texte-2); }
.sh-table .nb { text-align: right; }
.sh-table .ce { text-align: center; }
.sh-table tbody tr { transition: background .15s; }
.sh-table tbody tr:hover { background: rgba(47, 107, 255, .07); }
.sh-table tr.est-co { background: rgba(47, 107, 255, .14); }
.sh-table tr.est-co th, .sh-table tr.est-co td { color: #fff; font-weight: 750; }
.sh-table tr.est-choisie { background: rgba(255, 90, 99, .1); box-shadow: inset 3px 0 0 var(--mal); }
.sh-petit { font-size: 12px; color: var(--texte-3) !important; }
.sh-pt { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.sh-rang-p { display: inline-block; min-width: 40px; padding: 2px 8px; border-radius: 8px; text-align: center; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.sh-recherche { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--ligne); }
.sh-recherche input { border: 0; outline: 0; background: none; font-size: 13.5px; min-width: 0; width: 180px; }
.sh-recherche .sh-picto { width: 15px; height: 15px; color: var(--texte-3); }
.sh-outils-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-haut-tableau { max-height: 72vh; overflow: auto; }

/* ---------------- Jauges par KPI ---------------- */
.sh-jauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 14px; }
.sh-kj { position: relative; padding: 16px 18px 4px; border-radius: 20px; background: linear-gradient(160deg, rgba(47, 107, 255, .11), rgba(255, 255, 255, .02) 60%); border: 1px solid var(--ligne); min-width: 0; }
.sh-kj > header { display: flex; align-items: flex-start; gap: 12px; }
.sh-kj > header > div { flex: 1; min-width: 0; }
.sh-kj h3 { margin: 0; font: 600 18px/1.1 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.sh-kj p { margin: 3px 0 0; font-size: 12.5px; color: var(--texte-3); }
.sh-kj-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(91, 140, 255, .16); color: var(--ciel); }
.sh-kj-chiffres { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.sh-kj-chiffres span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); line-height: 1.25; }
.sh-kj-chiffres b { display: block; margin-top: 3px; font: 600 26px/1 var(--titre); font-variant-numeric: tabular-nums; }
.sh-kj-chiffres .est-pot b { color: #fff; }
.sh-kj-chiffres .est-act b { color: var(--act); }
.sh-kj .sh-jauge { padding-top: 36px; padding-bottom: 24px; }

/* ---------------- Bulle ---------------- */
.sh-bulle {
  position: fixed; left: 0; top: 0; z-index: 70; max-width: 300px; 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;
}
.sh-bulle.est-visible { opacity: 1; }
.sh-bulle b { font: 600 15px var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.sh-bulle span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; color: var(--texte); }
.sh-bulle span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--bleu-2)); flex: none; }
.sh-bulle small { font-size: 12px; color: var(--texte-2); }

/* ============================================================
   CLASSEMENT HISTORIQUE
   ============================================================ */
.hi-g1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.hi-g2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hi-fond { fill: var(--c); fill-opacity: .055; }
.hi-fond-t { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; opacity: .85; }
.hi-limite { stroke: rgba(185, 200, 217, .3); stroke-dasharray: 4 5; }
.hi-ligne { fill: none; stroke: var(--bleu-2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sh-trace 1.4s var(--doux) .15s forwards; filter: drop-shadow(0 0 6px rgba(91, 140, 255, .55)); }
.hi-pt { cursor: pointer; }
.hi-pt-zone { fill: transparent; }
.hi-pt:hover .hi-pt-zone { fill: rgba(143, 179, 255, .06); }
.hi-pt-c { fill: var(--surface-g); stroke: var(--c); stroke-width: 2.6; animation: sh-fondu .5s var(--doux) calc(.2s + var(--k) * .05s) both; }
.hi-pt-sel { fill: none; stroke: var(--mal); stroke-width: 2.4; }
.hi-pt.est-choisi .hi-pt-c { fill: #fff; }
.hi-pt-t { font-size: 11px; font-weight: 800; fill: var(--texte); paint-order: stroke; stroke: var(--nuit); stroke-width: 3px; }
.hi-barre-zone { fill: transparent; }
.hi-barre:hover .hi-barre-zone { fill: rgba(143, 179, 255, .05); }
.hi-barre-r { fill: color-mix(in srgb, var(--c) 55%, transparent); stroke: var(--c); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; animation: sh-monte .9s var(--doux) calc(.15s + var(--k) * .08s) both; }
.hi-barre-v { font: 600 17px var(--titre); fill: #fff; }
.hi-nuage-z { fill: transparent; }
.hi-nuage-c { fill: #7d8a9b; fill-opacity: .6; transition: fill .15s; }
.hi-nuage:hover .hi-nuage-c { fill: #fff; fill-opacity: 1; }
.hi-profil { fill: none; stroke: var(--bleu-2); stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sh-trace 1.2s var(--doux) .2s forwards; pointer-events: none; }
.hi-pot-l { stroke: var(--pot); stroke-width: 1.6; stroke-dasharray: 6 5; }
.hi-sel { fill: #fff; stroke: var(--mal); stroke-width: 3; pointer-events: none; }
.hi-pot-e rect { fill: rgba(8, 16, 42, .95); stroke: var(--pot); }
.hi-pot-e text { font-size: 12px; font-weight: 800; fill: #fff; }
.hi-conv { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sh-trace 1.2s var(--doux) calc(.1s + var(--k) * .12s) forwards; }
.hi-conv-z { fill: transparent; }
.hi-conv-c { fill: var(--surface-g); stroke: var(--c); stroke-width: 2.2; }
.hi-conv-t { font-size: 10.5px; font-weight: 800; fill: var(--texte); paint-order: stroke; stroke: var(--nuit); stroke-width: 3px; }
.hi-conv-r { font: 600 13px var(--titre); fill: var(--c); }
.sh-rangs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sh-rang {
  min-width: 38px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ligne-2); background: none;
  font: 600 15px var(--titre); color: var(--texte-3); transition: background .2s, color .2s, box-shadow .2s;
}
.sh-rang.est-actif { color: #fff; background: color-mix(in srgb, var(--c) 32%, transparent); border-color: var(--c); box-shadow: 0 6px 18px -8px var(--c); }
.hi-saisons tbody tr { cursor: pointer; }
.hi-sens { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 7px; border-radius: 6px; font-size: 12px; font-weight: 900; vertical-align: 1px; }
.hi-sens.est-haut { color: #a9f0c6; background: rgba(54, 210, 122, .14); }
.hi-sens.est-bas { color: #ffd2a1; background: rgba(255, 159, 67, .15); }
.hi-sens-t { font-weight: 650; letter-spacing: .04em; text-transform: none; }
.sh-kj p .sh-sens { display: inline-block; margin-left: 6px; vertical-align: 1px; }


/* ============================================================
   CHAMPIONS
   ============================================================ */
.ch-heros {
  position: relative; overflow: hidden; margin: 6px 0 20px; padding: 30px 32px; min-height: 250px; display: flex; align-items: center;
  border-radius: 30px; border: 1px solid rgba(232, 194, 90, .3); isolation: isolate;
  background: radial-gradient(90% 140% at 100% 50%, rgba(232, 194, 90, .26), transparent 60%), radial-gradient(70% 120% at 0% 0%, rgba(47, 107, 255, .32), transparent 60%), linear-gradient(160deg, #0d1a45, #060b20 75%);
  box-shadow: 0 40px 100px -50px rgba(232, 194, 90, .55);
}
.ch-heros-bouclier {
  position: absolute; z-index: -1; right: -2%; top: 50%; height: 150%; width: auto; max-width: none; opacity: .5;
  transform: translateY(-50%) rotate(-7deg); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)) saturate(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
  animation: ch-bouclier 1.4s var(--doux) both;
}
@keyframes ch-bouclier { from { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(1.08); } }
.ch-heros-c { position: relative; display: flex; align-items: center; gap: 24px; max-width: 760px; }
.ch-heros-logo { width: 96px; height: 96px; flex: none; padding: 10px; border-radius: 26px; background: #fff; box-shadow: 0 20px 50px -18px rgba(232, 194, 90, .7); }
.ch-heros .surtitre { color: var(--or-champ); }
.ch-heros h1 { margin: 0; font: 600 clamp(36px, 4.6vw, 64px)/.92 var(--titre); text-transform: uppercase; }
.ch-heros h1 em { font-style: normal; background: linear-gradient(90deg, #f7dd8f, #c9a227 60%, #fff3c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-heros p { margin: 10px 0 12px; color: #d5def5; font-size: 15.5px; max-width: 560px; }

.ch-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ch-kpi {
  position: relative; overflow: hidden; padding: 16px 18px; border-radius: 20px; min-width: 0; border: 1px solid var(--ligne);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ton, var(--bleu)) 18%, transparent), rgba(255, 255, 255, .02) 60%);
}
.ch-kpi.est-bleu { --ton: var(--bleu-2); } .ch-kpi.est-or { --ton: var(--or-champ); } .ch-kpi.est-rouge { --ton: var(--rouge); }
.ch-kpi::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ton, var(--ligne-2)); }
.ch-kpi-ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--ton, var(--ciel)); background: color-mix(in srgb, var(--ton, var(--bleu)) 16%, transparent); }
.ch-kpi-lib { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); padding-right: 40px; }
.ch-kpi > b { display: block; margin-top: 8px; font: 600 50px/1 var(--titre); color: #fff; font-variant-numeric: tabular-nums; }
.ch-kpi.est-or > b { color: var(--or-champ); }
.ch-kpi small { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-2); }

/* Le CO en finale */
.ch-co {
  display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 24px; margin-top: 18px; padding: 22px; border-radius: 26px;
  border: 1px solid rgba(91, 140, 255, .32); background: radial-gradient(90% 120% at 0% 0%, rgba(47, 107, 255, .3), transparent 60%), linear-gradient(160deg, #0b1840, #070d24);
}
.ch-co-id { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 18px 12px; text-align: center; border-radius: 20px; background: rgba(4, 8, 22, .4); border: 1px solid var(--ligne); overflow: hidden; }
.ch-co-n { display: flex; align-items: baseline; gap: 10px; }
.ch-co-n b { font: 600 84px/1 var(--titre); color: var(--or-champ); text-shadow: 0 0 40px rgba(232, 194, 90, .5); }
.ch-co-n span { font: 600 15px/1.1 var(--titre); text-transform: uppercase; text-align: left; max-width: 130px; }
.ch-co-sous { font-size: 13px; color: var(--texte-2); }
.ch-co-brennus { width: 120px; margin-top: 8px; border-radius: 8px; transform: rotate(-4deg); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); }
.ch-co-t { margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.ch-co-finales { min-width: 0; }
.ch-co-f {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 76px; align-items: center; gap: 12px; padding: 9px 12px; margin-top: 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--ligne); animation: sh-fondu .5s var(--doux) calc(.1s + var(--k) * .06s) both;
}
.ch-co-f.est-titre { background: linear-gradient(90deg, rgba(232, 194, 90, .17), rgba(255, 255, 255, .02) 70%); border-color: rgba(232, 194, 90, .35); }
.ch-co-a { font: 600 20px var(--titre); color: #fff; }
.ch-co-f .sh-badge { font-weight: 700; color: var(--texte); }
.ch-co-s { font: 700 14px var(--corps); font-variant-numeric: tabular-nums; color: var(--texte-2); }
.ch-co-tag { justify-self: end; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); background: var(--surface-2); }
.ch-co-f.est-titre .ch-co-tag { color: #1b1403; background: linear-gradient(135deg, #f7dd8f, #c9a227); }

/* Le Bouclier année par année */
.ch-frise { display: grid; gap: 5px; }
.ch-frise-l { display: grid; grid-template-columns: 54px repeat(10, minmax(0, 1fr)); gap: 5px; align-items: center; }
.ch-frise-d { font: 600 14px var(--titre); color: var(--texte-3); letter-spacing: .04em; }
.ch-case {
  position: relative; aspect-ratio: 1.55; min-width: 0; display: grid; place-items: center; border-radius: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--fond) 62%, #0a1433); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .2s var(--ressort), box-shadow .2s;
}
.ch-case:hover { transform: translateY(-2px) scale(1.06); z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 10px 24px -10px rgba(0, 0, 0, .8); }
.ch-case img { width: 58%; height: 72%; object-fit: contain; padding: 3px; border-radius: 50%; background: #fff; aspect-ratio: 1; height: auto; max-height: 80%; }
.ch-case em { font: 800 11px var(--corps); font-style: normal; color: var(--texte); letter-spacing: .02em; }
.ch-case i { position: absolute; right: 4px; bottom: 2px; font: 700 9px var(--corps); font-style: normal; color: rgba(255, 255, 255, .55); }
.ch-case.est-co { box-shadow: inset 0 0 0 2px var(--or-champ), 0 0 20px -2px rgba(232, 194, 90, .7); }
.ch-case.est-co i { color: var(--or-champ); }
.ch-case.est-non { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 5px, transparent 5px 10px); }
.ch-case.est-vide { background: none; box-shadow: inset 0 0 0 1px dashed; border: 1px dashed rgba(143, 179, 255, .18); }
.ch-case.est-non i, .ch-case.est-vide i { position: static; color: var(--texte-3); font-size: 10px; }
.ch-case.est-hors { visibility: hidden; }
.ch-lg-co { box-shadow: inset 0 0 0 2px var(--or-champ); }
.ch-lg-non { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 4px); }
.ch-lg-vide { border: 1px dashed rgba(143, 179, 255, .4); }

.ch-g1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-g2 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.ch-kpi-t thead th { white-space: normal; }
.ch-kpi-t th, .ch-kpi-t td { padding: 9px 8px; }
.ch-barre-z { fill: transparent; }
.ch-barre:hover .ch-barre-z { fill: rgba(143, 179, 255, .05); }
.ch-barre-r { fill: var(--or-champ); fill-opacity: .85; transform-box: fill-box; transform-origin: 0 50%; animation: ch-barre .9s var(--doux) calc(.1s + var(--k) * .05s) both; }
.ch-barre.est-co .ch-barre-r { fill: var(--bleu-2); fill-opacity: 1; }
@keyframes ch-barre { from { transform: scaleX(0); } }
.ch-barre-n { font-size: 12.5px; font-weight: 700; fill: var(--texte); }
.ch-barre.est-co .ch-barre-n { fill: var(--ciel); }
.ch-barre-v { font: 600 15px var(--titre); fill: #fff; }
.ch-mono { font: 800 8px var(--corps); }
.ch-dec-t { font-weight: 700; }
.ch-dyn rect { fill: rgba(255, 255, 255, .035); }
.ch-dyn.est-plein rect { fill: color-mix(in srgb, var(--or-champ) calc(25% + var(--t) * 75%), #13204a); animation: sh-fondu .5s var(--doux) calc(var(--k) * .03s) both; }
.ch-dyn.est-plein rect.est-co { fill: color-mix(in srgb, var(--bleu-2) calc(35% + var(--t) * 65%), #13204a); }
.ch-dyn text { font: 600 13px var(--titre); fill: #1a1405; }
.ch-dyn rect.est-co + text { fill: #fff; }
.ch-dyn-n { font-size: 12px; font-weight: 700; fill: var(--texte-2); }
.ch-dyn-n.est-co { fill: var(--ciel); }
.ch-titres { font: 600 17px var(--titre); color: var(--or-champ); }
.ch-taux { position: relative; display: inline-block; min-width: 48px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(54, 210, 122, .25) calc(var(--p) * 100%), rgba(255, 255, 255, .05) 0); }
.ch-score { display: inline-block; padding: 2px 8px; border-radius: 7px; background: var(--surface-2); font-weight: 750; color: var(--texte); }
.ch-non { font-style: italic; color: var(--texte-3); }
.ch-fin .sh-badge, .ch-pal .sh-badge { color: var(--texte); font-weight: 650; }

/* Profil du champion */
.ch-resume { margin-top: 14px; padding: 16px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); font-size: 15px; color: var(--texte-2); line-height: 1.6; }
.ch-resume p { margin: 0; }
.ch-resume b { color: var(--texte); }
.ch-proche { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: 14px; }
.ch-proche .sh-picto { color: var(--or-champ); margin-top: 2px; }
.ch-or { color: var(--or-champ) !important; }
.ch-bleu { color: var(--ciel) !important; }
.ch-ecart { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: 12.5px; background: var(--surface-2); color: var(--texte-2); white-space: nowrap; }
.ch-ecart.est-bon { color: #a9f0c6; background: rgba(54, 210, 122, .15); }
.ch-ecart.est-mal { color: #ffb3b7; background: rgba(255, 90, 99, .15); }
.ch-rad-anneau { fill: none; stroke: rgba(143, 179, 255, .14); }
.ch-rad-axe { stroke: rgba(143, 179, 255, .14); }
.ch-rad-l { font-size: 11.5px; font-weight: 700; fill: var(--texte-2); }
.ch-rad-p { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; transform-box: view-box; transform-origin: 50% 51%; animation: ch-rad 1s var(--ressort) .15s both; }
.ch-rad-p.est-co { animation-delay: .35s; }
@keyframes ch-rad { from { transform: scale(.2); opacity: 0; } }
.ch-rad-pt { fill: var(--c); stroke: var(--nuit); stroke-width: 2; }
.ch-th-titre { color: var(--or-champ) !important; }
.ch-etoile { margin-right: 4px; }

/* Champion 5 ans */
.ch-5-outils { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.ch-5-outils .sh-onglets { margin-bottom: 0; }
.ch-choix { border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); }
.ch-choix summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.ch-choix summary::-webkit-details-marker { display: none; }
.ch-choix summary > span { display: inline-flex; align-items: center; gap: 9px; color: var(--texte-2); }
.ch-choix summary b { color: var(--texte); }
.ch-choix summary em { font-style: normal; font-size: 12.5px; font-weight: 750; color: var(--ciel); }
.ch-choix summary em::after { content: " ▾"; }
.ch-choix[open] summary em::after { content: " ▴"; }
.ch-choix-c { padding: 0 16px 16px; }
.ch-choix-o { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ch-choix-l { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow-y: auto; }
.ch-choix-l .sh-puce em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.ch-choix-l .sh-puce[hidden] { display: none; }
.ch-5 th, .ch-5 td { padding: 7px 6px; }
.ch-5 thead th { text-align: center; }
.ch-5 thead th:nth-child(-n+2) { text-align: left; }
.ch-5-s { font: 600 15px var(--titre) !important; letter-spacing: .04em !important; color: var(--texte) !important; border-left: 1px solid var(--ligne-2); }
.ch-5-s small { display: block; font: 600 10.5px var(--corps); letter-spacing: .04em; text-transform: none; color: var(--or-champ); }
.ch-5-sub { font-size: 9.5px !important; }
.ch-5-sub.est-champ { color: var(--or-champ) !important; }
.ch-5-sub.est-co { color: var(--ciel) !important; }
.ch-5-moy { background: rgba(47, 107, 255, .07); }
.ch-5-k { white-space: normal !important; min-width: 170px; max-width: 260px; font-weight: 700 !important; }
.ch-pill { display: inline-block; min-width: 54px; padding: 3px 9px; border-radius: 9px; font-weight: 800; font-size: 12.5px; text-align: center; color: var(--texte-2); background: var(--surface-2); }
.ch-pill.est-champ { color: #f7dd8f; background: rgba(232, 194, 90, .14); box-shadow: inset 0 0 0 1px rgba(232, 194, 90, .3); }
.ch-pill.est-bon { color: #a9f0c6; background: rgba(54, 210, 122, .16); box-shadow: inset 0 0 0 1px rgba(54, 210, 122, .32); }
.ch-pill.est-mal { color: #ffb3b7; background: rgba(255, 90, 99, .16); box-shadow: inset 0 0 0 1px rgba(255, 90, 99, .32); }
.ch-pill.ch-b13, .sh-leg i.ch-b13 { color: #7debd6; background: rgba(95, 224, 200, .16); }
.ch-pill.ch-b46, .sh-leg i.ch-b46 { color: #ffe08a; background: rgba(245, 196, 81, .16); }
.ch-pill.ch-b79, .sh-leg i.ch-b79 { color: #ffc28a; background: rgba(255, 159, 67, .17); }
.ch-pill.ch-b1014, .sh-leg i.ch-b1014 { color: #ffa3b4; background: rgba(255, 122, 147, .17); }
.sh-leg i.ch-b13 { background: #5fe0c8; } .sh-leg i.ch-b46 { background: #f5c451; } .sh-leg i.ch-b79 { background: #ff9f43; } .sh-leg i.ch-b1014 { background: #ff7a93; }


/* ============================================================
   BILAN
   ============================================================ */
.bi-source { display: flex; align-items: flex-start; gap: 8px; margin: 0; flex: 1 1 320px; font-size: 12.5px; color: var(--texte-3); line-height: 1.45; }
.bi-source .sh-picto { width: 16px; height: 16px; color: var(--ciel); margin-top: 1px; }
.bi-mise { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bi-page .entete h1 { font-size: clamp(30px, 3.4vw, 48px); }
.bi-echelle { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap; margin-bottom: 6px; }

.bi-kj .sh-jauge { padding-bottom: 20px; }
.bi-sens { display: flex; justify-content: space-between; gap: 10px; padding: 0 0 12px; font-size: 11px; font-weight: 650; color: var(--texte-3); }
.bi-sous { margin: 6px 0 0; font-size: 13px; color: var(--texte-3); }
.bi-anneau { fill: none; stroke: rgba(143, 179, 255, .14); }
.bi-anneau-t { font-size: 9.5px; font-weight: 700; fill: var(--texte-3); }
.bi-axe { stroke: rgba(143, 179, 255, .16); }
.bi-poly { stroke-linejoin: round; transform-box: view-box; transform-origin: 50% 52%; }
.bi-poly.est-act { fill: rgba(245, 196, 81, .08); stroke: var(--act); stroke-width: 2; stroke-dasharray: 6 5; animation: ch-rad .9s var(--ressort) .1s both; }
.bi-poly.est-pot { fill: rgba(91, 140, 255, .22); stroke: var(--bleu-2); stroke-width: 2.6; animation: ch-rad 1s var(--ressort) .3s both; filter: drop-shadow(0 0 10px rgba(91, 140, 255, .45)); }
.bi-pt { fill: #fff; stroke: var(--bleu); stroke-width: 2.4; }
.bi-lab { font: 600 13px var(--titre); fill: var(--texte); letter-spacing: .04em; text-transform: uppercase; }
.bi-lab-r { font-size: 12px; font-weight: 800; fill: var(--pot); }
.bi-lg-pot { background: var(--bleu-2); border-radius: 50% !important; box-shadow: 0 0 0 2px #fff inset; }
.bi-lg-act { background: var(--act); border-radius: 50% !important; }
.bi-rel-prof { fill: none; stroke: var(--bleu-2); stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sh-trace 1.2s var(--doux) .2s forwards; pointer-events: none; }
.bi-moi { fill: var(--mal) !important; fill-opacity: 1 !important; }
.bi-guide { stroke: rgba(143, 179, 255, .45); stroke-dasharray: 5 5; }
.bi-sel-pot { fill: var(--bleu-2); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(91, 140, 255, .9)); }
.bi-sel-act { fill: var(--act); stroke: var(--nuit); stroke-width: 2; }
.bi-sel-t { font-size: 11px; font-weight: 800; letter-spacing: .1em; paint-order: stroke; stroke: var(--nuit); stroke-width: 3px; }
.bi-sel-t.est-pot { fill: var(--pot); }
.bi-sel-t.est-act { fill: var(--act); }
.bi-r2 { font-size: 12px; font-weight: 800; fill: var(--texte-2); }
.bi-methode { display: flex; gap: 14px; margin-top: 24px; padding: 16px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); font-size: 13.5px; color: var(--texte-2); line-height: 1.55; }
.bi-methode .sh-picto { width: 26px; height: 26px; color: var(--ciel); flex: none; }
.bi-methode b { display: block; margin-bottom: 4px; font: 600 15px var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--texte); }
.sh-filtres .liste-deroulante select:disabled { opacity: .8; cursor: default; }

/* ============================================================
   QUALIFICATION
   ============================================================ */
.qu-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--ligne); font-size: 13.5px; color: var(--texte-2); }
.qu-note .sh-picto { color: var(--ciel); margin-top: 1px; }
.qu-g1 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.qu-t th, .qu-t td { padding: 8px 8px; font-size: 13px; }
.qu-rangs th, .qu-rangs td { padding: 8px 7px; font-size: 12.5px; }
.qu-marche-z { fill: transparent; }
.qu-marche:hover .qu-marche-z { fill: rgba(143, 179, 255, .05); }
.qu-marche-r { fill: color-mix(in srgb, var(--c) 45%, transparent); stroke: var(--c); stroke-width: 1.6; transform-box: fill-box; transform-origin: 50% 100%; animation: sh-monte .9s var(--doux) calc(.1s + var(--k) * .08s) both; }
.qu-marche-v { font: 600 18px var(--titre); fill: #fff; }
.qu-marche-t { font-weight: 800; fill: var(--texte-2); }
.qu-statut { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--ligne-2); }
.qu-statut .sh-picto { width: 30px; height: 30px; flex: none; }
.qu-statut b { display: block; font: 600 19px var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.qu-statut span { display: block; font-size: 13.5px; color: var(--texte-2); }
.qu-statut.est-pret { background: linear-gradient(110deg, rgba(54, 210, 122, .16), rgba(255, 255, 255, .02) 70%); border-color: rgba(54, 210, 122, .35); }
.qu-statut.est-pret .sh-picto { color: var(--bon); }
.qu-statut.est-attente { background: linear-gradient(110deg, rgba(245, 196, 81, .14), rgba(255, 255, 255, .02) 70%); }
.qu-statut.est-attente .sh-picto { color: var(--act); }
.qu-resume { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.qu-carte { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); min-width: 0; }
.qu-carte span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.qu-carte b { display: block; margin-top: 6px; font: 600 38px/1 var(--titre); font-variant-numeric: tabular-nums; }
.qu-carte small { display: block; margin-top: 4px; font-size: 12px; color: var(--texte-3); }
.qu-carte.est-prim { background: linear-gradient(150deg, rgba(47, 107, 255, .3), rgba(255, 255, 255, .02) 70%); border-color: rgba(91, 140, 255, .4); }
.qu-carte.est-act b { color: var(--act); }
.qu-matchs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qu-match { display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: baseline; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); border-top: 3px solid var(--ton); animation: sh-fondu .5s var(--doux) calc(var(--k) * .05s) both; }
.qu-match.est-V { --ton: var(--bon); } .qu-match.est-N { --ton: var(--texte-3); } .qu-match.est-D { --ton: var(--mal); }
.qu-match-j { font: 600 15px var(--titre); }
.qu-match-r { justify-self: end; font-size: 11px; font-weight: 900; color: var(--ton); }
.qu-match-s { font-size: 12.5px; font-weight: 750; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.qu-match-p { justify-self: end; font-size: 12px; font-weight: 800; color: var(--act); }
.qu-probas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.qu-palier {
  position: relative; display: grid; gap: 10px; padding: 16px 16px 14px; border-radius: 22px; min-width: 0; cursor: default;
  background: linear-gradient(165deg, color-mix(in srgb, var(--ton, var(--c)) 16%, transparent), rgba(255, 255, 255, .02) 65%); border: 1px solid var(--ligne);
  border-top: 3px solid var(--ton, var(--ligne-2)); transition: transform .3s var(--ressort), box-shadow .3s;
}
.qu-palier:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px var(--ton, #000); }
.qu-palier.est-bon { --ton: var(--bon); } .qu-palier.est-mal { --ton: var(--mal); } .qu-palier.est-moy { --ton: var(--moy); } .qu-palier.est-vide { opacity: .55; }
.qu-palier header { display: flex; align-items: center; gap: 9px; min-height: 36px; }
.qu-palier header b { font: 600 15px/1.1 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.qu-palier-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.qu-anneau { position: relative; width: 116px; height: 116px; margin: 4px auto 0; }
.qu-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qu-an-f { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 9; }
.qu-an-v { fill: none; stroke: var(--ton, var(--c)); stroke-width: 9; stroke-linecap: round; animation: qu-anneau 1.2s var(--doux) calc(.2s + var(--k) * .08s) both; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ton, var(--c)) 70%, transparent)); }
@keyframes qu-anneau { from { stroke-dasharray: 0 264; } }
.qu-anneau-v { position: absolute; inset: 0; display: grid; place-items: center; }
.qu-anneau-v i { font: 600 38px/1 var(--titre); font-style: normal; color: var(--ton, #fff); font-variant-numeric: tabular-nums; }
.qu-anneau-v small { position: absolute; margin: -14px 0 0 54px; font: 600 15px var(--titre); color: var(--texte-2); }
.qu-barre { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.qu-barre i { display: block; height: 100%; width: 100%; border-radius: 6px; background: var(--ton, var(--c)); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 1.1s var(--doux) .3s; }
.qu-palier:not(.est-vu) .qu-barre i { transform: scaleX(0); }
.qu-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; align-items: end; height: 22px; }
.qu-kpis i { display: block; height: calc(3px + var(--p) * 19px); border-radius: 2px; background: color-mix(in srgb, var(--ton, var(--c)) 70%, transparent); }
.qu-palier-n { font-size: 11.5px; color: var(--texte-3); line-height: 1.4; }
@media (min-width: 1300px) {
  .qu-probas { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .qu-palier { padding: 14px 12px 12px; }
  .qu-palier header { align-items: flex-start; min-height: 44px; }
  .qu-palier header b { font-size: 13.5px; }
  .qu-palier-ic { width: 28px; height: 28px; }
  .qu-anneau { width: 104px; height: 104px; }
  .qu-anneau-v i { font-size: 34px; }
  .qu-anneau-v small { margin: -13px 0 0 48px; }
}

/* ============================================================
   ÉCRANS MOYENS ET TÉLÉPHONE
   ============================================================ */
@media (max-width: 1240px) {
  .bi-mise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qu-g1 { grid-template-columns: minmax(0, 1fr); }
  .qu-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-g1, .ch-g2 { grid-template-columns: minmax(0, 1fr); }
  .sh-heros { grid-template-columns: auto minmax(0, 1fr); }
  .sh-heros-chiffres { grid-column: 1 / -1; }
  .sh-bandes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hi-g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .hi-g1 { grid-template-columns: minmax(0, 1fr); }
  .bi-mise { grid-template-columns: minmax(0, 1fr); }
  .ch-co { grid-template-columns: minmax(0, 1fr); }
  .sh-entete-d { margin-left: 0; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .sh-carte { padding: 16px 14px 14px; border-radius: 18px; }
  .sh-carte-t h2 { font-size: 19px; }
  .sh-section h2 { font-size: 21px; }
  .sh-entete-logo { width: 56px; height: 56px; border-radius: 16px; }
  .sh-filtres { padding: 12px; gap: 10px; }
  .sh-liste { flex: 1 1 100%; }
  .sh-liste .liste-deroulante, .sh-liste .liste-deroulante select { width: 100%; }
  .sh-heros { padding: 18px 16px 2px; gap: 12px; border-radius: 22px; grid-template-columns: minmax(0, 1fr); }
  .sh-heros-club b { font-size: 21px; }
  .sh-heros-t h2 { font-size: 23px; }
  .sh-heros-chiffres > div { flex: 1; min-width: 0; }
  .sh-heros-chiffres b { font-size: 44px; }
  .sh-bandes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sh-bande { padding: 12px; gap: 9px; }
  .sh-bande-ic { width: 32px; height: 32px; }
  .sh-bande b { font-size: 28px; }
  .sh-jauges { grid-template-columns: minmax(0, 1fr); }
  .sh-kj-chiffres b { font-size: 22px; }
  .sh-jauge-echelle span { font-size: 9.5px; }
  .sh-jauge-piste { gap: 2px; }
  .sh-jauge-echelle { gap: 2px; }
  .sh-rep b { font-size: 8.5px; letter-spacing: .08em; }
  .sh-table { font-size: 12.5px; }
  .sh-table th, .sh-table td { padding: 8px 7px; }
  .sh-court { display: inline; }
  .sh-long { display: none; }
  .sh-recherche input { width: 120px; }
  .ch-heros { padding: 20px 16px; min-height: 0; border-radius: 22px; }
  .ch-heros-c { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ch-heros-logo { width: 64px; height: 64px; border-radius: 18px; }
  .ch-heros-bouclier { height: 110%; right: -30%; opacity: .28; }
  .ch-kpis { gap: 10px; }
  .ch-kpi { padding: 13px; }
  .ch-kpi > b { font-size: 38px; }
  .ch-kpi-ic { display: none; }
  .ch-kpi-lib { padding-right: 0; font-size: 10px; letter-spacing: .08em; }
  .ch-co { padding: 14px; gap: 14px; border-radius: 20px; }
  .ch-co-n b { font-size: 64px; }
  .ch-co-f { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .ch-co-tag { display: none; }
  .ch-co-a { font-size: 17px; }
  .ch-frise, .ch-frise-l { gap: 3px; }
  .ch-frise-l { grid-template-columns: 34px repeat(10, minmax(0, 1fr)); }
  .ch-frise-d { font-size: 11px; }
  .ch-case { aspect-ratio: 1; border-radius: 6px; }
  .ch-case img { width: 74%; padding: 2px; }
  .ch-case em { font-size: 8px; }
  .ch-case i { display: none; }
  .ch-case.est-non i, .ch-case.est-vide i { display: block; font-size: 8px; }
  .ch-resume { padding: 14px; font-size: 14px; }
  .ch-choix summary { flex-wrap: wrap; }
  .ch-5-dom { display: none; }
  .bi-sens { font-size: 10px; }
  .bi-methode { padding: 14px; font-size: 13px; }
  .bi-echelle { display: none; }
  .qu-resume { gap: 10px; }
  .qu-carte b { font-size: 30px; }
  .qu-probas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qu-palier { padding: 12px 11px; border-radius: 18px; }
  .qu-palier header b { font-size: 13px; }
  .qu-palier-ic { display: none; }
  .qu-anneau { width: 96px; height: 96px; }
  .qu-anneau-v i { font-size: 30px; }
  .qu-anneau-v small { margin: -12px 0 0 44px; font-size: 12px; }
  .qu-statut { padding: 14px; }
  .qu-statut b { font-size: 16px; }
  .ch-5-k { min-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .hi-ligne, .hi-profil, .hi-conv { stroke-dashoffset: 0; }
}
.allege .sh-heros { box-shadow: none; }