/* ------------------------------
   RESET + THEME
-------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0f14;color:#eef3f7}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:root{
  --c-bg:#0b0f14;
  --c-card:#111823;
  --c-card-alt:#0f1420;
  --c-accent:#00e7d6;
  --c-accent-2:#6ec2ff;
  --c-text:#eef3f7;
  --c-text-dim:#b7c3cf;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Couleurs score par pays/compétition (tu peux remplacer par tes couleurs "matchs") */
  --c-score-general: var(--c-accent);         /* Accueil */
  --c-score-england: #9b59b6;                 /* Premier League (placeholder violet) */
  --c-score-france: #4cb7ff;                  /* Ligue 1 (placeholder jaune) */
  --c-score-spain: #f8605b;                   /* La Liga (placeholder rouge) */
  --c-score-germany: #ce1015;                 /* Bundesliga (placeholder rouge foncé) */
  --c-score-italy: #008ed6;                   /* Serie A (placeholder vert) */
}

/* ------------------------------
   BACKGROUND (ballon SVG)
-------------------------------*/
.bg-stage{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(0,231,214,.12) 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, rgba(110,194,255,.10) 0%, transparent 60%),
              linear-gradient(180deg, #0b0f14 0%, #0b0f14 30%, #0d131b 100%);
}
.bg-ball{
  position:absolute; width:min(54vmin,560px); aspect-ratio:1/1;
  top:8vh; left:-18vw; opacity:.07;
  filter:drop-shadow(0 0 24px rgba(0,231,214,.15));
}
.bg-ball svg{width:100%;height:100%}
.bg-ball path{
  fill:none; stroke:var(--c-accent); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------
   APP BAR / HEADER
-------------------------------*/
.appbar{
  position:sticky; top:-70px;
  z-index:50; transition:top .45s ease, background .3s ease, box-shadow .3s ease;
  background:rgba(11,15,20,.35); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.appbar.scrolled{ top:0; background:rgba(10,14,19,.7); box-shadow:var(--shadow) }
.appbar-inner{
  max-width:1200px; margin:auto; padding:10px 20px; display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:44px}
.brand a{font-weight:700; letter-spacing:.3px}
.spacer{flex:1}

/* Langues + actions */
.langbox{position:relative; display:flex; align-items:center; gap:8px}
.lang-trigger{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); cursor:pointer
}
.lang-trigger img{height:18px;border-radius:3px}
.lang-list{
  position:absolute; top:120%; left:0; min-width:180px; background:var(--c-card);
  border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px; display:none;
  box-shadow:var(--shadow)
}
.langbox[aria-expanded="true"] .lang-list{display:block}
.lang-list li{list-style:none}
.lang-list button{
  width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0;
  background:transparent; color:var(--c-text); cursor:pointer; border-radius:10px
}
.lang-list button:hover{background:rgba(255,255,255,.06)}
.lang-list img{height:18px;border-radius:3px}

.actions a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); margin-left:8px; transition:transform .2s ease
}
.actions a:hover{transform:translateY(-2px); background:rgba(255,255,255,.09)}

/* ------------------------------
   NAV SECONDAIRE (onglets ligues)
-------------------------------*/
.tabbar{
  position:relative; z-index:40; background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,.06);
}
.tabs{
  max-width:1200px; margin:auto; padding:8px 16px; display:flex; gap:18px; overflow:auto; scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  color:var(--c-text-dim); padding:10px 14px; border-radius:24px; white-space:nowrap; border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s
}
.tab:hover{color:var(--c-text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08)}
.tab[aria-current="page"]{color:#051416; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); border-color:transparent}

/* ------------------------------
   CONTENU SHARP RANKING
-------------------------------*/
.container{max-width:1200px; margin: 1% auto 0 auto; padding:28px 20px 56px; display:grid; gap:28px}
.section-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  transform:translateY(16px); opacity:0; transition:opacity .6s ease, transform .6s ease
}
.section-card.visible{opacity:1; transform:translateY(0)}

.sr-header{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 18px; justify-content:space-between; margin-bottom:12px}
.sr-header h1{margin:0 0 2% 0; font-size:clamp(24px,4.2vw,36px)}
.sr-meta{display:flex; gap:14px; align-items:center}
.muted{color:var(--c-text-dim)}

/* Liste du classement */
.sr-list{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px}
.sr-row{
  display:grid; grid-template-columns:52px 1fr max-content; align-items:center; gap:12px;
  background:var(--c-card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 14px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sr-row:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.14); box-shadow:0 14px 26px rgba(0,0,0,.35); }
.sr-row .pos{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#051416;
  background:linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
}
.sr-row .name{font-weight:600; letter-spacing:.2px}
.sr-row .score{
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; font-weight:800;
  padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

/* Couleurs du score par pays (modifiable) */
.sr-row.is-general .score{ color:var(--c-score-general) }
.sr-row.is-england .score{ color:var(--c-score-england) }
.sr-row.is-france  .score{ color:var(--c-score-france) }
.sr-row.is-spain   .score{ color:var(--c-score-spain) }
.sr-row.is-germany .score{ color:var(--c-score-germany) }
.sr-row.is-italy   .score{ color:var(--c-score-italy) }

/* États */
.sr-empty{
  margin-top:16px; text-align:center; padding:18px; border-radius:12px;
  background:rgba(255,255,255,.03); color:var(--c-text-dim); border:1px dashed rgba(255,255,255,.12);
}

/* Divers */
.white-image{ filter:brightness(0) invert(1) }

/* ------------------------------
   RESPONSIVE
-------------------------------*/
@media (max-width:960px){
  .appbar-inner{gap:10px}
}
@media (max-width:600px){
  .brand a{display:none}
  .sr-header{gap:6px 10px}
}

/* ------------------------------
   RESPONSIVE
-------------------------------*/
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .appbar-inner{gap:10px}
  .two-columns {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  .country-content {
    padding-right: 0;
    order: 2;
  }
  .country-image {
    order: 1;
  }
}
@media (max-width:600px){
  .lang-trigger span{display:flex;color:white;}
  .brand a{display:none}
  .hero .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero .btn {
    width: 100%;
    max-width: 280px;
  }
}