/* =====================================================================
   TOP KILLERS v5 — sous l'en-tête, sur pierre claire.
   Le podium : trois stèles noires de hauteurs différentes debout sur un socle ; le portrait en
   haut (noir et blanc, il prend sa couleur au survol), le rang géant à cheval sur son bord, le
   pseudo en fonte large, les kills en chiffres condensés. La valeur du premier est la seule
   touche de lime de la page. Le reste du peloton : des lignes réglées sur une dalle de verre
   dépoli (le monde 3D passe derrière). Rien ici ne dépend d'une feuille d'origine.
   ===================================================================== */
.tk5{position:relative;overflow-x:clip;padding:clamp(34px,4vw,64px) 0 clamp(40px,5vw,84px);color:#0a0a0a}

/* ------------------------------------------------------------ les vues (Elo / Killers / Records) */
.tk5-vues{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(30px,4.4vw,68px)}
.tk5-vues a{padding:12px 16px;border-radius:12px;color:#0a0a0a;text-decoration:none;background:rgba(243,244,241,.86);box-shadow:inset 0 0 0 1.5px #0a0a0a;
  font-family:var(--f-mono);font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;transition:background 240ms var(--v5-masse),color 240ms var(--v5-masse)}
.tk5-vues a:hover,.tk5-vues a.on{color:#f1f1ec;background:#0a0a0a}
.tk5-vues a:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}

/* ------------------------------------------------------------ le podium */
.tk5-scene{position:relative}
.tk5-pod{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.24fr) minmax(0,1fr);gap:clamp(10px,1.4vw,20px);align-items:end}
.tk5-st{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:6px;color:#f1f1ec;
  background:url("/static/players/roche.webp") center/460px,linear-gradient(180deg,#1c1c1c,#060606);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 5px rgba(10,10,10,.06),0 50px 60px -44px rgba(0,0,0,.8);
  transform:perspective(1200px) rotateX(calc(var(--rx,0deg)*.45)) rotateY(calc(var(--ry,0deg)*.45));transform-origin:50% 100%;transition:transform 260ms cubic-bezier(.2,.7,.2,1)}
.tk5-st--1{order:2;min-height:clamp(480px,47vw,660px);border-radius:30px 30px 6px 6px}
.tk5-st--2{order:1;min-height:clamp(400px,38.5vw,540px);border-radius:30px 8px 6px 6px}
.tk5-st--3{order:3;min-height:clamp(340px,32.5vw,456px);border-radius:8px 30px 6px 6px}
.tk5-st__haut{position:relative;flex:1;min-height:150px}
.tk5-st__por{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:24px 24px 6px 6px;background:radial-gradient(90% 90% at 50% 20%,#262626,#0a0a0a)}
.tk5-st--2 .tk5-st__por{border-radius:24px 4px 6px 6px}
.tk5-st--3 .tk5-st__por{border-radius:4px 24px 6px 6px}
.tk5-st__por img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.14) brightness(.78);transform:scale(1.03);
  transition:filter 700ms var(--v5-masse),transform 900ms var(--v5-masse)}
.tk5-st:hover .tk5-st__por img{filter:none;transform:scale(1.08)}
.tk5-st__por b{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(54px,7vw,104px);letter-spacing:-.05em;color:rgba(241,241,236,.86)}
.tk5-st__por::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(6,6,6,.82));pointer-events:none}
.tk5-st__rang{position:absolute;z-index:2;left:10px;bottom:-.17em;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(96px,11.5vw,170px);line-height:.8;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(241,241,236,.78);pointer-events:none}
.tk5-st--1 .tk5-st__rang{font-size:clamp(130px,16.5vw,244px);color:#f1f1ec;-webkit-text-stroke:0}
.tk5-st__bas{position:relative;padding:clamp(26px,3.2vw,48px) clamp(10px,1.2vw,18px) clamp(10px,1.2vw,16px)}
.tk5-st__nom{display:block;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(19px,2.1vw,31px);line-height:.94;letter-spacing:-.045em;text-transform:uppercase;
  color:#f1f1ec;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk5-st--1 .tk5-st__nom{font-size:clamp(26px,3.1vw,46px)}
a.tk5-st__nom:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tk5-st__chiffres{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:12px;padding-top:14px;border-top:1px solid rgba(241,241,236,.16)}
.tk5-st .v5-rel{display:block;font-style:normal;color:rgba(241,241,236,.58)}
.tk5-st__kills b{display:block;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(56px,6vw,88px);line-height:.8;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tk5-st__kills i{margin-top:8px}
.tk5-st--1 .tk5-st__kills b{font-size:clamp(88px,10vw,148px);color:var(--v5-lime)}
.tk5-st__kd{text-align:right}
.tk5-st__kd b{display:block;margin-top:3px;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:.9;font-variant-numeric:tabular-nums}
/* le socle : une dalle noire graduée sous les trois stèles */
.tk5-sol{position:relative;z-index:1;height:18px;margin:6px -1.4% 0;border-radius:4px 4px 16px 16px;
  background:repeating-linear-gradient(90deg,rgba(241,241,236,.3) 0 1px,transparent 1px 14px) 14px 100%/calc(100% - 28px) 6px no-repeat,#0a0a0a;
  box-shadow:0 30px 40px -24px rgba(0,0,0,.7)}
.tk5-pod__roche{position:absolute;z-index:0;height:auto;pointer-events:none;will-change:transform;transform:translate3d(0,var(--fy,0px),0) rotate(var(--rot,0deg))}
.tk5-pod__roche--a{right:-9.5%;bottom:-30px;width:clamp(140px,17vw,250px);--rot:14deg;filter:drop-shadow(0 26px 22px rgba(0,0,0,.45))}
.tk5-pod__roche--b{left:-8%;bottom:-26px;width:clamp(100px,12vw,180px);--rot:-9deg}

/* ------------------------------------------------------------ la dalle de verre clair */
.tk5-verre{position:relative;isolation:isolate;margin-top:clamp(70px,8vw,120px);padding:clamp(18px,2.4vw,34px) clamp(14px,2.4vw,36px) clamp(18px,2.4vw,34px);
  border-radius:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px) 8px;
  background:linear-gradient(180deg,rgba(243,244,241,.9),rgba(226,228,224,.84));-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -2px 0 rgba(10,10,10,.06),0 0 0 1px rgba(10,10,10,.08),0 40px 60px -46px rgba(0,0,0,.5)}
.tk5-verre::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--v5-grain);filter:invert(1);opacity:.16;pointer-events:none}
.tk5-verre .v5-rel{color:rgba(10,10,10,.62)}
.tk5-verre .v5-rel b{color:#0a0a0a}
.tk5-vide{margin-top:0;font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2vw,26px);line-height:1.28;letter-spacing:-.015em;color:#0a0a0a}
.tk5-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 clamp(16px,2vw,26px)}
.tk5-tete p{margin:0 0 6px}
.tk5-tete__t{margin:0;font-family:var(--f-display);font-weight:760;font-size:clamp(24px,2.9vw,42px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;color:#0a0a0a}
.tk5-tete__idx{font-family:var(--f-chiffre);font-weight:800;font-size:clamp(18px,1.8vw,24px);line-height:1;letter-spacing:.02em;color:rgba(10,10,10,.5);white-space:nowrap}
.tk5-cols,.tk5-l{display:grid;grid-template-columns:clamp(50px,6vw,84px) minmax(0,1fr) clamp(56px,9vw,120px) clamp(64px,10vw,130px);align-items:center;gap:12px}
.tk5-cols{padding:0 10px 8px;border-bottom:1.5px solid #0a0a0a}
.tk5-cols span:nth-child(n+3){text-align:right}
.tk5-liste{list-style:none;margin:0;padding:0}
.tk5-l{position:relative;isolation:isolate;padding:9px 10px;border-bottom:1px solid rgba(10,10,10,.16);color:#0a0a0a;transition:color 360ms var(--v5-masse)}
.tk5-l::before{content:"";position:absolute;inset:0;z-index:-1;background:#0a0a0a;transform:scaleY(0);transform-origin:50% 100%;transition:transform 420ms var(--v5-masse)}
.tk5-l:hover{color:#f1f1ec}
.tk5-l:hover::before{transform:scaleY(1)}
.tk5-l__rang{font-family:var(--f-chiffre);font-weight:800;font-size:clamp(30px,3.2vw,44px);line-height:.9;opacity:.4;font-variant-numeric:tabular-nums;transition:opacity 360ms var(--v5-masse)}
.tk5-l:hover .tk5-l__rang{opacity:1}
.tk5-l__qui{display:flex;align-items:center;gap:14px;min-width:0}
.tk5-l__por{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border-radius:12px 12px 12px 4px;color:#f1f1ec;background:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tk5-l__por img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter 500ms var(--v5-masse)}
.tk5-l:hover .tk5-l__por img{filter:none}
.tk5-l__por b{font-family:var(--f-display);font-weight:760;font-size:15px;letter-spacing:-.02em}
.tk5-l__nom{font-family:var(--f-display);font-weight:700;font-size:clamp(15px,1.5vw,19px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:inherit;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.tk5-l__nom:hover{text-decoration:underline;text-underline-offset:4px}
.tk5-l__kd{font-family:var(--f-chiffre);font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1;text-align:right;opacity:.62;font-variant-numeric:tabular-nums}
.tk5-l__kills{font-family:var(--f-chiffre);font-weight:800;font-size:clamp(30px,3.2vw,44px);line-height:.9;text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ téléphone */
@media (max-width:820px){
  .tk5-pod{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .tk5-st--1{order:0;grid-column:1 / -1;min-height:0}
  .tk5-st--1 .tk5-st__haut{min-height:250px}
  .tk5-st--2,.tk5-st--3{order:1;min-height:0}
  .tk5-st--2 .tk5-st__haut,.tk5-st--3 .tk5-st__haut{min-height:132px}
  .tk5-st--3{margin-top:26px}
  .tk5-st--2 .tk5-st__chiffres,.tk5-st--3 .tk5-st__chiffres{flex-direction:column;align-items:flex-start;gap:10px}
  .tk5-st--2 .tk5-st__kd,.tk5-st--3 .tk5-st__kd{display:flex;align-items:baseline;gap:8px;text-align:left}
  .tk5-st--2 .tk5-st__kd b,.tk5-st--3 .tk5-st__kd b{margin:0}
  .tk5-sol{margin-inline:0}
  .tk5-pod__roche--a{z-index:2;right:-9%;bottom:-40px}
  .tk5-pod__roche--b{display:none}
  .tk5-verre{margin-top:64px}
  .tk5-cols,.tk5-l{grid-template-columns:32px minmax(0,1fr) 42px 50px;gap:8px}
  .tk5-cols{padding-inline:4px}
  .tk5-l{padding:8px 4px}
  .tk5-l__rang{font-size:25px}
  .tk5-l__kills{font-size:28px}
  .tk5-l__kd{font-size:16px}
  .tk5-l__nom{font-size:14px}
  .tk5-l__por{width:32px;height:32px;border-radius:9px 9px 9px 3px}
  .tk5-l__qui{gap:9px}
}
/* ------------------------------------------------------------ mouvement
   Les stèles montent du socle l'une après l'autre (propriété translate : l'inclinaison au
   pointeur garde transform) ; au survol, le rang saute en tranches de parasites. */
@keyframes tk5-monte{from{translate:0 70px;opacity:0}to{translate:0 0;opacity:1}}
.tk5-st{animation:tk5-monte 900ms var(--v5-sortie) both}
.tk5-st--1{animation-delay:120ms}
.tk5-st--2{animation-delay:260ms}
.tk5-st--3{animation-delay:400ms}
@keyframes tk5-parasite{
  0%{clip-path:inset(10% 0 66% 0);transform:translateX(-12px)}
  25%{clip-path:inset(56% 0 20% 0);transform:translateX(10px)}
  50%{clip-path:inset(30% 0 48% 0);transform:translateX(-7px)}
  75%{clip-path:inset(78% 0 4% 0);transform:translateX(11px)}
  100%{clip-path:inset(0);transform:none}}
.tk5-st:hover .tk5-st__rang{animation:tk5-parasite 420ms steps(1) 1}
@media (prefers-reduced-motion:reduce){ .tk5-st{transition:none;transform:none;animation:none} .tk5-st:hover .tk5-st__rang{animation:none} }

/* contraste (audit du 07/10/2026) : les rangs au repos étaient à 2,5:1 (3:1 demandé pour un grand chiffre),
   l'intitulé « rangs 04+ » à 3,5:1 (4,5:1 demandé) */
.tk5-l__rang{opacity:.56}
.tk5-l:hover .tk5-l__rang{opacity:1}
.tk5-tete__idx{color:rgba(10,10,10,.68)}