/* ═══════════════════════════════════════════════════════════════════
   PROFILE PAGE — styles complets (redesign Meta TFT)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bande décorative haut de page ─────────────────────────────────── */
.pf-banner-decor {
  height  : 5px;
  background: linear-gradient(90deg, #5865f2 0%, #818cf8 50%, #34d399 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL  (sidebar + main)
   ══════════════════════════════════════════════════════════════════════ */
.pf-layout {
  display              : grid;
  grid-template-columns: 268px 1fr;
  gap                  : 1.5rem;
  align-items          : start;
  margin-top           : 1.5rem;
  margin-bottom        : 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════════ */
.pf-sidebar {
  position      : sticky;
  top           : 80px;
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : calc(var(--radius) + 4px);
  padding       : 1.5rem 1.25rem;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .75rem;
  text-align    : center;
}

/* ── Avatar ─────────────────────────────────────────────────────────── */
.pf-sid-avatar-wrap { position: relative; }
.pf-sid-avatar {
  width        : 90px;
  height       : 90px;
  border-radius: 50%;
  border       : 3px solid var(--av-ring, rgba(129,140,248,.6));
  box-shadow   : 0 0 0 5px color-mix(in srgb, var(--av-ring, #818cf8) 15%, transparent),
                 0 8px 24px rgba(0,0,0,.45);
  object-fit   : cover;
  background   : var(--bg-card);
}

/* ── Identité ───────────────────────────────────────────────────────── */
.pf-sid-identity {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .25rem;
}
.pf-sid-name {
  font-size  : 1.2rem;
  font-weight: 900;
  margin     : 0;
  line-height: 1.1;
}
.pf-sid-tag {
  font-size    : .78rem;
  font-weight  : 700;
  color        : rgba(255,255,255,.4);
  background   : rgba(255,255,255,.05);
  border       : 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding      : .1rem .45rem;
}
.pf-sid-meta {
  display        : flex;
  align-items    : center;
  gap            : .5rem;
  flex-wrap      : wrap;
  justify-content: center;
  font-size      : .73rem;
  color          : var(--text-muted);
  margin-top     : .1rem;
}
.pf-sid-discord {
  display    : inline-flex;
  align-items: center;
  gap        : .25rem;
  color      : rgba(255,255,255,.3);
  font-size  : .73rem;
  text-decoration: none;
  transition : color .15s;
}
.pf-sid-discord:hover { color: #5865f2; }

/* ── Emblème de rang ────────────────────────────────────────────────── */
.pf-sid-rank {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .2rem;
  width         : 100%;
  padding       : 1rem 0 .5rem;
}
.pf-sid-diamond {
  width          : 62px;
  height         : 62px;
  background     : var(--tb, rgba(129,140,248,.12));
  border         : 2px solid var(--tc, #818cf8);
  transform      : rotate(45deg);
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  box-shadow     : 0 0 20px var(--tb, rgba(129,140,248,.2));
  margin-bottom  : .45rem;
}
.pf-sid-diamond span {
  transform  : rotate(-45deg);
  font-size  : 1.5rem;
  font-weight: 900;
  color      : var(--tc, #818cf8);
  line-height: 1;
}
.pf-sid-rank-label {
  font-size     : .65rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color         : var(--text-muted);
  margin        : 0;
}
.pf-sid-rank-name  { font-size: 1.05rem; font-weight: 900; margin: 0; }
.pf-sid-mmr {
  font-size  : 1.6rem;
  font-weight: 900;
  margin     : .1rem 0 0;
  line-height: 1;
}
.pf-sid-mmr span { font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.pf-sid-top { font-size: .75rem; color: var(--text-muted); margin: 0; }
.pf-sid-top strong { color: var(--text); }

/* ── Bouton comparer ─────────────────────────────────────────────────── */
.pf-sid-compare-btn {
  display      : flex;
  align-items  : center;
  justify-content: center;
  gap          : .4rem;
  width        : 100%;
  padding      : .55rem .75rem;
  background   : rgba(255,255,255,.04);
  border       : 1px solid var(--border);
  border-radius: .6rem;
  font-size    : .82rem;
  font-weight  : 600;
  color        : var(--text-muted);
  text-decoration: none;
  transition   : background .15s, border-color .15s, color .15s;
}
.pf-sid-compare-btn:hover {
  background  : rgba(129,140,248,.1);
  border-color: rgba(129,140,248,.35);
  color       : var(--accent);
}

/* ── Séparateur ─────────────────────────────────────────────────────── */
.pf-sid-divider {
  width     : 100%;
  height    : 1px;
  background: rgba(255,255,255,.06);
  margin    : .1rem 0;
}

/* ── Grille stats ───────────────────────────────────────────────────── */
.pf-sid-stats {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : .55rem;
  width                : 100%;
}
.pf-sid-stat {
  background    : rgba(255,255,255,.03);
  border        : 1px solid rgba(255,255,255,.05);
  border-radius : 8px;
  padding       : .55rem .4rem;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .12rem;
}
.pf-sid-stat-val { font-size: 1.05rem; font-weight: 800; }
.pf-sid-stat-lbl {
  font-size     : .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color         : var(--text-muted);
}

/* ── Chips rôle / statut ────────────────────────────────────────────── */
.pf-sid-chips {
  display        : flex;
  gap            : .4rem;
  flex-wrap      : wrap;
  justify-content: center;
}
.pf-sid-chip {
  display      : inline-flex;
  padding      : .22rem .6rem;
  border-radius: 999px;
  font-size    : .73rem;
  font-weight  : 700;
  border       : 1px solid;
}
.pf-sid-chip-role   { color: #818cf8; border-color: rgba(129,140,248,.35); background: rgba(129,140,248,.1); }
.pf-sid-chip-online { color: #34d399; border-color: rgba(52,211,153,.35);  background: rgba(52,211,153,.1);  }

/* ── Section avec titre ─────────────────────────────────────────────── */
.pf-sid-section { width: 100%; text-align: left; }
.pf-sid-section-title {
  font-size     : .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color         : var(--text-muted);
  font-weight   : 700;
  margin        : 0 0 .45rem;
}

/* ── Lignes saison mini ──────────────────────────────────────────────── */
.pf-sid-season-row {
  display        : flex;
  align-items    : center;
  gap            : .45rem;
  padding        : .4rem .45rem;
  border-radius  : 8px;
  text-decoration: none;
  color          : var(--text);
  transition     : background .15s;
  font-size      : .83rem;
}
.pf-sid-season-row:hover { background: rgba(255,255,255,.04); }
.pf-sid-season-icon      { font-size: .95rem; }
.pf-sid-season-name      { flex: 1; font-weight: 600; font-size: .83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sid-season-rank {
  font-size    : .75rem;
  font-weight  : 700;
  color        : var(--accent);
  background   : rgba(129,140,248,.1);
  border-radius: 5px;
  padding      : .1rem .38rem;
  flex-shrink  : 0;
}

/* ── Riot account ───────────────────────────────────────────────────── */
.pf-sid-riot {
  display       : flex;
  flex-direction: column;
  gap           : .25rem;
  padding       : .6rem .75rem;
  background    : rgba(255,255,255,.03);
  border        : 1px solid rgba(255,255,255,.05);
  border-radius : 10px;
  text-align    : left;
  width         : 100%;
}
.pf-sid-pbe-name {
  display     : flex;
  align-items : center;
  gap         : .4rem;
  font-size   : .82rem;
  font-weight : 600;
  color       : var(--text-muted);
  margin-bottom: .25rem;
}
.pf-sid-pbe-icon { font-size: .95rem; }

.pf-sid-riot-id   { font-weight: 700; font-size: .88rem; word-break: break-all; }
.pf-sid-riot-meta { display: flex; gap: .65rem; font-size: .73rem; color: var(--text-muted); }
.pf-sid-riot-region {
  display      : inline-flex;
  padding      : .05rem .38rem;
  border-radius: 5px;
  background   : rgba(255,255,255,.06);
  font-weight  : 700;
  font-size    : .68rem;
  color        : var(--text);
}
.pf-sid-riot-rank { font-size: .8rem; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   MAIN
   ══════════════════════════════════════════════════════════════════════ */
.pf-main {
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  gap           : 1rem;
}

/* ── Barre d'onglets ─────────────────────────────────────────────────── */
.pf-tabs-bar {
  display        : flex;
  gap            : .15rem;
  background     : var(--bg-card);
  border         : 1px solid var(--border);
  border-radius  : calc(var(--radius) + 2px);
  padding        : .25rem;
  overflow-x     : auto;
  scrollbar-width: none;
}
.pf-tabs-bar::-webkit-scrollbar { display: none; }

.pf-tab-btn {
  padding      : .55rem 1.05rem;
  border-radius: var(--radius);
  border       : none;
  background   : none;
  color        : var(--text-muted);
  font-size    : .88rem;
  font-weight  : 600;
  cursor       : pointer;
  white-space  : nowrap;
  transition   : background .15s, color .15s;
}
.pf-tab-btn:hover      { background: rgba(255,255,255,.05); color: var(--text); }
.pf-tab-btn.pf-tab-active {
  background: rgba(129,140,248,.15);
  color     : var(--accent);
}
.pf-tab-count {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  min-width      : 16px;
  height         : 16px;
  padding        : 0 4px;
  border-radius  : 999px;
  background     : var(--accent);
  color          : #fff;
  font-size      : .62rem;
  font-weight    : 700;
  vertical-align : middle;
  margin-left    : .3rem;
}

/* Panneaux */
.pf-tab-panel        { display: none; }
.pf-tab-panel-active { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   CARTE VUE D'ENSEMBLE (bulles + stats + distribution)
   ══════════════════════════════════════════════════════════════════════ */
.pf-ov-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  padding      : 1.25rem;
  display      : flex;
  flex-direction: column;
  gap          : 1rem;
}

/* Bulles + stats rapides */
.pf-ov-top {
  display    : flex;
  align-items: flex-start;
  gap        : 1.25rem;
  flex-wrap  : wrap;
}
.pf-bubbles {
  display  : flex;
  gap      : .3rem;
  flex-wrap: wrap;
  flex     : 1;
  min-width: 0;
}
.pf-bubble {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 26px;
  height         : 26px;
  border-radius  : 50%;
  font-size      : .75rem;
  font-weight    : 800;
  flex-shrink    : 0;
  cursor         : default;
}
/* Classes de couleur par placement */
.pf-bubble-b1 { background: rgba(251,191,36,.2);  color: #fbbf24; border: 1px solid rgba(251,191,36,.5); }
.pf-bubble-b2 { background: rgba(226,232,240,.12); color: #e2e8f0; border: 1px solid rgba(226,232,240,.35); }
.pf-bubble-b3 { background: rgba(205,127,50,.15);  color: #cd7f32; border: 1px solid rgba(205,127,50,.4); }
.pf-bubble-b4 { background: rgba(52,211,153,.12);  color: #34d399; border: 1px solid rgba(52,211,153,.35); }
.pf-bubble-b5 { background: rgba(248,113,113,.08); color: #f87171; border: 1px solid rgba(248,113,113,.25); }

/* Stats rapides à droite des bulles */
.pf-ov-quick-stats {
  display    : flex;
  gap        : 1.25rem;
  align-items: center;
  flex-shrink: 0;
}
.pf-ov-qs { display: flex; flex-direction: column; align-items: center; gap: .08rem; }
.pf-ov-qs-val {
  font-size  : 1.1rem;
  font-weight: 800;
}
.pf-ov-qs-lbl {
  font-size     : .63rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color         : var(--text-muted);
  white-space   : nowrap;
}
.pf-ov-qs-muted            { opacity: .65; }
.pf-ov-qs-muted .pf-ov-qs-lbl {
  font-size     : .72rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Distribution des placements */
.pf-place-dist { display: flex; flex-direction: column; gap: .32rem; }
.pf-pd-row { display: flex; align-items: center; gap: .55rem; }
.pf-pd-lbl {
  font-size : .72rem;
  font-weight: 700;
  min-width : 26px;
  text-align: right;
  flex-shrink: 0;
}
.pf-pd-lbl-top { color: #34d399; }
.pf-pd-lbl-bot { color: var(--text-muted); }
.pf-pd-track {
  flex         : 1;
  height       : 7px;
  border-radius: 999px;
  background   : rgba(255,255,255,.05);
  overflow     : hidden;
}
.pf-pd-fill {
  height       : 100%;
  border-radius: 999px;
  transition   : width .35s ease;
}
.pf-pd-fill-top { background: linear-gradient(90deg, #34d399, #059669); }
.pf-pd-fill-bot { background: rgba(248,113,113,.45); }
.pf-pd-count {
  font-size  : .7rem;
  font-weight: 700;
  min-width  : 18px;
  text-align : right;
  color      : var(--text-muted);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SPLIT (Graphique | Derniers matchs)
   ══════════════════════════════════════════════════════════════════════ */
.pf-split {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1rem;
  align-items          : start;
}
.pf-split-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  padding      : 1.25rem;
}
.pf-split-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : .75rem;
  margin-bottom  : 1rem;
}
.pf-split-title { font-weight: 700; font-size: .92rem; }

/* Select période graphique */
.pf-period-select {
  background   : rgba(255,255,255,.05);
  border       : 1px solid var(--border);
  border-radius: 8px;
  color        : var(--text-muted);
  font-size    : .75rem;
  padding      : .25rem .5rem;
  cursor       : pointer;
}
.pf-period-select:focus { outline: none; border-color: var(--accent); }

/* Lien switch d'onglet */
.pf-tab-link {
  font-size  : .8rem;
  font-weight: 600;
  color      : var(--accent);
  background : none;
  border     : none;
  cursor     : pointer;
  padding    : 0;
  transition : opacity .15s;
}
.pf-tab-link:hover { opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS
   ══════════════════════════════════════════════════════════════════════ */

/* Graphique */
.chart-canvas-wrap {
  position     : relative;
  background   : rgba(0,0,0,.18);
  border-radius: 10px;
  padding      : .75rem;
  overflow     : hidden;
}
.chart-canvas-wrap canvas { display: block; width: 100% !important; }

/* Mini liste de matchs */
.match-mini-list { display: flex; flex-direction: column; gap: .38rem; }
.match-mini-row {
  display        : flex;
  align-items    : center;
  gap            : .65rem;
  padding        : .55rem .7rem;
  border-radius  : 10px;
  background     : rgba(255,255,255,.03);
  border         : 1px solid rgba(255,255,255,.05);
  text-decoration: none;
  color          : inherit;
  transition     : background .15s;
}
.match-mini-row:hover { background: rgba(255,255,255,.06); }

/* Chips de placement */
.match-mini-place,
.history-place {
  min-width      : 2.2rem;
  height         : 2.2rem;
  border-radius  : 7px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : .82rem;
  font-weight    : 800;
  flex-shrink    : 0;
}
.place-gold   { background: rgba(251,191,36,.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.place-silver { background: rgba(148,163,184,.12); color: #94a3b8; border: 1px solid rgba(148,163,184,.25); }
.place-green  { background: rgba(52,211,153,.10);  color: #34d399; border: 1px solid rgba(52,211,153,.25); }
.place-gray   { background: rgba(255,255,255,.04); color: var(--text-muted); border: 1px solid rgba(255,255,255,.08); }

.match-mini-info  { flex: 1; display: flex; flex-direction: column; gap: .07rem; overflow: hidden; }
.match-mini-type  { font-size: .82rem; font-weight: 600; }
.match-mini-date  { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-mini-dur   { color: rgba(255,255,255,.3); }
.match-mini-right { display: flex; flex-direction: column; align-items: flex-end; gap: .07rem; flex-shrink: 0; }
.match-mini-delta { font-size: .82rem; font-weight: 800; }
.match-mini-total { font-size: .7rem; color: var(--text-muted); }

/* Deltas couleur */
.delta-pos { color: #34d399; }
.delta-neg { color: #f87171; }

/* Notices et empty states */
.tp-notice {
  padding      : .9rem 1rem;
  border-radius: var(--radius);
  border       : 1px solid var(--border);
  background   : rgba(255,255,255,.03);
  color        : var(--text-muted);
}
.tp-notice-error { border-color: rgba(237,66,69,.35); background: rgba(237,66,69,.08); color: #ffb3b5; }
.tp-notice-warn  { border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.08); color: #f4d18f; }

.tp-empty { color: var(--text-muted); font-size: .9rem; padding: 1rem 0; }
.tp-empty-state {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  text-align    : center;
  gap           : .75rem;
  padding       : 3rem 1rem;
}
.tp-empty-state h3   { font-size: 1.25rem; margin: 0; }
.tp-empty-state p    { color: var(--text-muted); max-width: 36rem; margin: 0; }
.tp-empty-state p a  { color: var(--accent); }
.tp-empty-icon       { font-size: 2rem; opacity: .5; }

/* ══════════════════════════════════════════════════════════════════════
   ONGLET LIVE
   ══════════════════════════════════════════════════════════════════════ */
.live-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1.25rem;
  align-items          : start;
}
.live-rank-card {
  background    : linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.1));
  border        : 1px solid color-mix(in srgb, var(--live-color, #34d399) 30%, transparent);
  border-radius : calc(var(--radius) + 2px);
  padding       : 1.5rem;
  display       : flex;
  flex-direction: column;
  gap           : 1rem;
}
.live-rank-emblem { display: flex; justify-content: center; }
.live-rank-diamond {
  width          : 80px;
  height         : 80px;
  background     : rgba(0,0,0,.25);
  border         : 2px solid var(--live-color, #34d399);
  transform      : rotate(45deg);
  border-radius  : 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  box-shadow     : 0 0 24px rgba(52,211,153,.2);
}
.live-rank-diamond span { transform: rotate(-45deg); font-size: 1.8rem; font-weight: 900; color: var(--live-color, #34d399); }
.live-rank-info   { text-align: center; }
.live-rank-label  { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .35rem; }
.live-rank-name   { font-size: 1.6rem; font-weight: 900; margin: 0; line-height: 1.1; }
.live-rank-lp     { font-size: 1rem; font-weight: 800; margin-top: .25rem; }
.live-rank-flags  { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.live-badge       { font-size: .72rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.live-badge-hot   { color: #fb923c; border-color: rgba(251,146,60,.35); background: rgba(251,146,60,.08); }
.live-badge-warn  { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
.live-rank-stats {
  display              : grid;
  grid-template-columns: repeat(3,1fr);
  gap                  : .5rem;
  padding-top          : .75rem;
  border-top           : 1px solid rgba(255,255,255,.06);
  text-align           : center;
}
.live-rank-stat        { display: flex; flex-direction: column; gap: .15rem; }
.live-rank-stat span   { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.live-rank-stat strong { font-size: 1.1rem; font-weight: 800; }
.text-green            { color: #34d399; }

.live-info-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : .75rem;
}
.live-info-full { grid-column: 1 / -1; }
.live-info-item {
  background    : rgba(255,255,255,.03);
  border        : 1px solid rgba(255,255,255,.06);
  border-radius : 10px;
  padding       : .9rem 1rem;
  display       : flex;
  flex-direction: column;
  gap           : .2rem;
}
.live-info-label       { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.live-info-item strong { font-size: 1rem; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   ONGLET HISTORIQUE
   ══════════════════════════════════════════════════════════════════════ */
.history-list { display: flex; flex-direction: column; gap: .5rem; }
.history-row {
  display              : grid;
  grid-template-columns: 2.8rem 1fr auto auto;
  align-items          : center;
  gap                  : 1rem;
  padding              : .9rem 1.1rem;
  background           : var(--bg-card);
  border               : 1px solid var(--border);
  border-left          : 4px solid transparent;
  border-radius        : var(--radius);
  text-decoration      : none;
  color                : inherit;
  transition           : background .15s, transform .1s;
}
.history-row:hover { background: var(--bg-hover); transform: translateY(-1px); }
.history-win       { border-left-color: #34d399; }
.history-loss      { border-left-color: #f87171; }
.history-info      { display: flex; flex-direction: column; gap: .1rem; }
.history-type      { font-size: .9rem; font-weight: 600; }
.history-date      { font-size: .78rem; color: var(--text-muted); }
.history-dur       { color: rgba(255,255,255,.3); }
.history-players   { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.history-mmr       { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.history-delta     { font-size: .9rem; font-weight: 800; }
.history-after     { font-size: .75rem; color: var(--text-muted); }

.history-pagination {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 1rem;
  margin-top     : 1.25rem;
}
.history-page { font-size: .88rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   ONGLET HISTORIQUE LIVE
   ══════════════════════════════════════════════════════════════════════ */
.lh-list { display: flex; flex-direction: column; gap: .65rem; }

.lh-card {
  display       : flex;
  flex-direction: column;
  gap           : .75rem;
  padding       : 1rem 1.1rem;
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-left   : 4px solid transparent;
  border-radius : var(--radius);
  transition    : background .15s;
}
.lh-card:hover    { background: var(--bg-hover); }
.lh-card-win      { border-left-color: #34d399; }
.lh-card-loss     { border-left-color: #f87171; }

/* Ligne du bas : augments + traits + niveau côte à côte */
.lh-card-bottom {
  display    : flex;
  align-items: flex-start;
  gap        : 1rem;
  flex-wrap  : wrap;
}

/* Ligne haute : placement + méta + niveau */
.lh-top-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : .75rem;
}

/* Placement + méta */
.lh-left {
  display    : flex;
  align-items: center;
  gap        : .75rem;
  flex-shrink: 0;
}
.lh-place {
  min-width      : 2.6rem;
  height         : 2.6rem;
  border-radius  : 8px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : .9rem;
  font-weight    : 800;
  flex-shrink    : 0;
}
/* Réutilise place-gold/silver/green/gray + ajout bronze */
.place-bronze { background: rgba(205,127,50,.15); color: #cd7f32; border: 1px solid rgba(205,127,50,.35); }

.lh-meta {
  display       : flex;
  flex-direction: column;
  gap           : .18rem;
}
.lh-queue { font-size: .85rem; font-weight: 700; }
.lh-date  { font-size: .73rem; color: var(--text-muted); }
.lh-set   { font-size: .7rem;  color: var(--text-muted); }

/* Champions de la compo */
.lh-units {
  display  : flex;
  flex-wrap: wrap;
  gap      : .4rem;
  width    : 100%;
}
/* Wrap champion + items empilés */
.lh-unit-wrap {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .2rem;
}
.lh-unit {
  position     : relative;
  width        : 38px;
  height       : 38px;
  border-radius: 6px;
  overflow     : visible;
  flex-shrink  : 0;
  border       : 2px solid transparent;
}
/* Couleur du bord selon le coût */
.ur-1cost { border-color: #94a3b8; }
.ur-2cost { border-color: #4ade80; }
.ur-3cost { border-color: #60a5fa; }
.ur-4cost { border-color: #c084fc; }
.ur-5cost { border-color: #fbbf24; }

.lh-unit-img {
  width        : 100%;
  height       : 100%;
  object-fit   : cover;
  border-radius: 4px;
  display      : block;
  background   : rgba(255,255,255,.05);
}
/* Étoiles en overlay bas de l'icône */
.lh-unit-stars {
  position   : absolute;
  bottom     : -8px;
  left       : 50%;
  transform  : translateX(-50%);
  font-size  : .5rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.lh-unit-stars-2 { color: #94a3b8; }
.lh-unit-stars-3 { color: #fbbf24; }

/* Items sous le champion */
.lh-unit-items {
  display        : flex;
  justify-content: center;
  gap            : 1px;
}
.lh-item-img {
  width        : 13px;
  height       : 13px;
  border-radius: 2px;
  object-fit   : cover;
  background   : rgba(255,255,255,.06);
}

/* Augments */
.lh-augments, .lh-traits { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 160px; }
.lh-section-lbl {
  font-size     : .63rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color         : var(--text-muted);
  font-weight   : 700;
}

.lh-aug-list {
  display  : flex;
  flex-wrap: wrap;
  gap      : .3rem;
}
.lh-aug-chip {
  font-size    : .73rem;
  font-weight  : 600;
  padding      : .2rem .55rem;
  border-radius: 6px;
  background   : rgba(129,140,248,.1);
  border       : 1px solid rgba(129,140,248,.25);
  color        : #a5b4fc;
  white-space  : nowrap;
}

.lh-trait-list {
  display  : flex;
  flex-wrap: wrap;
  gap      : .3rem;
}
.lh-trait-chip {
  font-size    : .72rem;
  font-weight  : 600;
  padding      : .2rem .5rem;
  border-radius: 6px;
  background   : rgba(255,255,255,.04);
  border       : 1px solid;
  white-space  : nowrap;
}
.lh-trait-chip em { font-style: normal; opacity: .7; margin-left: .2rem; }

/* Niveau (droite dans lh-top-row) */
.lh-right { flex-shrink: 0; }
.lh-level {
  font-size    : .8rem;
  font-weight  : 700;
  color        : var(--text-muted);
  background   : rgba(255,255,255,.05);
  border       : 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding      : .2rem .5rem;
  white-space  : nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   ONGLET PALMARÈS
   ══════════════════════════════════════════════════════════════════════ */
.palmares-list { display: flex; flex-direction: column; gap: .5rem; }
.palm-card {
  display        : flex;
  align-items    : center;
  gap            : 1rem;
  padding        : .9rem 1.1rem;
  background     : var(--bg-card);
  border         : 1px solid var(--border);
  border-radius  : var(--radius);
  text-decoration: none;
  color          : var(--text);
  transition     : background .15s, border-color .15s, transform .12s;
}
.palm-card:hover { background: var(--bg-hover); border-color: var(--accent); transform: translateX(3px); }

.palm-badge {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  width          : 54px;
  height         : 54px;
  border-radius  : var(--radius);
  flex-shrink    : 0;
  gap            : .1rem;
  border         : 1px solid transparent;
}
.palm-badge-icon   { font-size: 1.4rem; line-height: 1; }
.palm-badge-rank   { font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.palm-badge-gold   { background: rgba(251,191,36,.15);  border-color: rgba(251,191,36,.4);  color: #fbbf24; }
.palm-badge-silver { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.35); color: #94a3b8; }
.palm-badge-bronze { background: rgba(205,127,50,.12);  border-color: rgba(205,127,50,.35); color: #cd7f32; }
.palm-badge-default{ background: var(--bg); border-color: var(--border); color: var(--text-muted); }

.palm-info   { display: flex; flex-direction: column; min-width: 120px; flex-shrink: 0; }
.palm-season { font-weight: 700; font-size: .93rem; }
.palm-label  { font-size: .76rem; color: var(--text-muted); margin-top: .1rem; }
.palm-stats  { display: flex; gap: 1.5rem; flex: 1; justify-content: flex-end; }
.palm-stat   { display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.palm-stat-value { font-size: .95rem; font-weight: 700; }
.palm-stat-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.palm-card .mc-arrow { font-size: 1.3rem; color: var(--text-muted); transition: color .15s; }
.palm-card:hover .mc-arrow { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pf-layout { grid-template-columns: 230px 1fr; }
}

@media (max-width: 900px) {
  .pf-layout  { grid-template-columns: 1fr; }
  .pf-sidebar { position: static; flex-direction: row; flex-wrap: wrap; text-align: left; }
  .pf-sid-avatar-wrap { flex-shrink: 0; }
  .pf-sid-identity    { align-items: flex-start; }
  .pf-sid-rank        { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .pf-sid-diamond     { width: 48px; height: 48px; }
  .pf-sid-diamond span{ font-size: 1.2rem; }
  .pf-sid-stats       { width: auto; min-width: 200px; }
  .pf-split           { grid-template-columns: 1fr; }
  .live-grid          { grid-template-columns: 1fr; }
  .history-row        { grid-template-columns: 2.8rem 1fr auto; }
  .history-players    { display: none; }
}

@media (max-width: 700px) {
  .pf-ov-top        { flex-direction: column; }
  .pf-ov-quick-stats{ align-self: flex-start; }
  .history-row      { grid-template-columns: 2.8rem 1fr; grid-template-areas: 'place info' 'place mmr'; }
  .history-place    { grid-area: place; align-self: center; }
  .history-info     { grid-area: info; }
  .history-mmr      { grid-area: mmr; align-items: flex-start; }
  .history-players  { display: none; }
  .palm-stats       { display: none; }
  .palm-info        { min-width: 0; }
  .lh-units         { gap: .25rem; }
  .lh-unit          { width: 32px; height: 32px; }
}

@media (max-width: 500px) {
  .pf-tabs-bar { gap: 0; }
  .pf-tab-btn  { padding: .5rem .75rem; font-size: .82rem; }
  .pf-sid-name { font-size: 1.05rem; }
  .pf-sid-mmr  { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   SUCCÈS / BADGES
   ══════════════════════════════════════════════════════════════════════ */

/* ── Compteur sidebar ─────────────────────────────────────────────────── */
.pf-ach-count {
  font-size  : .72rem;
  font-weight: 500;
  color      : var(--text-muted);
  margin-left: .35rem;
}

/* ── Aperçu sidebar (grille d'icônes) ────────────────────────────────── */
.pf-ach-preview {
  display  : flex;
  flex-wrap: wrap;
  gap      : .35rem;
  margin-top: .35rem;
}

.pf-ach-badge {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  border-radius  : .5rem;
  background     : rgba(255,255,255,.05);
  border         : 1px solid rgba(255,255,255,.09);
  font-size      : 1.1rem;
  cursor         : default;
  transition     : transform .15s, border-color .15s;
}
.pf-ach-badge:hover {
  transform   : translateY(-2px) scale(1.08);
  border-color: rgba(255,255,255,.25);
}
.pf-ach-badge-rare {
  background  : linear-gradient(135deg, rgba(250,204,21,.12), rgba(251,191,36,.06));
  border-color: rgba(250,204,21,.35);
  box-shadow  : 0 0 8px rgba(250,204,21,.15);
}

.pf-ach-more {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  border-radius  : .5rem;
  background     : rgba(255,255,255,.04);
  border         : 1px dashed rgba(255,255,255,.15);
  font-size      : .72rem;
  font-weight    : 700;
  color          : var(--text-muted);
  cursor         : pointer;
  transition     : background .15s, color .15s;
}
.pf-ach-more:hover {
  background: rgba(255,255,255,.08);
  color     : var(--text);
}

/* ── Panneau complet (onglet Succès) ─────────────────────────────────── */
.ach-section {
  margin-bottom: 1.75rem;
}

.ach-section-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : .85rem;
}
.ach-section-title {
  font-size  : .92rem;
  font-weight: 700;
  color      : var(--text);
}
.ach-section-count {
  font-size : .75rem;
  color     : var(--text-muted);
  background: rgba(255,255,255,.05);
  border    : 1px solid var(--border);
  padding   : .15rem .55rem;
  border-radius: 999px;
}

.ach-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap                  : .65rem;
}

/* Carte succès */
.ach-card {
  position     : relative;
  display      : flex;
  align-items  : center;
  gap          : .9rem;
  padding      : .85rem 1rem;
  border-radius: .65rem;
  border       : 1px solid var(--border);
  background   : var(--bg-card);
  transition   : border-color .2s, transform .15s;
  overflow     : hidden;
}

/* Déverrouillé */
.ach-card-done {
  border-color: rgba(255,255,255,.1);
}
.ach-card-done:hover {
  border-color: rgba(255,255,255,.22);
  transform   : translateY(-1px);
}

/* Verrouillé */
.ach-card-locked {
  opacity: .45;
  filter : grayscale(1);
}

/* Rare — contour doré */
.ach-card-rare.ach-card-done {
  border-color: rgba(250,204,21,.3);
  background  : linear-gradient(135deg, rgba(250,204,21,.06) 0%, var(--bg-card) 60%);
}
.ach-card-rare.ach-card-done:hover {
  border-color: rgba(250,204,21,.55);
}

.ach-card-icon {
  font-size     : 1.75rem;
  flex-shrink   : 0;
  width         : 40px;
  text-align    : center;
  line-height   : 1;
}

.ach-card-info {
  display       : flex;
  flex-direction: column;
  gap           : .18rem;
  min-width     : 0;
}
.ach-card-label {
  font-size  : .88rem;
  font-weight: 700;
  color      : var(--text);
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}
.ach-card-desc {
  font-size: .78rem;
  color    : var(--text-muted);
  line-height: 1.4;
}
.ach-card-date {
  font-size: .72rem;
  color    : var(--accent);
  margin-top: .1rem;
}

/* Badge RARE en haut à droite */
.ach-card-rare-badge {
  position   : absolute;
  top        : .45rem;
  right      : .6rem;
  font-size  : .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  color      : #fbbf24;
  background : rgba(251,191,36,.12);
  border     : 1px solid rgba(251,191,36,.25);
  padding    : .1em .4em;
  border-radius: .25rem;
}

@media (max-width: 640px) {
  .ach-grid { grid-template-columns: 1fr; }
}