/* ════════════════════════════════════════════════════════════════════════
   CLASSEMENTS — reskin V3 « néo-brut », direction PODIUM ARCADE (+ bloc Toi).
   Couche par-dessus le markup/JS existant (contrat de classes .lb-* inchangé).
   Le CHROME (titre + navbars) vient de chrome-v3.css ; ici = le CONTENU.
   tokens-v3.css fournit --ink/--paper/--paper-2/--yellow/--blue/--green/--teal/
   --purple et les --card-*. Polices : Syne (display), Archivo Black (head),
   Space Mono (mono).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --lb-gold: #FFD23F; --lb-silver: #D9DEE3; --lb-bronze: #E2A766;
  /* ── Système UNIFIÉ stroke + shadow (tous les éléments des classements) ──
     Une seule épaisseur de trait + une échelle d'ombre dure à 3 crans (encre
     solide, jamais de rgba). sm = petits éléments / md = cartes & blocs /
     lg = survol & héros. Toute ombre/bordure des .lb-* doit passer par ces
     variables pour rester cohérente. */
  --lb-stroke: 3px;               /* trait unique du langage CARTE des classements */
  --lb-shadow-sm: 3px 3px 0 var(--ink);
  --lb-shadow:    5px 5px 0 var(--ink);
  --lb-shadow-lg: 7px 7px 0 var(--ink);
}

/* Cadre de page : fond transparent (la grille bleue du body V3 transparaît).
   Largeur max = 1180px (base style.css), UNIFIÉE avec les autres pages (jeu /
   collection / succès) — on NE redéfinit plus max-width ici (l'inline 1180px
   de leaderboards.html s'applique). */
.app { background: transparent !important; }
.lb-pane, .lb-tab-pane { font-family: 'Space Mono', monospace; color: var(--ink); }

/* ─── BARRE D'ONGLETS ─────────────────────────────────────────────────────
   Barre segmentée néo-brut : conteneur papier bordé + ombre dure + tilt léger
   (langage des pilules de tri) ; onglets séparés d'un trait encre ; onglet actif
   = puce encre « stampée » avec soulignement jaune (couleur signature du jeu). */
.lb-tabs {
  display: flex; flex-wrap: nowrap; gap: 0;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper);
  box-shadow: var(--lb-shadow);
  padding: 0; margin: 16px 0 22px;
  transform: rotate(-0.5deg);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 0.4px;
  text-transform: uppercase; line-height: 1.15;
  padding: 12px 14px; border: 0; margin: 0;
  background: transparent; color: var(--ink); opacity: 0.5;
  cursor: pointer; text-align: center; white-space: nowrap; flex-shrink: 0;
  transition: background-color 150ms var(--ease-out, ease), color 150ms ease, opacity 150ms ease;
}
.lb-tab + .lb-tab { border-left: var(--lb-stroke) solid var(--ink); }
html.dlp-can-hover .lb-tab:not(.active):hover { opacity: 1; background: var(--paper-2); }
.lb-tab.active {
  opacity: 1; background: var(--ink); color: var(--paper);
  box-shadow: inset 0 -5px 0 var(--yellow);
}

/* ─── BARRE DE STATUT « TOI » ──────────────────────────────────────────────
   Le bandeau joueur = strip vert tilté (connecté), façon lbA-me-strip. */
.lb-status-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border: var(--lb-stroke) solid var(--ink); background: var(--green);
  box-shadow: var(--lb-shadow-sm);
  padding: 8px 11px; margin-bottom: 16px;
  font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700;
  transform: rotate(-0.5deg);
}
.lb-status-bar .dot {
  width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}
.lb-status-bar #lb-status { flex: 1 1 auto; min-width: 0; }
.lb-status-bar #lb-status b { font-family: 'Archivo Black', sans-serif; }

/* ─── BANNIÈRE OPT-IN (non connecté) ───────────────────────────────────────
   Bannière jaune néo-brut avec CTA Paramètres. */
.lb-optin-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: var(--lb-stroke) solid var(--ink); background: var(--yellow);
  box-shadow: var(--lb-shadow);
  padding: 12px 14px; margin-bottom: 18px; transform: rotate(-0.6deg);
}
.lb-optin-banner p { margin: 0; flex: 1 1 200px; font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.4; }
.lb-optin-banner p b { font-family: 'Archivo Black', sans-serif; }
.lb-optin-banner .lb-cta {
  flex: 0 0 auto; cursor: pointer;
  font-family: 'Archivo Black', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--ink); color: var(--paper); border: var(--lb-stroke) solid var(--ink);
  box-shadow: 3px 3px 0 var(--paper), 4px 4px 0 var(--ink);
  padding: 9px 13px;
}

/* ─── APERÇU : grille de cartes (leader + toi) ─────────────────────────────
   Chaque carte = pastel néo-brut, en-tête icône + titre, gros score du #1,
   nom du leader, et la ligne « Toi » mise en avant. */
.lb-overview-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 10px;
}
@media (max-width: 820px) { .lb-overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .lb-overview-grid { grid-template-columns: 1fr; } }
.lb-card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--paper); border: var(--lb-stroke) solid var(--ink);
  box-shadow: var(--lb-shadow); padding: 13px; text-decoration: none; color: var(--ink);
  transition: transform 120ms var(--ease-out, ease), box-shadow 120ms var(--ease-out, ease);
}
html.dlp-can-hover .lb-card:hover { transform: translate(-2px, -2px); box-shadow: var(--lb-shadow-lg); }

/* ── COULEUR PAR CLASSEMENT — reprend la palette de la section « Statistiques »
   de la Collection (uniformité) : précision globale = rose, GAUCHE = rouge,
   DROITE = bleu, collection = vert, score = jaune… Partagée cartes + cellules Toi. */
.lb-card[data-key="score_campagne"],  .lb-mdc[data-key="score_campagne"],
.lb-card[data-key="score_global"],    .lb-mdc[data-key="score_global"]    { background: var(--yellow); }
.lb-card[data-key="streak_campagne"], .lb-mdc[data-key="streak_campagne"],
.lb-card[data-key="streak_global"],   .lb-mdc[data-key="streak_global"]   { background: var(--card-peach); }
.lb-card[data-key="accuracy_global"], .lb-mdc[data-key="accuracy_global"] { background: #f4b6b6; }
.lb-card[data-key="accuracy_gauche"], .lb-mdc[data-key="accuracy_gauche"] { background: #e63946; color: var(--paper); }
.lb-card[data-key="accuracy_droite"], .lb-mdc[data-key="accuracy_droite"] { background: #2a4dff; color: var(--paper); }
.lb-card[data-key="collection"],      .lb-mdc[data-key="collection"]      { background: #b8e8c4; }
.lb-card[data-key="cards_rare"],      .lb-mdc[data-key="cards_rare"]      { background: var(--card-gold); }
.lb-card[data-key="achievements"],    .lb-mdc[data-key="achievements"]    { background: var(--card-lavender); }
/* Sur fond foncé (gauche/rouge, droite/bleu), pastille papier + icône en encre
   (l'icône hérite sinon de color:paper de la carte → blanc sur blanc = invisible). */
.lb-card[data-key="accuracy_gauche"] .lb-card-icon,
.lb-card[data-key="accuracy_droite"] .lb-card-icon { background: var(--paper); color: var(--ink); }
.lb-card-head {
  display: flex; align-items: center; gap: 9px;
  border-bottom: var(--lb-stroke) solid var(--ink); padding-bottom: 8px;
}
.lb-card-icon {
  width: 30px; height: 30px; flex: 0 0 auto; display: inline-grid; place-items: center;
  background: var(--paper); border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm);
  transform: rotate(-3deg);
}
.lb-card-title {
  margin: 0; font-family: 'Archivo Black', sans-serif; font-size: 13px;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1;
}
.lb-card-value {
  font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(28px, 5vw, 40px); line-height: 0.95; letter-spacing: -0.02em;
}
.lb-card-value .unit { font-size: 0.4em; font-style: normal; opacity: 0.6; margin-left: 4px; }
.lb-card-name {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-card-empty { font-family: 'Space Mono', monospace; font-size: 11px; font-style: italic; opacity: 0.6; }
.lb-card-you {
  margin-top: auto;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px;
  background: var(--ink); color: var(--paper); padding: 6px 9px;
}
.lb-card-you b { font-family: 'Archivo Black', sans-serif; }
.lb-card-you.you-leader { background: var(--yellow); color: var(--ink); }

/* ─── FILTRES : calqués TEL QUEL sur la page COLLECTION (.toolbar/.search-wrap/
   .filters/.filter-pill). Recherche dans un bloc bordé tilté ; « Trier » en mono ;
   tri = UN segment unifié tilté (pills jointes, séparées d'un trait, active ink). */
.lb-filters, .lb-rp-filters {
  margin-bottom: 16px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px;
  border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important;
}
/* B6 — min-width:0 indispensable : sans lui, le min-width:auto par défaut du
   flex item impose un plancher = largeur totale du bandeau de pilules
   (incompressibles, nowrap) → le scroll d'overflow-x des .lb-filter-pills ne
   se déclenchait jamais et les pilules de droite étaient rognées sur mobile
   (les 3 onglets). */
.lb-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; }
.lb-filter-row .lb-filter-label,
.lb-filter-row > span:first-child {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.6; flex: 0 0 auto;
}
.lb-filter-pills {
  display: inline-flex; gap: 0; align-items: stretch; flex: 0 1 auto; min-width: 0; max-width: 100%;
  border: var(--border-thick); box-shadow: var(--sh-md); background: var(--paper);
  transform: rotate(-0.8deg); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lb-filter-pills::-webkit-scrollbar { display: none; }
.lb-filter-pills > button, .lb-filter-pills > .lb-filter-pill {
  font-family: 'Archivo Black', sans-serif; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  flex: 0 0 auto; border: 0; box-shadow: none; background: transparent; color: var(--ink);
  padding: 9px 16px; margin: 0; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--ease-out, ease), color 160ms var(--ease-out, ease);
}
.lb-filter-pills > * + * { border-left: var(--border-thick); }
/* « Trier » = 1er segment-LABEL intégré à la pilule : même cadre, look atténué
   (fond paper-2, texte mono opacifié, pas de hover/curseur) → on comprend que
   c'est un label, pas un bouton. */
.lb-filter-pills > .lb-filter-cap {
  display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; cursor: default;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 13px; background: var(--paper-2); color: var(--ink); opacity: 0.5;
}
html.dlp-can-hover .lb-filter-pills > button:hover, html.dlp-can-hover .lb-filter-pills > .lb-filter-pill:hover { background: var(--paper-2); }
.lb-filter-pills > .active, .lb-filter-pills > .is-on, .lb-filter-pills > button.active { background: var(--ink); color: var(--paper); }

/* Recherche RP : bloc bordé tilté (cf. .search-wrap Collection). Desktop : partage
   la ligne avec le tri (flex-grow) ; mobile (≤700px) : sa propre ligne pleine largeur. */
.lb-rp-search-wrap {
  flex: 1 1 260px; display: flex; align-items: center; gap: 6px;
  border: var(--border-thick); box-shadow: var(--sh-md); background: var(--paper);
  transform: rotate(-0.5deg); padding: 0;
}
.lb-filter-row { flex: 0 1 auto; }
@media (max-width: 700px) {
  .lb-rp-search-wrap, .lb-filter-row { flex: 1 1 100%; }
}
/* Icône en FLUX flex (annule le `position:absolute` legacy de l'inline qui la
   faisait chevaucher le texte) ; centrée verticalement par align-items du wrap. */
.lb-rp-search-wrap .ico { position: static; transform: none; margin-left: 13px; opacity: 0.7; flex: 0 0 auto; }
.lb-rp-search-wrap input, #lb-rp-search {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none;
  padding: 12px 14px 12px 4px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink);
}
.lb-rp-search-wrap input::placeholder { opacity: 0.5; }

/* ─── Onglet « Tous » : couleurs de section alignées sur la palette V3 de
   l'Aperçu (cohérence cross-onglets). Chaque catégorie reprend la teinte
   dominante de sa contrepartie en Aperçu. Toutes claires → texte encre lisible.
   (Écrase les anciennes couleurs du <style> legacy de leaderboards.html.) ─── */
.lb-row[data-cat="composite"] { background: var(--card-gold); }
.lb-row[data-cat="score"]     { background: var(--yellow); }
.lb-row[data-cat="streak"]    { background: var(--card-peach); }
.lb-row[data-cat="accuracy"]  { background: #f4b6b6; }
.lb-row[data-cat="daily"]     { background: var(--card-sky); }
.lb-row[data-cat="cards"]     { background: var(--card-mint); }
.lb-row[data-cat="meta"]      { background: var(--card-lavender); }

/* ════════════════════════════════════════════════════════════════════════
   ONGLET « TOUS » — FICHE À MICRO-PODIUM (direction V3 choisie).
   Chaque classement = fiche : en-tête icône+titre, top-3 médaillé inline,
   pied « Toi ». .lb-fp porte aussi .lb-row (hooks JS clic/section) → on RESET
   ici le layout grid hérité du <style> legacy de leaderboards.html.
   ════════════════════════════════════════════════════════════════════════ */
.lb-fp {
  display: block; padding: 0; gap: 0; grid-template-columns: none;
  border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow); background: var(--paper);
  margin-bottom: 13px; overflow: hidden; cursor: pointer;
  text-decoration: none; color: var(--ink);
  transition: transform 120ms var(--ease-out, ease), box-shadow 120ms var(--ease-out, ease);
}
html.dlp-can-hover .lb-fp:hover { transform: translate(-2px, -2px); box-shadow: var(--lb-shadow-lg); }
/* Fiches-record dans la modale RP (mêmes que l'onglet « Tous ») : fond pastel
   par type de record, pas de marge (conteneur en flex-gap). */
.lb-rp-stats .lb-fp { margin-bottom: 0; }
.lb-rp-fiche[data-rpk="pro"]      { background: var(--card-gold); }
.lb-rp-fiche[data-rpk="accuracy"] { background: var(--card-rose); }
.lb-rp-fiche[data-rpk="temps"]    { background: var(--card-sky); }
.lb-rp-fiche[data-rpk="count"]    { background: var(--card-mint); }
.lb-rp-fiche[data-k="confusion"]  { background: var(--card-lavender); }
/* Collapse : .is-hidden DOIT battre .lb-fp{display:block} (sinon sections non repliables). */
.lb-fp.is-hidden, .lb-rp-row.is-hidden, .lb-row.is-hidden { display: none !important; }
/* Confusion en fiche : corps sous l'en-tête (mêmes paddings que les podiums). */
.lb-rp-conf-body { padding: 12px 11px 13px; display: flex; flex-direction: column; gap: 10px; }
/* #5a : plus de barre verticale colorée à gauche de la modale RP. */
.lb-rp-modal .lb-modal-body { border-left: 0 !important; }
.lb-fp-top { display: flex; align-items: center; gap: 9px; padding: 10px 11px 9px; border-bottom: var(--lb-stroke) solid var(--ink); }
.lb-fp-ico {
  width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border: var(--lb-stroke) solid var(--ink);
  box-shadow: 2px 2px 0 var(--paper), 3px 3px 0 var(--ink); transform: rotate(-3deg);
}
.lb-fp[data-bloc="gauche"] .lb-fp-ico { background: #e63946; }
.lb-fp[data-bloc="droite"] .lb-fp-ico { background: #2a4dff; }
.lb-fp-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lb-fp-name { font-family: 'Archivo Black', sans-serif; font-size: 13px; text-transform: uppercase; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-fp-sub { font-family: 'Space Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.65; margin-top: 2px; }
.lb-fp-open { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: var(--lb-stroke) solid var(--ink); background: var(--paper); box-shadow: var(--lb-shadow-sm); }
/* micro-podium inline : [#2  #1  #3] */
.lb-fp-pod { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; padding: 13px 11px 10px; }
.lb-fp-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; border: var(--lb-stroke) solid var(--ink); background: var(--paper); padding: 8px 4px 7px; position: relative; }
.lb-fp-cell.c1 { background: var(--card-gold); transform: rotate(-1.3deg); }
.lb-fp-cell.c2 { transform: rotate(1deg); }
.lb-fp-cell.c3 { transform: rotate(-1deg); }
.lb-fp-cell.is-empty { visibility: hidden; }
.lb-fp-medal {
  width: 24px; height: 24px; border-radius: 50%; margin-top: -16px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo Black', sans-serif; font-size: 11px;
  border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm);
}
.lb-fp-medal.m1 { background: var(--lb-gold); } .lb-fp-medal.m2 { background: var(--lb-silver); } .lb-fp-medal.m3 { background: var(--lb-bronze); }
.lb-fp-pname { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-fp-pval { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: -0.5px; text-align: center; }
.lb-fp-cell.c1 .lb-fp-pval { font-size: 15px; }
/* pied « Toi » */
.lb-fp-me { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 8px 11px; }
.lb-fp-me .lab { font-family: 'Archivo Black', sans-serif; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 2px 6px; flex: 0 0 auto; }
.lb-fp-me .rk { font-family: 'Archivo Black', sans-serif; font-size: 13px; white-space: nowrap; }
.lb-fp-me .mine { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: -0.5px; margin-left: auto; white-space: nowrap; color: var(--lb-gold); }
.lb-fp-me--none .rk { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; opacity: 0.7; }
.lb-fp-norec { font-family: 'Space Mono', monospace; font-size: 11px; font-style: italic; opacity: 0.6; padding: 14px 11px; }

/* ─── En-têtes de section : calqués TEL QUEL sur les séparateurs de la page
   COLLECTION (.grid-sep .pill) — chevron + petit bloc ink TILTÉ (ombre à la
   couleur du mouvement) + compteur mono. Écrase la barre legacy. ─── */
.lb-rp-section-head {
  display: flex; align-items: center; gap: 10px;
  background: transparent !important; border: 0; box-shadow: none;
  padding: 0; margin: 16px 0 12px; cursor: pointer;
}
.lb-rp-section-head:first-child { margin-top: 6px; }
.lb-rp-section-head .chev {
  flex: 0 0 auto; width: 16px; text-align: center;
  font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1;
  transition: transform 180ms var(--ease-out, ease);
}
.lb-rp-section-head.is-collapsed .chev { transform: rotate(-90deg); }
.lb-rp-section-head .title {
  flex: 0 1 auto; min-width: 0;
  font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15;
  background: var(--ink); color: var(--paper); border: var(--lb-stroke) solid var(--ink);
  box-shadow: 2px 2px 0 var(--fam-color, var(--ink));
  padding: 6px 12px; transform: rotate(-0.8deg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-rp-section-head .count {
  margin-left: auto; flex: 0 0 auto;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.6;
  background: none; color: var(--ink); border: 0; padding: 0; transform: none;
}
.lb-rp-section-head.is-empty { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════════
   ONGLET « PAR REPRÉSENTANT·E·S » — FICHE-CARTE (même langage que les fiches de
   classement) : en-tête photo+identité, pied « PRO » ink (record composite =
   le·la meilleur·e joueur·euse sur la carte). Écrase la rangée legacy.
   ════════════════════════════════════════════════════════════════════════ */
.lb-rp-row.lb-rpf {
  display: block; padding: 0; gap: 0; grid-template-columns: none;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper); box-shadow: var(--lb-shadow);
  margin-bottom: 13px; overflow: hidden; cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform 120ms var(--ease-out, ease), box-shadow 120ms var(--ease-out, ease);
}
html.dlp-can-hover .lb-rp-row.lb-rpf:hover { transform: translate(-2px, -2px); box-shadow: var(--lb-shadow-lg); }
.lb-rpf-top { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: var(--lb-stroke) solid var(--ink); }
.lb-rpf-photo {
  width: 44px; height: 44px; flex: 0 0 auto; object-fit: cover; transform: rotate(-1.5deg);
  border: var(--lb-stroke) solid var(--ink); background: var(--paper-2);
  box-shadow: 2px 2px 0 var(--fam-color, var(--paper)), 3px 3px 0 var(--ink);
}
.lb-rpf-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lb-rpf-name { font-family: 'Archivo Black', sans-serif; font-size: 13px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rpf-meta { font-family: 'Space Mono', monospace; font-size: 10px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rpf-meta .fam { font-weight: 700; }
.lb-rpf-meta .dot { margin: 0 4px; opacity: 0.5; }
.lb-rpf-open { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: var(--lb-stroke) solid var(--ink); background: var(--paper); box-shadow: var(--lb-shadow-sm); }
/* pied PRO : réutilise .lb-fp-me (pied « TOI » des fiches classement) — on ajoute
   juste l'ellipsis sur le nom du pro qui occupe le centre. */
.lb-rpf-pro .rk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ─── Modale RP : « PRO DE CETTE CARTE » + micro-podium « meilleure maîtrise » ─── */
.lb-rp-rec-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: var(--lb-stroke) solid var(--ink); background: var(--ink); color: var(--paper);
  box-shadow: 3px 3px 0 var(--fam-color, var(--yellow));
  padding: 9px 11px; margin: 4px 2px 12px;
}
.lb-rp-rec-ic { flex: 0 0 auto; color: var(--lb-gold); display: flex; }
.lb-rp-rec-lab { font-family: 'Archivo Black', sans-serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }
.lb-rp-rec-val { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 20px; line-height: 1; color: var(--lb-gold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rp-rec-by { font-family: 'Space Mono', monospace; font-size: 10px; opacity: 0.85; margin-left: auto; }
.lb-rp-podlab { font-family: 'Archivo Black', sans-serif; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; margin: 0 2px 8px; }
.lb-rp-pod { padding: 13px 2px 14px; }

/* ─── Stat-cards de la modale RP : MÊME langage carte que les fiches — ombre ink
   DURE (au lieu de l'ombre grise molle legacy), valeur Syne italic, tag Archivo. ─── */
.lb-rp-stat-card { box-shadow: var(--lb-shadow); }
html.dlp-can-hover .lb-rp-stat-card:hover { box-shadow: var(--lb-shadow-lg); transform: translate(-2px, -2px); }
.lb-rp-stat-card:active { box-shadow: var(--lb-shadow-sm); }
html.dlp-can-hover .lb-rp-stat-card.lb-rp-stat-static:hover { box-shadow: var(--lb-shadow); transform: none; }
.lb-rp-stat-card.lb-rp-stat-static,
.lb-rp-stat-card.lb-rp-stat-static:active { box-shadow: var(--lb-shadow); }
.lb-rp-stat-tag { font-family: 'Archivo Black', sans-serif; }
.lb-rp-stat-val { font-family: 'Syne', sans-serif; font-style: italic; }
.lb-rp-stat-who { font-family: 'Space Mono', monospace; font-weight: 700; text-transform: none; }
.lb-rp-stat-you b { font-family: 'Syne', sans-serif; font-style: italic; }
.lb-conf-pill { font-family: 'Archivo Black', sans-serif; box-shadow: var(--lb-shadow-sm); }
.lb-conf-pill.is-sm { box-shadow: var(--lb-shadow-sm); }
.lb-rp-conf-top .pct-big, .lb-rp-conf-rest .pct-sm { font-family: 'Syne', sans-serif; font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════
   BLOC « TOI » (dashboard) — en tête d'Aperçu (porté de la direction lbD).
   ════════════════════════════════════════════════════════════════════════ */
.lb-me-dash {
  position: relative; border: var(--lb-stroke) solid var(--ink); background: var(--yellow);
  box-shadow: var(--lb-shadow-lg); padding: 20px 16px 18px; margin: 16px 0 26px;
  transform: rotate(-0.6deg);
}
.lb-me-dash-tag {
  position: absolute; top: -13px; left: 16px; background: var(--ink); color: var(--paper);
  font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; padding: 5px 11px; border: var(--lb-stroke) solid var(--ink); transform: rotate(-2deg);
}
.lb-me-dash-top { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.lb-me-dash-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lb-me-dash-k { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.7; }
.lb-me-dash-name { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(24px, 6vw, 32px); line-height: 0.95; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* RANG GLOBAL (Score DLP composite) — badge hero cliquable, à droite du pseudo.
   Fond encre + chiffre or = headline « premium ». */
.lb-me-dash-global {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow);
  padding: 8px 13px; transform: rotate(1.5deg); cursor: pointer;
  transition: transform 120ms var(--ease-out, ease), box-shadow 120ms var(--ease-out, ease);
}
html.dlp-can-hover .lb-me-dash-global:hover { transform: rotate(1.5deg) translate(-2px,-2px); box-shadow: var(--lb-shadow-lg); }
.lb-me-dash-global:active { transform: rotate(1.5deg) translate(1px,1px); box-shadow: var(--lb-shadow-sm); }
.lb-mdg-ico { flex: 0 0 auto; color: var(--lb-gold); }
.lb-mdg-body { display: flex; flex-direction: column; }
.lb-mdg-k { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; }
.lb-mdg-rank { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 28px; line-height: 1; color: var(--lb-gold); }
.lb-mdg-tot { font-size: 0.5em; opacity: 0.7; color: var(--paper); }
.lb-mdg-sub { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.5px; opacity: 0.85; }
.lb-me-dash-foot { margin-top: 11px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2px; }
.lb-me-dash-foot b { font-family: 'Archivo Black', sans-serif; }

/* ─── « C'est toi » HUB : pseudo éditable + badge + contrôles + CTA ─────────── */
.lb-me-namerow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-me-edit {
  flex: 0 0 auto; width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--lb-shadow-sm); display: inline-flex; align-items: center; justify-content: center;
}
html.dlp-can-hover .lb-me-edit:hover { transform: translate(-1px,-1px); box-shadow: var(--lb-shadow-sm); }
.lb-me-edit-ok { flex: 0 0 auto; width: 30px; height: 30px; cursor: pointer; font-family: 'Archivo Black', sans-serif; font-size: 14px; border: var(--lb-stroke) solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: var(--lb-shadow-sm); }
.lb-me-badgewrap { display: block; margin-top: 7px; }
.lb-me-badge {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; max-width: 100%;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--lb-shadow-sm);
  padding: 5px 9px; transform: rotate(-1deg);
}
.lb-me-badge .lb-me-badge-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-me-badge .ico { flex: 0 0 auto; }
html.dlp-can-hover .lb-me-badge:hover { transform: rotate(-1deg) translate(-1px,-1px); box-shadow: var(--lb-shadow); }
.lb-me-badge.tier-or { background: var(--card-gold); }
.lb-me-badge.tier-argent { background: #E7EBEF; }
.lb-me-badge.tier-bronze { background: var(--card-peach); }
.lb-me-badge--empty { background: var(--paper); border-style: dashed; opacity: 0.85; box-shadow: none; transform: none; }

/* contrôles en pied (resync / quitter / MAJ) */
.lb-me-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 2.5px dashed rgba(0,0,0,.25); }
.lb-me-ctrl {
  cursor: pointer; font-family: 'Archivo Black', sans-serif; font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--lb-shadow-sm); padding: 7px 11px;
  transition: transform 110ms var(--ease-out, ease), box-shadow 110ms var(--ease-out, ease), background 110ms ease;
}
html.dlp-can-hover .lb-me-ctrl:hover { transform: translate(-1px,-1px); box-shadow: var(--lb-shadow); }
.lb-me-ctrl:active { transform: translate(1px,1px); box-shadow: var(--lb-shadow-sm); }
.lb-me-ctrl--danger { background: #e63946; color: var(--paper); }
.lb-me-ctrl[disabled] { opacity: 0.6; cursor: default; }
.lb-me-maj { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 10px; opacity: 0.6; white-space: nowrap; }

/* ── État ② : CTA d'inscription (pas encore inscrit·e) ── */
.lb-me-dash--cta { display: block; }
.lb-me-cta-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(16px, 4.5vw, 20px); text-transform: uppercase; line-height: 1.05; margin: 4px 0 6px; }
.lb-me-cta-sub { font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.4; margin: 0 0 12px; }
.lb-me-cta-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.lb-me-input {
  flex: 1 1 160px; min-width: 0; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--lb-shadow-sm);
  padding: 9px 11px; outline: none;
}
.lb-me-input::placeholder { opacity: 0.5; }
.lb-me-input--inline { flex: 0 1 180px; padding: 5px 8px; font-size: 14px; box-shadow: var(--lb-shadow-sm); }
.lb-me-join {
  flex: 0 0 auto; cursor: pointer; font-family: 'Archivo Black', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  border: var(--lb-stroke) solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: var(--lb-shadow-sm); padding: 9px 15px;
}
html.dlp-can-hover .lb-me-join:hover { transform: translate(-2px,-2px); box-shadow: var(--lb-shadow); }
.lb-me-join:active { transform: translate(1px,1px); box-shadow: var(--lb-shadow-sm); }
.lb-me-cta-count { font-family: 'Space Mono', monospace; font-size: 11px; opacity: 0.75; margin-top: 11px; }
.lb-me-cta-count b { font-family: 'Archivo Black', sans-serif; }
.lb-me-dash-gridlab { font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 16px 0 9px; }
.lb-me-dash-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
/* Cellules = liens cliquables (→ ouvrent le classement). Couleur via [data-key]
   (bloc partagé plus haut). Survol = léger soulèvement néo-brut. */
.lb-mdc {
  border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm); padding: 7px 8px;
  display: flex; flex-direction: column; min-width: 0; background: var(--paper);
  text-decoration: none; color: var(--ink); cursor: pointer;
  transition: transform 110ms var(--ease-out, ease), box-shadow 110ms var(--ease-out, ease);
  /* Conteneur de requête → le rang (cqw) se dimensionne sur la LARGEUR DE CARTE,
     pas le viewport : tient toujours dans la cellule quel que soit le nombre de
     colonnes (4→2→1). */
  container-type: inline-size;
}
html.dlp-can-hover .lb-mdc:hover { transform: translate(-2px, -2px); box-shadow: var(--lb-shadow); }
.lb-mdc:active { transform: translate(1px, 1px); box-shadow: var(--lb-shadow-sm); }
.lb-mdc-cat { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Taille pilotée par la largeur de carte (cqw) : ~22px sur carte large, descend
   jusqu'à 13px sur carte étroite → jamais de débordement même si le fit JS n'a
   pas (encore) tourné (course de chargement de la police Syne). */
.lb-mdc-rank { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(13px, 18cqw, 22px); line-height: 1.05; white-space: nowrap; }
.lb-mdc-val { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Meilleur rang du joueur → liseré jaune (data-best posé par le JS). */
.lb-mdc[data-best] { box-shadow: 3px 3px 0 var(--ink), 0 0 0 5px var(--yellow); }
html.dlp-can-hover .lb-mdc[data-best]:hover { box-shadow: 5px 5px 0 var(--ink), 0 0 0 5px var(--yellow); }

/* ════════════════════════════════════════════════════════════════════════
   PODIUM top-3 (modale détail) — direction « CONSTRUCTION GRADINS » (choix user).
   Séquence : les GRADINS montent du sol (bronze → argent → OR en dernier),
   puis les CARTES se déplient au sommet, puis la COURONNE tombe sur le #1.
   Pas de médaille (rang gravé dans le gradin). Vraies ombres dures (pas de
   fausse 3D). Shine façon carte shiny sur le #1. Anim jouée à l'ouverture.
   ════════════════════════════════════════════════════════════════════════ */
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; padding: 24px 5px 0; margin-bottom: 16px; position: relative; }
/* Pas de ligne de sol : l'ombre portée dure des gradins suffit à les ancrer
   (la ligne créait un « dépassement » disgracieux des ombres en dessous). */
.lb-pod { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.lb-pod-2 { transform: rotate(-1.2deg); }
.lb-pod-3 { transform: rotate(1.2deg); }

/* ── Gradin (la base) : monte du sol, rang gravé, VRAIE ombre portée dure ── */
.lb-pod-step {
  width: 100%; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  position: relative; transform-origin: bottom center;
  animation: lb-stepRise 0.55s cubic-bezier(.22,.9,.3,1.35) both;
}
.lb-pod-1 .lb-pod-step { height: 104px; background: var(--lb-gold);   box-shadow: 6px 6px 0 var(--ink); animation-delay: 0.78s; }
.lb-pod-2 .lb-pod-step { height: 74px;  background: var(--lb-silver); animation-delay: 0.44s; }
.lb-pod-3 .lb-pod-step { height: 54px;  background: var(--lb-bronze); animation-delay: 0.12s; }
/* chiffre de rang centré verticalement dans le gradin */
.lb-pod-step .rk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Syne', sans-serif; font-weight: 800; font-style: italic; font-size: 38px; line-height: 1; color: var(--ink); opacity: 0.16; pointer-events: none; }
@keyframes lb-stepRise { 0% { transform: scaleY(0); } 70% { transform: scaleY(1.10); } 85% { transform: scaleY(0.95); } 100% { transform: scaleY(1); } }

/* ── Carte joueur : se déplie au sommet du gradin ── */
.lb-pod-card {
  width: 100%; background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; text-align: center;
  margin-bottom: 9px; position: relative; z-index: 2; transform-origin: bottom center;
  animation: lb-cardUnfold 0.5s cubic-bezier(.18,1.5,.42,1) both;
}
.lb-pod-1 .lb-pod-card { background: var(--card-gold); box-shadow: 6px 6px 0 var(--ink); animation-delay: 1.66s; }
.lb-pod-2 .lb-pod-card { animation-delay: 1.40s; }
.lb-pod-3 .lb-pod-card { animation-delay: 1.16s; }
@keyframes lb-cardUnfold {
  0%  { transform: translateY(26px) scaleY(.04); opacity: 0; }
  55% { opacity: 1; transform: translateY(-3px) scaleY(1.07); }
  78% { transform: translateY(0) scaleY(.97); }
  100%{ transform: translateY(0) scaleY(1); opacity: 1; }
}
.lb-pod-name { font-family: 'Archivo Black', sans-serif; font-size: 11px; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod-val { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -0.5px; }
.lb-pod-1 .lb-pod-val { font-size: 18px; }

/* ── SHINE (repris des cartes shiny) : LIGNE BLANCHE SOLIDE qui balaie en diagonale
   vers le BAS-DROITE, sur TOUTE la colonne #1 (couronne + carte + gradin or).
   Calque dédié .lb-pod-shine (overflow caché) → ne touche pas les ombres dures. ── */
.lb-pod-1 { position: relative; }
.lb-pod-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.lb-pod-shine::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 300px;
  margin: -150px 0 0 -7.5px; background: rgba(255,255,255,.95);   /* ligne SOLIDE */
  transform: translate(-130px, -170px) rotate(34deg);
  animation: lb-pod-shine 3.8s ease-in-out 2.4s infinite;
}
@keyframes lb-pod-shine {
  0%   { transform: translate(-130px, -170px) rotate(34deg); }   /* part : haut-gauche */
  22%  { transform: translate(130px, 170px)  rotate(34deg); }    /* finit : bas-droite */
  100% { transform: translate(130px, 170px)  rotate(34deg); }    /* hold */
}

/* ── Couronne #1 (petit SVG néo-brut) : tombe à la fin ── */
.lb-pod-crown { display: block; margin: 0 auto 3px; line-height: 0; transform-origin: center bottom; animation: lb-crownDrop 0.6s cubic-bezier(.3,1.4,.5,1) 2.30s both; }
.lb-pod-crown svg { width: 30px; height: 23px; display: block; filter: drop-shadow(2.5px 2.5px 0 var(--ink)); }
@keyframes lb-crownDrop {
  0%  { transform: translateY(-70px) rotate(-18deg) scale(.4); opacity: 0; }
  55% { transform: translateY(5px) rotate(6deg) scale(1.12); opacity: 1; }
  72% { transform: translateY(-3px) rotate(-3deg) scale(.98); }
  100%{ transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}

.lb-pod.is-you .lb-pod-card { outline: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink), 0 0 0 6px var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .lb-pod-step, .lb-pod-card, .lb-pod-crown { animation: none !important; transform: none !important; opacity: 1 !important; }
  .lb-pod-shine { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODALE DÉTAIL + lignes de rang (#4→…) + ligne « Toi ».
   ════════════════════════════════════════════════════════════════════════ */
.lb-modal-backdrop { background: rgba(10,10,10,0.55); }
.lb-modal { background: var(--paper); border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-lg); max-width: 560px; }
.lb-modal-head { display: flex; align-items: center; gap: 10px; border-bottom: var(--lb-stroke) solid var(--ink); padding: 12px 14px; background: var(--paper-2); transition: background 200ms var(--ease-out, ease); }
/* Tête colorée à l'identique de la carte d'aperçu (palette par-clé, data-key posé
   par openModal) — continuité visuelle carte → modale. */
.lb-modal[data-key="score_campagne"]  .lb-modal-head,
.lb-modal[data-key="score_global"]    .lb-modal-head { background: var(--yellow); }
.lb-modal[data-key="streak_campagne"] .lb-modal-head,
.lb-modal[data-key="streak_global"]   .lb-modal-head { background: var(--card-peach); }
.lb-modal[data-key="accuracy_global"] .lb-modal-head { background: #f4b6b6; }
.lb-modal[data-key="accuracy_gauche"] .lb-modal-head { background: #e63946; color: var(--paper); }
.lb-modal[data-key="accuracy_droite"] .lb-modal-head { background: #2a4dff; color: var(--paper); }
.lb-modal[data-key="collection"]      .lb-modal-head { background: #b8e8c4; }
.lb-modal[data-key="cards_rare"]      .lb-modal-head { background: var(--card-gold); }
.lb-modal[data-key="achievements"]    .lb-modal-head { background: var(--card-lavender); }
.lb-modal[data-key="dlp_global"]      .lb-modal-head { background: var(--ink); color: var(--paper); }
.lb-modal[data-key="dlp_global"]      .lb-modal-head h3 { color: var(--lb-gold); }
/* Sur tête foncée (gauche/droite/global), la pastille reste papier mais l'icône
   repasse en encre (sinon stroke=currentColor=paper → blanc sur blanc = invisible). */
.lb-modal[data-key="accuracy_gauche"] .lb-modal-head .lb-card-icon,
.lb-modal[data-key="accuracy_droite"] .lb-modal-head .lb-card-icon,
.lb-modal[data-key="dlp_global"]      .lb-modal-head .lb-card-icon { background: var(--paper); color: var(--ink); }
.lb-modal-head .lb-card-icon { width: 30px; height: 30px; transform: rotate(-3deg); }
/* Titre : le legacy (style inline de leaderboards.html) pose nowrap+ellipsis,
   jamais neutralisés par ce reskin qui grossit la police → « MEILLEUR SCOR… »
   tronqué sur mobile. On ré-autorise le wrap multi-lignes + taille un peu
   plus contenue. */
.lb-modal-head h3 { margin: 0; flex: 1 1 auto; min-width: 0; font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(14px, 3.6vw, 21px); line-height: 1.12; text-transform: uppercase; white-space: normal; overflow: visible; text-overflow: clip; }
.lb-modal-close { flex: 0 0 auto; cursor: pointer; background: var(--ink); color: var(--paper); border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm); width: 28px; height: 28px; font-family: 'Archivo Black', sans-serif; }
.lb-modal-body { padding: 14px; }
.lb-rank-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.lb-rank-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper); box-shadow: var(--lb-shadow-sm);
  padding: 8px 11px;
}
.lb-rank-row .pos { font-family: 'Archivo Black', sans-serif; font-size: 13px; white-space: nowrap; }
.lb-rank-row .name { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-rank-row .val { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: -0.5px; white-space: nowrap; }
.lb-rank-row .lb-rank-u { font-family: 'Space Mono', monospace; font-style: normal; font-weight: 700; font-size: 0.6em; letter-spacing: 0.06em; opacity: 0.55; }
.lb-rank-row.is-you { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--yellow); transform: rotate(-0.6deg); }
.lb-rank-row.is-you .pos { background: var(--yellow); color: var(--ink); padding: 2px 6px; }
.lb-rank-separator { text-align: center; font-family: 'Archivo Black', sans-serif; letter-spacing: 4px; opacity: 0.45; margin: 4px 0; }

/* Apparition en cascade des lignes (--ri = index posé par le JS). */
.lb-rank-row { animation: lb-row-in 300ms var(--ease-out, ease) backwards; animation-delay: calc(var(--ri, 0) * 28ms); }
@keyframes lb-row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.lb-rank-row.is-you { animation: none; }
@media (prefers-reduced-motion: reduce) { .lb-rank-row { animation: none; } }

/* Bouton « Charger plus » — pleine largeur, néo-brut. */
.lb-rank-more {
  display: block; width: 100%; margin-top: 9px; cursor: pointer;
  font-family: 'Archivo Black', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--paper-2); color: var(--ink); border: var(--lb-stroke) solid var(--ink);
  box-shadow: var(--lb-shadow-sm); padding: 11px 12px;
  transition: transform 110ms var(--ease-out, ease), box-shadow 110ms var(--ease-out, ease), background 110ms ease;
}
html.dlp-can-hover .lb-rank-more:hover { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: var(--lb-shadow); }
.lb-rank-more:active { transform: translate(1px, 1px); box-shadow: var(--lb-shadow-sm); }

/* ─── Tablette/mobile : le rang global passe pleine largeur sous le pseudo
   (sinon il coince le pseudo et le tronque sur les viewports étroits). ─── */
@media (max-width: 600px) {
  .lb-me-dash-global { margin-left: 0; width: 100%; transform: rotate(0deg); justify-content: center; }
  html.dlp-can-hover .lb-me-dash-global:hover { transform: translate(-2px,-2px); }
  .lb-me-dash-global:active { transform: translate(1px,1px); }
}

/* ─── Responsive 340px (bloc Toi + podium + rangs) ─── */
@media (max-width: 480px) {
  .lb-me-dash-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .lb-me-dash-name { font-size: clamp(22px, 7vw, 28px); }
  .lb-podium { gap: 7px; padding-top: 40px; }
  .lb-pod-card { padding: 7px 3px; }
  .lb-pod-name { font-size: 10px; }
  .lb-pod-val { font-size: 13px; } .lb-pod-1 .lb-pod-val { font-size: 15px; }
  .lb-pod-step .rk { font-size: 32px; }
  .lb-pod-1 .lb-pod-step { height: 92px; } .lb-pod-2 .lb-pod-step { height: 66px; } .lb-pod-3 .lb-pod-step { height: 48px; }
  .lb-rank-row .name { font-size: 12px; } .lb-rank-row .val { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ONGLET « SUCCÈS » — reskin calqué TEL QUEL sur la page Succès du jeu
   (achievements.html : .cat-section / .cat-head / .ach-grid / cartes pastel
   par catégorie). Vue RARETÉ : on conserve l'archi d'info des classements
   (la rareté % en évidence à droite) mais on adopte les tokens visuels de la
   page Succès. Valeurs extraites littéralement de achievements.html.
   ════════════════════════════════════════════════════════════════════════ */

/* Conteneur : pile verticale de sections (la grille est DANS chaque section). */
#lb-pane-ach .lb-ach-list { display: block; }

/* ── Section par catégorie : tête = puce encre tiltée + icône pastel penchée,
   look IDENTIQUE à la page Succès du jeu (achievements-v3.css). Espacement
   resserré (≈16px replié) pour ne pas trop aérer quand tout est fermé. ── */
#lb-pane-ach .cat-section { margin-top: 16px; }
#lb-pane-ach .cat-section:first-of-type { margin-top: 8px; }
#lb-pane-ach .cat-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px; padding-bottom: 0; border-bottom: 0;
  cursor: pointer; user-select: none;
}
#lb-pane-ach .cat-head[data-flat] { cursor: default; }
html.dlp-can-hover #lb-pane-ach .cat-head:not([data-flat]):hover h2 { transform: rotate(-1deg) translate(-1px, -1px); }
#lb-pane-ach .cat-head .cat-chev {
  font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1; opacity: 0.6;
  transition: transform 180ms var(--ease-out, ease);
  display: inline-block; width: 14px; text-align: center; flex: 0 0 auto;
}
#lb-pane-ach .cat-section.is-collapsed .cat-chev { transform: rotate(-90deg); }
/* Icône de catégorie : petit carré pastel penché néo-brut (langage badge V3). */
#lb-pane-ach .cat-head .cat-ico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  background: var(--paper); border: var(--lb-stroke) solid var(--ink);
  box-shadow: var(--lb-shadow-sm); transform: rotate(-3deg);
}
#lb-pane-ach .cat-head .cat-ico .ico { width: 18px; height: 18px; }
/* Fond de l'icône = pastel de la catégorie (raccord avec les cartes débloquées). */
#lb-pane-ach .cat-section[data-cat="decouverte"]  .cat-ico { background: #c4e3f0; }
#lb-pane-ach .cat-section[data-cat="collection"]  .cat-ico { background: #c4e6cc; }
#lb-pane-ach .cat-section[data-cat="combo"]       .cat-ico { background: #fcd0d8; }
#lb-pane-ach .cat-section[data-cat="serie"]       .cat-ico { background: #fce9a8; }
#lb-pane-ach .cat-section[data-cat="performance"] .cat-ico { background: #fce9a8; }
#lb-pane-ach .cat-section[data-cat="spe"]         .cat-ico { background: #dccdf0; }
#lb-pane-ach .cat-section[data-cat="region"]      .cat-ico { background: #b8e0d8; }
#lb-pane-ach .cat-section[data-cat="style"]       .cat-ico { background: #ffdcba; }
#lb-pane-ach .cat-section[data-cat="precision"]   .cat-ico { background: #d2e8a8; }
#lb-pane-ach .cat-section[data-cat="meta"]        .cat-ico { background: #dad6c2; }
#lb-pane-ach .cat-section[data-cat="daily"]       .cat-ico { background: #f0c4d3; }
#lb-pane-ach .cat-section[data-cat="politique"]   .cat-ico { background: #ffe066; }
#lb-pane-ach .cat-section[data-cat="temporel"]    .cat-ico { background: #c4cef0; }
#lb-pane-ach .cat-section[data-cat="profession"]  .cat-ico { background: #e8d4b0; }
#lb-pane-ach .cat-section[data-cat="confusions"]  .cat-ico { background: #fcd0d8; }
#lb-pane-ach .cat-section[data-cat="cartes"]      .cat-ico { background: #ddc6f0; }
#lb-pane-ach .cat-section[data-cat="modes"]       .cat-ico { background: #ffdcba; }
/* Titre = puce encre tiltée (même puce que les autres têtes de section). */
#lb-pane-ach .cat-head h2 {
  margin: 0; background: var(--ink); color: var(--paper);
  padding: 5px 12px 6px; border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm);
  transform: rotate(-1deg);
  font-family: 'Archivo Black', sans-serif; font-size: clamp(13px, 1.7vw, 17px);
  letter-spacing: 0.01em; line-height: 1; text-transform: uppercase;
}
#lb-pane-ach .cat-head .cat-count {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.7; margin-left: auto; flex: 0 0 auto;
}
#lb-pane-ach .cat-section.is-collapsed .ach-grid,
#lb-pane-ach .cat-section.is-collapsed .ach-section-more { display: none; }

/* Bouton « Charger plus » par section (cohérent Collection / RP). */
#lb-pane-ach .ach-section-more {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 12px 0; margin-top: 4px;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.85;
}
#lb-pane-ach .ach-section-more-btn {
  font-family: 'Archivo Black', sans-serif; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; background: var(--paper); color: var(--ink);
  border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm);
  padding: 8px 14px; cursor: pointer;
  transition: transform 110ms var(--ease-out, ease), box-shadow 110ms var(--ease-out, ease);
}
html.dlp-can-hover #lb-pane-ach .ach-section-more-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--lb-shadow); }
#lb-pane-ach .ach-section-more-btn:active { transform: translate(1px, 1px); box-shadow: var(--lb-shadow-sm); }
#lb-pane-ach .ach-section-more-count { opacity: 0.6; }

/* ── Grille des succès ── */
#lb-pane-ach .ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* ── Carte succès (rareté) : look .ach-card. La rareté est une barre-mètre
   SOUS la description (emplacement de la barre de progression de la page
   Succès) → le texte garde toute la largeur (pas de noms coupés). ── */
#lb-pane-ach .lb-ach-card {
  display: flex; gap: 14px; align-items: center; position: relative;
  padding: 14px; background: var(--paper-2);
  border: var(--lb-stroke) solid var(--ink); box-shadow: var(--lb-shadow-sm);
  transition: transform 120ms var(--ease-out, ease), box-shadow 120ms var(--ease-out, ease);
}
#lb-pane-ach .lb-ach-card[data-unlocked="1"] { box-shadow: var(--lb-shadow); }
html.dlp-can-hover #lb-pane-ach .lb-ach-card[data-unlocked="1"]:hover { transform: translate(-2px, -2px); box-shadow: var(--lb-shadow-lg); }
#lb-pane-ach .lb-ach-card[data-unlocked="0"] { opacity: 0.9; }

/* Pastels néobrut — un ton par catégorie, appliqués quand débloqué. */
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="decouverte"]  { background: #c4e3f0; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="collection"]  { background: #c4e6cc; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="combo"]       { background: #fcd0d8; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="serie"]       { background: #fce9a8; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="performance"] { background: #fce9a8; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="spe"]         { background: #dccdf0; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="region"]      { background: #b8e0d8; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="style"]       { background: #ffdcba; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="precision"]   { background: #d2e8a8; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="meta"]        { background: #dad6c2; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="daily"]       { background: #f0c4d3; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="politique"]   { background: #ffe066; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="temporel"]    { background: #c4cef0; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="profession"]  { background: #e8d4b0; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="confusions"]  { background: #fcd0d8; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="cartes"]      { background: #ddc6f0; }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-cat="modes"]       { background: #ffdcba; }

/* Tiers : liseré accent pour platinum/gold (uniquement débloqués). */
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-tier="platinum"] { box-shadow: 7px 7px 0 var(--ink), inset 0 0 0 3px var(--ink); }
#lb-pane-ach .lb-ach-card[data-unlocked="1"][data-tier="gold"]     { box-shadow: var(--lb-shadow-lg); }

#lb-pane-ach .lb-ach-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: grid; place-items: center;
  border: var(--lb-stroke) solid var(--ink); background: var(--paper);
}
#lb-pane-ach .lb-ach-card[data-unlocked="1"] .lb-ach-icon { background: var(--ink); color: var(--paper); }
#lb-pane-ach .lb-ach-card[data-unlocked="0"] .lb-ach-icon { border-color: rgba(10,10,10,0.3); }
#lb-pane-ach .lb-ach-card[data-unlocked="0"] .lb-ach-icon .ico { opacity: 0.4; }

#lb-pane-ach .lb-ach-info { flex: 1; min-width: 0; }
#lb-pane-ach .lb-ach-info h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px; text-transform: uppercase; line-height: 1.1;
  margin: 0; overflow-wrap: anywhere;
}
#lb-pane-ach .lb-ach-card[data-unlocked="0"] .lb-ach-info h4 { opacity: 0.55; }
#lb-pane-ach .lb-ach-info p {
  font-family: 'Space Mono', monospace;
  font-size: 12px; margin: 4px 0 0; line-height: 1.3; opacity: 0.85;
}
#lb-pane-ach .lb-ach-card[data-unlocked="0"] .lb-ach-info p { opacity: 0.5; }

/* Rareté = juste un % de joueur·euses ayant le succès. PAS de barre (inutile) :
   le % est AGRANDI (focal) + le nombre de joueur·euses en petit à côté. */
#lb-pane-ach .lb-ach-rarity { display: flex; align-items: baseline; gap: 9px; margin-top: 10px; }
#lb-pane-ach .lb-ach-rarity .pct { flex: 0 0 auto; font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; line-height: 0.95; }
#lb-pane-ach .lb-ach-rarity .pct .u { font-family: 'Space Mono', monospace; font-style: normal; font-weight: 700; font-size: 0.4em; letter-spacing: 0.06em; opacity: 0.55; margin-left: 3px; }
#lb-pane-ach .lb-ach-rarity .cnt { flex: 0 1 auto; min-width: 0; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.04em; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pastille « débloqué » en coin haut-droit (= .ach-check de la page Succès). */
#lb-pane-ach .lb-ach-check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: 'Archivo Black', sans-serif; font-size: 13px; line-height: 1;
  border: var(--lb-stroke) solid var(--ink);
}
#lb-pane-ach .lb-ach-card[data-unlocked="1"] .lb-ach-info h4 { padding-right: 24px; }

/* Entrée : pop-in léger (têtes + premières cartes), cohérent page Succès. */
@keyframes lb-ach-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#lb-pane-ach .cat-head { animation: lb-ach-pop 340ms var(--ease-out, ease) backwards; }
#lb-pane-ach .ach-grid > *:nth-child(-n+14) { animation: lb-ach-pop 340ms var(--ease-out, ease) backwards; }
#lb-pane-ach .ach-grid > *:nth-child(1)  { animation-delay: 60ms; }
#lb-pane-ach .ach-grid > *:nth-child(2)  { animation-delay: 80ms; }
#lb-pane-ach .ach-grid > *:nth-child(3)  { animation-delay: 100ms; }
#lb-pane-ach .ach-grid > *:nth-child(4)  { animation-delay: 120ms; }
#lb-pane-ach .ach-grid > *:nth-child(5)  { animation-delay: 140ms; }
#lb-pane-ach .ach-grid > *:nth-child(6)  { animation-delay: 160ms; }
#lb-pane-ach .ach-grid > *:nth-child(7)  { animation-delay: 180ms; }
#lb-pane-ach .ach-grid > *:nth-child(8)  { animation-delay: 200ms; }
#lb-pane-ach .ach-grid > *:nth-child(9)  { animation-delay: 220ms; }
#lb-pane-ach .ach-grid > *:nth-child(10) { animation-delay: 240ms; }
#lb-pane-ach .ach-grid > *:nth-child(11) { animation-delay: 260ms; }
#lb-pane-ach .ach-grid > *:nth-child(12) { animation-delay: 280ms; }
#lb-pane-ach .ach-grid > *:nth-child(13) { animation-delay: 300ms; }
#lb-pane-ach .ach-grid > *:nth-child(14) { animation-delay: 320ms; }
.reduce-motion #lb-pane-ach .cat-head,
.reduce-motion #lb-pane-ach .ach-grid > * { animation: none !important; }

@media (max-width: 420px) {
  #lb-pane-ach .ach-grid { grid-template-columns: 1fr; }
  #lb-pane-ach .lb-ach-icon { width: 48px; height: 48px; }
  #lb-pane-ach .lb-ach-rarity .pct { font-size: 26px; }
}