/* ════════════════════════════════════════════════════════════════════════
   TOP WEB / GRAND ÉCRAN — maquette validée
   brandnew/drafts/saison2-web-03-top.html (MAÇONNERIE).
   Scopé #webTop, @media ≥1024px. Rempli par app.js › renderWebTop().
   ════════════════════════════════════════════════════════════════════════ */

#webTop { display: none; }

@media (min-width: 1024px) {

  #webTop *, #webTop *::before, #webTop *::after { all: revert; box-sizing: border-box; }

  body.web-top #webTop {
    --paper:#FFFEF7; --ink:#0A0A0A;
    --magenta:#FF2E93; --yellow:#FFD600; --cyan:#5BD8E5; --green:#5BE885;
    --red:#FF5252; --purple:#9D4EDD; --bleu:#4D7CFF; --orange:#FF9F45;
    /* --fd / --fb : hérités de <html> (la police choisie dans Réglages) */
    --bd:3px; --bdf:4px; --sh:5px; --shf:6px;
    --card:#FFFEF7; --line:#0A0A0A; --mut:rgba(10,10,10,.55); --app:#F4EEDF;
    position: fixed; inset: 0; z-index: 1200; overflow: hidden;
    display: flex; flex-direction: column; padding: 14px 24px 10px;
    font-family: var(--fb); color: var(--ink);
    font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    background: var(--app) radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1.4px, transparent 1.5px);
    background-size: 22px 22px;
  }
  html[data-skin="neon"] body.web-top #webTop {
    --paper:#160E1F; --app:#0E0814; --card:#221430; --line:#0A0A0A; --mut:#CFC3CE;
    color:#FFFEF7; background-image: repeating-linear-gradient(30deg,rgba(255,255,255,.04) 0 6px,transparent 6px 26px);
  }
  body.web-top .topbar, body.web-top .bottom-nav { display: none !important; }
  body.web-top #sec-classement > .s2 { display: none !important; }
  body.web-top #sec-classement > #clMe { display: none !important; }
  body.web-top { overflow: hidden; }

  #webTop img.em, #webTop img.ne, #webTop img.noto-em { height:1em; width:auto; vertical-align:-.15em; object-fit:contain; display:inline-block; }

  /* NAV */
  #webTop .nav{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex:none; width:100%; max-width:1500px; margin-inline:auto; }
  #webTop .logo{ height:58px; width:auto; display:block; flex:none; }
  #webTop .tabs{ display:flex; gap:10px; }
  #webTop .tab{ font-family:var(--fd); font-size:17px; letter-spacing:1px; padding:10px 20px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] #webTop .tab{ color:#FFFEF7; }
  #webTop .tab.on{ background:var(--bleu); color:#FFFEF7; box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  #webTop .nav .sp{ flex:1; }
  #webTop .chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--fd); font-size:16px; padding:9px 14px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] #webTop .chip{ color:#FFFEF7; }
  #webTop .chip.dj{ background:var(--yellow); color:#0A0A0A; }   /* encre fixe : en néon --ink devient crème, illisible sur le jaune */
  #webTop .toggle{ display:flex; border:var(--bd) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  #webTop .toggle span{ font-family:var(--fd); font-size:14px; letter-spacing:1px; padding:8px 13px; background:var(--card); color:var(--mut); }
  #webTop .toggle span.on{ background:var(--magenta); color:#FFFEF7; }
  #webTop .ava{ width:52px; height:52px; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--magenta); background:var(--purple); display:grid; place-items:center; font-size:26px; cursor:pointer; overflow:hidden; }
  #webTop .ava > *{ width:100%; height:100%; display:block; }

  /* MAÇONNERIE */
  #webTop .bento{ flex:1; min-height:0; width:100%; max-width:1500px; margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(8,1fr); grid-auto-flow:row dense; gap:13px; }
  #webTop .b{ border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:12px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
  html[data-skin="neon"] #webTop .b{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  #webTop .h2{ grid-row:span 2; } #webTop .h3{ grid-row:span 3; } #webTop .h4{ grid-row:span 4; } #webTop .h5{ grid-row:span 5; } #webTop .w2{ grid-column:span 2; }
  #webTop .ttl{ font-family:var(--fd); font-size:12px; letter-spacing:1.4px; color:var(--mut); display:flex; align-items:center; gap:8px; margin-bottom:9px; flex:none; }
  html[data-skin="neon"] #webTop .ttl{ color:#CFC3CE; }
  #webTop .ttl .r{ margin-left:auto; font-size:11px; }

  /* SEGMENT */
  #webTop .seg{ display:flex; border:var(--bd) solid var(--line); box-shadow:3px 3px 0 var(--line); flex:none; }
  #webTop .seg span{ font-family:var(--fd); font-size:13px; letter-spacing:.5px; padding:7px 15px; background:var(--card); color:var(--mut); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
  #webTop .seg span.on{ background:var(--bleu); color:#FFFEF7; }

  /* PODIUM */
  #webTop .podhead{ display:flex; align-items:center; gap:10px; flex:none; margin-bottom:4px; }
  #webTop .podhead .eyebrow{ margin-left:auto; font-family:var(--fd); font-size:13px; letter-spacing:1.2px; color:var(--mut); display:inline-flex; align-items:center; gap:6px; }
  #webTop .podwrap{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:18px; min-height:0; padding-bottom:2px; }
  #webTop .pod{ flex:1; max-width:195px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; justify-content:flex-end; }
  #webTop .pod .av{ width:88px; height:88px; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); background:var(--cyan); display:grid; place-items:center; font-size:42px; overflow:hidden; }
  #webTop .pod .av > *{ width:100%; height:100%; display:block; }
  #webTop .pod.p1 .av{ width:110px; height:110px; background:var(--yellow); }
  #webTop .pod .nm{ font-family:var(--fd); font-size:17px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  html[data-skin="neon"] #webTop .pod .nm{ color:#FFFEF7; }
  #webTop .pod .base{ width:100%; border:var(--bd) solid var(--line); box-shadow:4px 4px 0 var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:10px 6px; position:relative; overflow:hidden; }
  #webTop .pod .base::before{ content:''; position:absolute; inset:0; opacity:.13; background-image:radial-gradient(#0A0A0A 1.5px,transparent 1.6px); background-size:13px 13px; }
  #webTop .pod .base .rk{ font-family:var(--fd); font-size:40px; line-height:.9; position:relative; }
  #webTop .pod .base .sc{ font-family:var(--fd); font-size:19px; position:relative; }
  #webTop .pod.p1 .base{ background:var(--yellow); color:var(--ink); height:168px; }
  #webTop .pod.p2 .base{ background:#D8D8D8; color:var(--ink); height:120px; }
  #webTop .pod.p3 .base{ background:var(--orange); color:var(--ink); height:92px; }
  #webTop .pod .medal{ font-size:30px; height:32px; }

  /* LISTE */
  #webTop .lbig{ flex:1; display:flex; flex-direction:column; justify-content:space-between; min-height:0; }
  #webTop .lrow{ display:flex; align-items:center; gap:11px; padding:6px 0; border-bottom:2px dashed color-mix(in srgb,var(--ink) 14%,transparent); }
  #webTop .lrow:last-child{ border:0; }
  #webTop .lrow .rk{ font-family:var(--fd); font-size:16px; width:28px; text-align:center; color:var(--mut); flex:none; }
  #webTop .lrow .rk img{ width:22px; height:22px; }
  #webTop .lrow .av{ width:34px; height:34px; border:2.5px solid var(--line); box-shadow:2px 2px 0 var(--line); background:var(--yellow); flex:none; display:grid; place-items:center; font-size:18px; overflow:hidden; }
  #webTop .lrow .av > *{ width:100%; height:100%; display:block; }
  #webTop .lrow .nm{ flex:1; min-width:0; font-family:var(--fd); font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html[data-skin="neon"] #webTop .lrow .nm{ color:#FFFEF7; }
  #webTop .lrow .fl{ flex:none; }
  #webTop .lrow .fl img{ width:20px; height:14px; border:2px solid var(--line); display:block; }
  #webTop .lrow .sc{ margin-left:auto; font-family:var(--fd); font-size:17px; }
  html[data-skin="neon"] #webTop .lrow .sc{ color:var(--yellow); }
  #webTop .lrow.me{ background:var(--yellow); color:var(--ink); border:var(--bd) solid var(--line); box-shadow:3px 3px 0 var(--line); padding:6px 9px; }
  #webTop .lrow.me .nm,#webTop .lrow.me .rk,#webTop .lrow.me .sc{ color:var(--ink); }

  /* SAISON */
  #webTop .season{ flex-direction:row; align-items:center; gap:13px; background:var(--magenta); color:#FFFEF7; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] #webTop .season{ box-shadow:var(--sh) var(--sh) 0 var(--yellow); }
  #webTop .season .num{ font-family:var(--fd); font-size:46px; line-height:.8; flex:none; }
  #webTop .season .tx .nm{ font-family:var(--fd); font-size:22px; line-height:1; }
  #webTop .season .tx .d{ font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1px; opacity:.9; margin-top:3px; }
  #webTop .season .pill{ margin-left:auto; flex:none; font-family:var(--fd); font-size:13px; background:#FFFEF7; color:var(--ink); padding:6px 11px; border:2.5px solid var(--line); }

  /* MA POSITION */
  #webTop .mepos{ flex-direction:row; align-items:center; gap:12px; background:var(--bleu); color:#FFFEF7; box-shadow:var(--sh) var(--sh) 0 var(--line); }
  html[data-skin="neon"] #webTop .mepos{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  /* PAS ENCORE CLASSÉ : carte noire → ombre colorée, jamais noir sur noir */
  #webTop .mepos.nc{ background:var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  #webTop .mepos .rk{ font-family:var(--fd); font-size:34px; line-height:.9; flex:none; }
  #webTop .mepos .av{ width:46px; height:46px; border:var(--bd) solid #FFFEF7; background:var(--purple); flex:none; display:grid; place-items:center; font-size:24px; overflow:hidden; }
  #webTop .mepos .av > *{ width:100%; height:100%; display:block; }
  #webTop .mepos .tx .nm{ font-family:var(--fd); font-size:18px; line-height:1; }
  #webTop .mepos .tx .d{ font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.5px; opacity:.9; margin-top:3px; }
  #webTop .mepos .sc{ margin-left:auto; font-family:var(--fd); font-size:24px; flex:none; }

  /* RANKED */
  #webTop .ranked{ background:var(--ink); color:#FFFEF7; box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  #webTop .ranked .k{ font-family:var(--fb); font-weight:800; font-size:9.5px; letter-spacing:1.5px; color:var(--cyan); }
  #webTop .ranked .hd{ display:flex; align-items:center; gap:11px; margin:8px 0; }
  #webTop .ranked .emb{ width:54px; height:54px; border:var(--bd) solid #FFFEF7; box-shadow:3px 3px 0 var(--magenta); background:#D9B382; flex:none; display:grid; place-items:center; font-family:var(--fd); font-size:24px; color:var(--ink); }
  #webTop .ranked .nm{ font-family:var(--fd); font-size:24px; line-height:1; }
  #webTop .ranked .pr{ font-size:10px; color:#CFC3CE; margin-top:3px; }
  #webTop .ranked .rpbig{ font-family:var(--fd); font-size:40px; line-height:1; color:var(--yellow); margin:4px 0; }
  #webTop .ranked .rpbig small{ font-size:17px; color:#CFC3CE; }
  #webTop .ranked .divs{ display:flex; gap:6px; margin:4px 0 8px; }
  #webTop .ranked .pip{ flex:1; height:11px; border:2px solid #FFFEF7; background:rgba(255,255,255,.15); }
  #webTop .ranked .pip.on{ background:var(--yellow); }
  #webTop .ranked .nx{ font-size:10px; letter-spacing:.5px; color:#CFC3CE; margin-top:auto; margin-bottom:6px; }
  #webTop .ranked .bar{ height:12px; border:var(--bd) solid #FFFEF7; background:rgba(255,255,255,.15); position:relative; overflow:hidden; }
  #webTop .ranked .bar i{ position:absolute; inset:0 auto 0 0; background:var(--yellow); }

  /* listes (potes, lots) */
  #webTop .list{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
  #webTop .li{ display:flex; align-items:center; gap:9px; padding:4px 0; border-bottom:2px dashed color-mix(in srgb,var(--ink) 14%,transparent); }
  #webTop .li:last-child{ border:0; }
  #webTop .li .rk{ font-family:var(--fd); width:22px; text-align:center; color:var(--mut); flex:none; }
  #webTop .li .tile{ width:32px; height:32px; flex:none; border:2.5px solid var(--line); display:grid; place-items:center; box-shadow:2px 2px 0 var(--line); overflow:hidden; }
  #webTop .li .tile img{ height:19px; width:auto; } #webTop .li .tile > *{ width:100%; height:100%; display:block; }
  #webTop .li .nm{ font-family:var(--fd); font-size:14px; line-height:1; }
  html[data-skin="neon"] #webTop .li .nm{ color:#FFFEF7; }
  #webTop .li .d{ font-family:var(--fb); font-weight:700; font-size:8.5px; letter-spacing:.3px; color:var(--mut); margin-top:2px; }
  #webTop .li .info{ flex:1; min-width:0; }
  #webTop .li .sc{ margin-left:auto; font-family:var(--fd); font-size:14px; }
  html[data-skin="neon"] #webTop .li .sc{ color:var(--yellow); }

  /* brique « ligne » générique (fallbacks) */
  #webTop .row{ display:flex; flex-direction:row; align-items:center; gap:11px; cursor:pointer; }
  #webTop .row .tile{ width:46px; height:46px; flex:none; border:var(--bd) solid var(--line); background:#FFFEF7; box-shadow:3px 3px 0 var(--line); display:grid; place-items:center; }
  #webTop .row .tile img{ height:26px; width:auto; }
  #webTop .row .info{ flex:1; min-width:0; }
  #webTop .row .nm{ font-family:var(--fd); font-size:17px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html[data-skin="neon"] #webTop .row .nm{ color:#FFFEF7; }
  #webTop .row .d{ font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.3px; color:var(--mut); margin-top:3px; }
  #webTop .row .go{ font-family:var(--fd); font-size:14px; letter-spacing:1px; padding:8px 14px; border:var(--bd) solid var(--line); background:var(--ink); color:#FFFEF7; box-shadow:3px 3px 0 var(--magenta); }
}

/* SQUELETTE pendant le chargement du classement (aplats gris qui respirent,
   comme la liste mobile — saison2-app.css › .lbrow.s2-sk) */
@media (min-width: 1024px) {
  @keyframes wt-sk-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
  #webTop .lrow.s2-sk { pointer-events: none; }
  #webTop .lrow.s2-sk .sk-b { display: block; background: var(--gray2, #E4E1D6); border: 2px solid var(--gray, #BDB8A8); animation: wt-sk-pulse 1.1s ease-in-out infinite; }
  #webTop .lrow.s2-sk .rk.sk-b { width: 26px; height: 26px; }
  #webTop .lrow.s2-sk .sk-av { width: 34px; height: 34px; flex: none; }
  #webTop .lrow.s2-sk .sk-nm { flex: 1; height: 15px; }
  #webTop .lrow.s2-sk .sk-sc { width: 54px; height: 15px; flex: none; }
}