/* ═══════════════ LES ACCÈS (conception-ranked/acces/SPEC.md) ═══════════════
   Max : « le classement, il doit être accessible depuis la page Ranked » et « salle d'entraînement, accessible depuis le
   menu, mais de façon très subtile, parce que le menu est déjà très bien : mets-le peut-être dans les parties
   personnalisées ».
   1. « Classement › » dans l'en-tête du menu Ranked (#hubRkTop) et « Entraînement » dans celui des Parties perso
      (#hubTrain) : deux petits boutons de la même forme ; le premier blanc comme les outils du haut, le second discret
      (la nuit translucide, il ne s'éclaire qu'au survol — l'or reste à l'action principale).
   2. La pastille de place du lobby Ranked (#hubPlatePos), devenue un bouton : « 🏆 10e › », ou « 🏆 Classement › ».
   3. La fenêtre du classement (#cpTop, js/br/compte.js) dans la nuit du profil : encre épaisse, ombres décalées, l'or
      pour l'action, rien sous 12 px. Ces règles recouvrent celles de css/compte.css sous #cpTop seulement.
   Mesuré en --u comme css/hub.css (10 px à 1 920 × 1 080) ; au téléphone couché (520 px de haut ou moins), des pixels ;
   « moins de mouvement » respecté. */

/* ─── 1. LES PETITS BOUTONS DES EN-TÊTES DU MENU ─── */
.hp-hb { position: relative; flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.7); height: calc(var(--u) * 5.2); min-height: 44px; box-sizing: border-box;
  padding: 0 calc(var(--u) * 1.5) 0 calc(var(--u) * 1); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); cursor: pointer; white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.12s ease, color 0.12s ease; }
.hp-hb[hidden] { display: none; }
.hp-hb svg { flex: none; width: calc(var(--u) * 3); height: calc(var(--u) * 3); min-width: 22px; min-height: 22px; }
.hp-hb b { font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
.hp-hb:focus-visible { outline: 3px solid #FFD23F; outline-offset: 2px; }
/* « Classement › » : le blanc des outils du haut */
.hp-top { background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
.hp-top i { font: italic 800 max(16px, calc(var(--u) * 2.6))/1 var(--fc); margin: -0.12em 0 0 calc(var(--u) * 0.1); }
.hp-top:hover { background: #fff; transform: translate(-1px, -1px); box-shadow: calc(var(--u) * 0.5 + 1px) calc(var(--u) * 0.5 + 1px) 0 var(--ink); }
.hp-top:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* « Entraînement » : discret — la nuit translucide, la petite cible ; il s'éclaire au survol */
.hp-train { background: rgba(10, 7, 26, 0.55); color: rgba(255, 255, 255, 0.86); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.45); }
.hp-train b { font-size: max(13px, calc(var(--u) * 1.8)); }
.hp-train svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); min-width: 20px; min-height: 20px; }
.hp-train:hover { background: rgba(10, 7, 26, 0.86); color: #fff; transform: translate(-1px, -1px); box-shadow: calc(var(--u) * 0.3 + 1px) calc(var(--u) * 0.3 + 1px) 0 rgba(0, 0, 0, 0.5); }
.hp-train:active { transform: translate(1px, 1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.45); }

/* ─── 2. LA PASTILLE DE PLACE DU LOBBY RANKED : un bouton ─── */
.hlp-pos { position: relative; margin: 0; cursor: pointer; box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink); transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease; }
/* (la pastille est petite — 17 px de haut au téléphone : la zone d'appui déborde, invisible) */
.hlp-pos::before { content: ''; position: absolute; inset: -10px -6px; }
.hlp-pos:hover { background: #FFDC5E; transform: translateY(-1px); box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25 + 2px) 0 var(--ink); }
.hlp-pos:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }
.hlp-pos:focus-visible { outline: 3px solid #FFD23F; outline-offset: 2px; }
.hlp-pos-t { text-transform: uppercase; letter-spacing: 0.5px; }
.hlp-pos .hlp-go { font-style: normal; font-weight: 800; margin-left: 0.15em; }
/* (un panneau étroit — le 2 VS 2, les petits téléphones — : la coupe, la place et « › » ; le mot « Classement » s'efface) */
@container hlplate (max-width: 289px) {
  .hlp-pos-t { display: none; }
}

/* ─── 3. LA FENÊTRE DU CLASSEMENT, DANS LA NUIT DU PROFIL ─── */
#cpTop { --u: clamp(6px, min(0.521vw, 0.926vh), 15px); --out: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink); }
#cpTop .cp-top-box { width: min(100%, calc(var(--u) * 120)); max-width: 100%; max-height: 100%; box-sizing: border-box; gap: max(6px, calc(var(--u) * 0.9)); padding: 0 calc(var(--u) * 2.6) calc(var(--u) * 2.2);
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink); color: #fff;
  background: radial-gradient(ellipse 70% 60% at 30% 30%, rgba(120, 90, 255, 0.22), transparent 70%), linear-gradient(160deg, #2E2368, #17123F 58%, #0D0A25); }
#cpTop .sh { display: none; }
/* la barre du haut : le titre et la saison, les onglets Ranked, les autres, fermer — sur une ligne (elle l'emporte sur le
   bandeau or du téléphone, css/tel.css : un identifiant) */
#cpTop .cp-top-box > .cp-head { flex: none; gap: calc(var(--u) * 1.2); margin: 0 calc(var(--u) * -2.6) calc(var(--u) * 0.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6) calc(var(--u) * 1.2) calc(var(--u) * 2.4);
  border-bottom: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2.4)), linear-gradient(#3A2C86, #241A5C); }
#cpTop .cp-top-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.5); }
#cpTop .cp-head h2 { flex: none; margin: 0; padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; font: italic 800 max(26px, calc(var(--u) * 4.6))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; text-shadow: var(--out), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); white-space: nowrap; overflow: visible; }
#cpTop #cpTopSaison { font: 700 max(12px, calc(var(--u) * 1.5))/1.1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: #FFE27A; white-space: nowrap; }
#cpTop #cpTopSaison[hidden] { display: none; }
/* les onglets : deux groupes côte à côte ; Ranked choisi : l'or sur l'encre ; les autres : l'encre sur l'or */
#cpTop .cp-tabs { flex: none; display: inline-flex; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: var(--card); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); overflow: hidden; }
#cpTop .cp-tabs button { height: max(40px, calc(var(--u) * 5)); padding: 0 calc(var(--u) * 1.6); border: 0; border-left: calc(var(--u) * 0.3) solid var(--ink); border-radius: 0; background: none; color: var(--ink);
  font: italic 800 max(15px, calc(var(--u) * 2))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
#cpTop .cp-tabs button:first-child { border-left: 0; }
#cpTop .cp-tabs button:hover { background: #fff; }
#cpTop .cp-tabs button[aria-pressed="true"], #cpTop .cp-tabs button[aria-pressed="true"]:hover { background: #FFD23F; color: var(--ink); }
#cpTop .cp-tabs-rk button[aria-pressed="true"], #cpTop .cp-tabs-rk button[aria-pressed="true"]:hover { background: var(--ink); color: #FFD23F; }
#cpTop .cp-tabs button:focus-visible { outline: 3px solid #FFD23F; outline-offset: -5px; }
#cpTop .cp-head .cp-x { flex: none; width: max(44px, calc(var(--u) * 5.4)); height: max(44px, calc(var(--u) * 5.4)); border-width: calc(var(--u) * 0.35); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); font-size: max(22px, calc(var(--u) * 2.8)); }
/* les lignes : la nuit claire, l'encre de 3 px, l'ombre décalée ; au survol, la ligne se soulève */
#cpTop .cp-rows { gap: max(5px, calc(var(--u) * 0.6)); }
#cpTop .cp-r { grid-template-columns: max(42px, calc(var(--u) * 4.6)) max(40px, calc(var(--u) * 4.4)) minmax(0, 1fr) auto minmax(150px, auto); min-height: max(46px, calc(var(--u) * 5.6)); border: 3px solid var(--ink); border-radius: max(11px, calc(var(--u) * 1.2)); background: rgba(255, 255, 255, 0.07); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
#cpTop .cp-r:hover, #cpTop .cp-r:focus-visible { transform: translate(-2px, -2px); background: rgba(255, 255, 255, 0.12); box-shadow: 5px 5px 0 var(--ink); outline: none; }
#cpTop .cp-r:focus-visible { box-shadow: inset 0 0 0 2px #fff, 5px 5px 0 var(--ink); }
#cpTop .cp-pos { height: max(34px, calc(var(--u) * 3.8)); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16); font-size: max(19px, calc(var(--u) * 2.1)); }
#cpTop .cp-r .cp-pic { width: max(38px, calc(var(--u) * 4.2)); height: max(38px, calc(var(--u) * 4.2)); }
#cpTop .cp-r .cp-lv { min-width: max(22px, calc(var(--u) * 2.8)); height: max(22px, calc(var(--u) * 2.8)); font-size: max(13px, calc(var(--u) * 1.5)); }
#cpTop .cp-r.top1 .cp-pos, #cpTop .cp-r.top2 .cp-pos, #cpTop .cp-r.top3 .cp-pos { color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
#cpTop .cp-who b { font-size: max(20px, calc(var(--u) * 2.4)); }
#cpTop .cp-who small, #cpTop .cp-val small { color: rgba(255, 255, 255, 0.62); }
#cpTop .cp-who small { font-size: max(12.5px, calc(var(--u) * 1.4)); }
#cpTop .cp-val b { font-size: max(19px, calc(var(--u) * 2.2)); }
#cpTop .cp-val small { font-size: max(12px, calc(var(--u) * 1.3)); }
/* ta ligne : l'or translucide, un liseré or ; « Ma place » : elle clignote une fois en or */
#cpTop .cp-r.me { background: rgba(255, 210, 63, 0.2); box-shadow: inset 0 0 0 2px #FFD23F, 3px 3px 0 var(--ink); }
#cpTop .cp-r.me:hover, #cpTop .cp-r.me:focus-visible { background: rgba(255, 210, 63, 0.28); box-shadow: inset 0 0 0 2px #FFD23F, 5px 5px 0 var(--ink); }
#cpTop .cp-r.me.flash { animation: accFlash 0.8s ease-out 1; }
@keyframes accFlash { 0%, 100% { background-color: rgba(255, 210, 63, 0.2); } 30% { background-color: rgba(255, 210, 63, 0.78); } }
/* UNE LIGNE RANKED : l'emblème et le rang (le bilan dessous), puis l'Elo en grand — c'est lui qui classe */
#cpTop .cp-r.rk { grid-template-columns: max(42px, calc(var(--u) * 4.6)) max(40px, calc(var(--u) * 4.4)) minmax(0, 1fr) auto minmax(max(250px, calc(var(--u) * 28)), auto); }
#cpTop .cp-val .cp-rkv { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: max(8px, calc(var(--u) * 1)); text-align: left; }
#cpTop .rk-emb { flex: none; width: max(34px, calc(var(--u) * 4.2)); height: max(34px, calc(var(--u) * 4.2)); }
#cpTop .cp-val .cp-rkt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#cpTop .cp-val .cp-elo { flex: none; min-width: 3.4em; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-left: max(8px, calc(var(--u) * 1)); border-left: 2px dashed rgba(255, 255, 255, 0.18); }
#cpTop .cp-elo b { font-size: max(24px, calc(var(--u) * 3)); text-shadow: 2px 2px 0 var(--ink); }
#cpTop .cp-elo small { font: 700 max(12px, calc(var(--u) * 1.3))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
/* en bas : « Crée ton compte… », le placement, « Joue en Ranked… » ; « Jouer › » en petit bouton or */
#cpTop .cp-r.cp-join { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 12px; background: rgba(255, 210, 63, 0.14); color: #FFE27A; font: 800 max(16px, calc(var(--u) * 1.9))/1.1 var(--fc); letter-spacing: 0.5px; }
#cpTop .cp-join .cp-gem { width: 26px; height: 26px; }
#cpTop .cp-rkme { cursor: default; padding-right: 6px; }
#cpTop .cp-rkme:hover { transform: none; background: rgba(255, 210, 63, 0.14); box-shadow: 3px 3px 0 var(--ink); }
#cpTop .cp-jouer { display: inline-flex; align-items: center; gap: 0.3em; min-height: 36px; padding: 0 12px 1px; border: 3px solid var(--ink); border-radius: 9px; background: #FFD23F; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font: italic 800 max(16px, calc(var(--u) * 1.9))/1 var(--fc); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
#cpTop .cp-jouer i { font-style: normal; }
#cpTop .cp-jouer:hover { background: #FFDC5E; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
#cpTop .cp-jouer:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#cpTop .cp-jouer:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* la liste vide, l'erreur (« Réessayer ») */
#cpTop .cp-none { border: 3px dashed rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.78); font: 600 max(15px, calc(var(--u) * 1.8))/1.35 var(--fb); }
#cpTop .cp-fail { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#cpTop .cp-retry { background: #FFD23F; color: var(--ink); }
/* le bas : « Ma place » (or), les pages */
#cpTop .cp-pager span { color: #fff; }
#cpTop .cp-mine { background: #FFD23F; color: var(--ink); }
#cpTop .cp-pager .icon-btn:disabled { opacity: 0.4; }

/* (un PC étroit : « Battle royale » devient « BR ») */
@media (max-width: 1179px) {
  #cpTop .lg { display: none; }
  #cpTop .sh { display: inline; }
}

/* ─── AU TÉLÉPHONE COUCHÉ (520 px de haut ou moins) : des pixels ; aucun texte sous 12 px ─── */
@media (max-height: 520px) {
  /* le menu : les petits boutons à 30 px (la zone d'appui déborde, invisible) ; « Saison 1 » s'efface devant
     « Classement » — la saison reste sur le panneau du lobby et sous le titre du classement */
  .hp-hb { height: 30px; min-height: 30px; gap: 5px; padding: 0 9px 0 6px; border-width: 2.5px; border-radius: 9px; }
  .hp-hb::before { content: ''; position: absolute; inset: -6px -4px; }
  .hp-hb svg { width: 20px; height: 20px; min-width: 0; min-height: 0; }
  .hp-hb b { font-size: 13px; }
  .hp-top { box-shadow: 2px 2px 0 var(--ink); }
  .hp-top i { display: none; }
  .hp-train { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
  .hp-fmt-pane .hp-head:has(#hubRkTop:not([hidden])) .hp-season { display: none; }
  .hlp-pos { box-shadow: 1.5px 1.5px 0 var(--ink); }
  /* (le plus petit téléphone : « Entraînement » prendrait la place du titre — la pastille « Parties perso » s'efface,
     l'onglet choisi à gauche le dit déjà) */
  @media (max-width: 700px) {
    .hp-pp .hp-head:has(#hubTrain:not([hidden])) .hp-tag { display: none; }
  }

  /* la fenêtre du classement */
  #cpTop .cp-top-box { width: 100%; gap: 5px; padding: 0 14px 10px; border-width: 3px; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
  #cpTop .cp-top-box > .cp-head { gap: 8px; margin: 0 -14px 3px; padding: 4px 6px 4px 12px; border-bottom-width: 3px; border-radius: 11px 11px 0 0; }
  #cpTop .cp-head h2 { font-size: 24px; }
  #cpTop #cpTopSaison { display: none; }
  #cpTop .lg { display: none; }
  #cpTop .sh { display: inline; }
  #cpTop .cp-tabs { border-width: 2.5px; border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  #cpTop .cp-tabs button { height: 32px; padding: 0 9px; border-left-width: 2.5px; font-size: 13px; }
  #cpTop .cp-head .cp-x { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); font-size: 20px; }
  #cpTop .cp-rows { gap: 3px; }
  #cpTop .cp-r { grid-template-columns: 34px 30px minmax(0, 1fr) auto minmax(120px, auto); min-height: 36px; border-width: 2.5px; border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  #cpTop .cp-pos { height: 28px; font-size: 16px; }
  #cpTop .cp-r .cp-pic { width: 28px; height: 28px; }
  #cpTop .cp-r:hover, #cpTop .cp-r:focus-visible { box-shadow: 3px 3px 0 var(--ink); }
  #cpTop .cp-r.me { box-shadow: inset 0 0 0 2px #FFD23F, 2px 2px 0 var(--ink); }
  #cpTop .cp-who b { font-size: 16.5px; }
  #cpTop .cp-who small, #cpTop .cp-val small, #cpTop .cp-elo small { font-size: 12px; }
  #cpTop .cp-r .cp-lv { min-width: 22px; height: 22px; font-size: 12px; }
  #cpTop .cp-val b { font-size: 15.5px; }
  #cpTop .cp-r.rk { grid-template-columns: 34px 30px minmax(0, 1fr) auto minmax(196px, auto); }
  #cpTop .rk-emb { width: 24px; height: 24px; }
  #cpTop .cp-val .cp-rkv { gap: 6px; }
  #cpTop .cp-val .cp-rkt { flex-direction: row; align-items: baseline; gap: 6px; }
  #cpTop .cp-val .cp-elo { flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; padding-left: 7px; }
  #cpTop .cp-elo b { font-size: 18px; text-shadow: 1.5px 1.5px 0 var(--ink); }
  #cpTop .cp-r.cp-join { grid-template-columns: auto minmax(0, 1fr) auto; font-size: 14px; padding-left: 9px; }
  /* (ta ligne en bas partage la place avec les pages : ton @ et le bilan s'effacent, ton pseudo reste entier) */
  #cpTop .cp-me .cp-who small, #cpTop .cp-me .cp-rkt small { display: none; }
  #cpTop .cp-me .cp-r.rk { grid-template-columns: 34px 30px minmax(0, 1fr) auto auto; }
  #cpTop .cp-join .cp-gem { width: 20px; height: 20px; }
  #cpTop .cp-rkme:hover { box-shadow: 2px 2px 0 var(--ink); }
  #cpTop .cp-jouer { min-height: 28px; padding: 0 9px 1px; border-width: 2.5px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); font-size: 14px; }
  #cpTop .cp-jouer::before { content: ''; position: absolute; inset: -5px -4px; }
  #cpTop .cp-jouer { position: relative; }
  #cpTop .cp-none { padding: 12px; font-size: 14px; }
}
/* (téléphone couché tout petit — 667 × 300 : les barres du navigateur prennent la place) */
@media (max-height: 340px) {
  #cpTop .cp-top-box { padding-bottom: 8px; }
  #cpTop .cp-top-box > .cp-head { padding-top: 3px; padding-bottom: 3px; }
  #cpTop .cp-head h2 { font-size: 22px; }
  #cpTop .cp-tabs button { height: 30px; }
  #cpTop .cp-head .cp-x { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  #cpTop .cp-r { grid-template-columns: 30px 26px minmax(0, 1fr) auto minmax(110px, auto); min-height: 30px; }
  #cpTop .cp-pos { height: 24px; font-size: 14px; }
  #cpTop .cp-r .cp-pic { width: 24px; height: 24px; }
  #cpTop .cp-who b { font-size: 14.5px; }
  #cpTop .cp-r.rk { grid-template-columns: 30px 26px minmax(0, 1fr) auto minmax(190px, auto); }
  #cpTop .cp-me .cp-r.rk { grid-template-columns: 30px 26px minmax(0, 1fr) auto auto; }
  #cpTop .cp-r.cp-join { grid-template-columns: auto minmax(0, 1fr) auto; }
  #cpTop .rk-emb { width: 22px; height: 22px; }
  #cpTop .cp-elo b { font-size: 16px; }
}
/* (écran étroit — un téléphone tenu debout, rare : le niveau s'efface, comme dans css/compte.css) */
@media (max-width: 640px) {
  #cpTop .cp-r, #cpTop .cp-r.rk, #cpTop .cp-me .cp-r.rk { grid-template-columns: 30px 30px minmax(0, 1fr) auto; }
  #cpTop .cp-r.cp-join { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  #cpTop .cp-r.me.flash { animation: none; }
  .hp-hb, .hlp-pos, #cpTop .cp-jouer { transition: none; }
}