/* =====================================================================
   Wiki Cards — CLASSEMENT (nouveau look) + BARRE D'ONGLETS MOBILE
   À charger en DERNIER (après folio-boost.css).
   Pour retirer : enlever les lignes folio-mobile.css / folio-mobile.js de index.html.
   ===================================================================== */

/* ================================================================ CLASSEMENT */
#view-leaderboard .fp-page-head{
  position:relative; overflow:hidden; padding:26px 30px; border-radius:24px; margin-bottom:18px;
  border:1px solid rgba(245,214,124,0.25);
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(245,214,124,0.22), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(61,118,181,0.25), transparent 60%),
    linear-gradient(135deg, #1a1d27, #0e1016);
}
#view-leaderboard .fp-page-head::after{ /* grand trophée en filigrane */
  content:''; position:absolute; right:-10px; top:50%; width:170px; height:170px; transform:translateY(-50%) rotate(-10deg); opacity:0.07; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5d67c' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
#view-leaderboard .fp-page-head .count b{color:var(--gold-a); font-family:'Chakra Petch', sans-serif; font-size:1.05em;}

/* onglets de mesure : une barre segmentée */
#view-leaderboard .fp-lb-tools .fp-tabs{
  padding:5px; gap:4px; border-radius:16px; background:rgba(7,8,12,0.7); border:1px solid rgba(255,255,255,0.07);
}
#view-leaderboard .fp-lb-tools .fp-tab{clip-path:none; border:none; border-radius:11px; background:transparent; box-shadow:none;}
#view-leaderboard .fp-lb-tools .fp-tab.active{background:linear-gradient(180deg, #ffe9a6, #f5d67c 40%, #c9922e); box-shadow:0 6px 16px -8px rgba(245,214,124,0.8);}

/* podium : une scène éclairée */
#view-leaderboard .fp-podium{
  position:relative; padding:26px 16px 0; border-radius:24px 24px 0 0; margin-bottom:0;
  background:
    radial-gradient(40% 70% at 50% 100%, rgba(245,214,124,0.18), transparent 70%),
    linear-gradient(180deg, transparent, rgba(245,214,124,0.04));
}
#view-leaderboard .fp-podium::after{content:''; position:absolute; left:6%; right:6%; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold-a), transparent); box-shadow:0 0 18px rgba(245,214,124,0.7);}
#view-leaderboard .fp-pod.p1 .fp-av{position:relative; animation:wc-lb-halo 3s ease-in-out infinite;}
@keyframes wc-lb-halo{50%{box-shadow:0 0 0 4px var(--gold-a), 0 0 60px rgba(245,214,124,0.75);}}
#view-leaderboard .fp-pod-step{position:relative; overflow:hidden; font-family:'Chakra Petch', sans-serif !important; border:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -10px 20px rgba(0,0,0,0.15);}
#view-leaderboard .fp-pod-step::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); background-size:250% 100%;
  animation:wc-lb-shine 4s ease-in-out infinite;
}
#view-leaderboard .fp-pod.p2 .fp-pod-step::after{animation-delay:.6s;} #view-leaderboard .fp-pod.p3 .fp-pod-step::after{animation-delay:1.2s;}
@keyframes wc-lb-shine{0%{background-position:150% 0;} 55%, 100%{background-position:-60% 0;}}
#view-leaderboard .fp-pod-val{font-family:'Chakra Petch', sans-serif !important;}
#view-leaderboard .fp-pod.p1 .fp-pod-val{color:var(--gold-a);}
#view-leaderboard .fp-pod .wc-lb-gap{display:block; margin-top:2px; font-size:0.66rem; color:var(--text-faint);}

/* liste : des lignes en « cartes » */
#view-leaderboard .fp-lb-list{border-top-left-radius:0; border-top-right-radius:0; padding:10px; display:flex; flex-direction:column; gap:6px;}
#view-leaderboard .fp-lb-row{background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.05); animation:wc-lb-in .4s both; animation-delay:calc(var(--i, 0) * 25ms);}
@keyframes wc-lb-in{from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:none;}}
#view-leaderboard .fp-lb-row:hover{border-color:rgba(245,214,124,0.3);}
#view-leaderboard .fp-lb-rank{
  width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:10px;
  font:700 0.92rem 'Chakra Petch', sans-serif; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08);
}
#view-leaderboard .fp-lb-row.wc-top10 .fp-lb-rank{color:var(--gold-a); border-color:rgba(245,214,124,0.4); background:rgba(245,214,124,0.08);}
#view-leaderboard .fp-lb-row.me{border-color:rgba(245,214,124,0.55);}
#view-leaderboard .fp-lb-row.me .fp-lb-rank{color:#1a1408; background:linear-gradient(135deg, #fff0bd, #f5d67c 45%, #c9922e); border-color:transparent;}
#view-leaderboard .fp-lb-val b{font-family:'Chakra Petch', sans-serif !important;}
.wc-lb-bar{display:block; height:4px; margin-top:6px; max-width:220px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden;}
.wc-lb-bar span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #c9922e, #f5d67c); transition:width .8s cubic-bezier(.2,.8,.2,1);}
#view-leaderboard .fp-lb-row.me .wc-lb-bar span{background:linear-gradient(90deg, #f5d67c, #fff3c4); box-shadow:0 0 8px rgba(245,214,124,0.7);}

/* ================================================================ BARRE D'ONGLETS (mobile uniquement) */
.wc-tabbar{display:none;}

@media (max-width:760px){
  .wc-tabbar{
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px;
    position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:55;
    height:64px; padding:6px; border-radius:22px;
    background:linear-gradient(180deg, rgba(24,28,38,0.94), rgba(11,13,18,0.96));
    -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(245,214,124,0.25);
    box-shadow:0 18px 40px -12px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .wc-tab{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0;
    border:none; border-radius:16px; background:none; cursor:pointer; color:var(--text-dim, #9a9a93);
    font:600 0.6rem 'Chakra Petch', sans-serif; letter-spacing:0.08em; text-transform:uppercase;
    -webkit-tap-highlight-color:transparent; transition:color .2s, background .25s, transform .12s;
  }
  .wc-tab svg{width:22px; height:22px; transition:transform .3s cubic-bezier(.2,.9,.3,1.4);}
  .wc-tab span{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .wc-tab:active{transform:scale(.92);}
  .wc-tab.on{
    color:#1a1408;
    background:linear-gradient(180deg, #ffe9a6, #f5d67c 40%, #c9922e);
    box-shadow:0 8px 20px -8px rgba(245,214,124,0.8), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .wc-tab.on svg{transform:translateY(-1px) scale(1.08);}
  .wc-tab-badge{
    position:absolute; top:5px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; border-radius:100px;
    display:flex; align-items:center; justify-content:center; font:800 0.58rem 'Space Grotesk', sans-serif; letter-spacing:0;
    color:#fff; background:var(--danger, #e0665c); box-shadow:0 0 0 2px #0e1016;
  }
  .wc-tab-badge.gold{color:#1a1408; background:linear-gradient(120deg, #f5d67c, #c9922e);}
  .wc-tab-badge[hidden]{display:none;}
  .wc-tab.on .wc-tab-badge{box-shadow:0 0 0 2px #f5d67c;}

  /* menu ouvert : la barre reste au-dessus (le bouton Menu sert à refermer) */
  body.wc-menu-open .wc-tabbar{z-index:61;}
  .wc-tab.menu{color:var(--gold-a, #f5d67c); background:rgba(245,214,124,0.12);}
  .sidebar{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;}

  /* place pour la barre sous le contenu */
  #app main{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px));}
  #app footer{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));}
  /* le bouton ☰ du haut devient inutile : l'onglet « Menu » le remplace */
  .mobile-menu-btn{display:none !important;}
  .fp-msg-layout{height:calc(100vh - 290px) !important;}

  /* les éléments flottants passent au-dessus de la barre */
  .fp-notifs{bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important;}
  .wcb-banner{bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important;}
  #toast.toast{bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important;}
  body:has(#app:not([style*="none"])) .wc-consent{bottom:calc(86px + env(safe-area-inset-bottom, 0px));}

  /* ---------- classement sur téléphone */
  #view-leaderboard .fp-page-head{padding:18px 16px; border-radius:18px;}
  #view-leaderboard .fp-page-head::after{width:110px; height:110px;}
  #view-leaderboard .fp-lb-tools{flex-direction:column; align-items:stretch; gap:8px;}
  #view-leaderboard .fp-lb-tools .fp-tabs{margin:0 !important; padding:4px !important; scroll-snap-type:x mandatory;}
  #view-leaderboard .fp-lb-tools .fp-tab{scroll-snap-align:start; padding:8px 12px !important;}
  #view-leaderboard .fp-lb-tools .fp-seg{align-self:center;}
  #view-leaderboard .fp-podium{padding:18px 6px 0 !important; gap:6px !important; margin-top:6px !important;}
  #view-leaderboard .fp-pod-name{font-size:0.78rem;}
  #view-leaderboard .fp-pod small{font-size:0.6rem;}
  #view-leaderboard .fp-lb-list{padding:6px !important;}
  #view-leaderboard .fp-lb-row{gap:9px !important; padding:9px 8px !important; border-radius:12px;}
  #view-leaderboard .fp-lb-row .fp-av{width:32px; height:32px; font-size:0.85rem;}
  #view-leaderboard .fp-lb-rank{width:28px; height:28px; font-size:0.78rem; border-radius:8px;}
  #view-leaderboard .fp-lb-who b{font-size:0.82rem;}
  #view-leaderboard .fp-lb-who small{font-size:0.64rem;}
  #view-leaderboard .fp-lb-val b{font-size:0.9rem;}
  #view-leaderboard .fp-lb-val small{display:none;}
  /* bouton de ligne : juste l'icône */
  #view-leaderboard .fp-lb-row .fp-pill{font-size:0 !important; padding:7px !important; gap:0;}
  #view-leaderboard .fp-lb-row .fp-pill svg{width:15px; height:15px; margin:0;}
  #view-leaderboard .fp-lb-row .fp-pill:not(:has(svg))::before{content:'›'; font-size:1.1rem; line-height:1; padding:0 4px;}
  #view-leaderboard .fp-lb-row .fp-tag{padding:4px 6px;}
  #view-leaderboard .fp-lb-me{bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
}

@media (prefers-reduced-motion: reduce){
  #view-leaderboard .fp-pod.p1 .fp-av, #view-leaderboard .fp-pod-step::after, #view-leaderboard .fp-lb-row{animation:none !important;}
}