/* SyliSec · ARPT Cyber Challenge · page Classement. Genere depuis la maquette, tout est scope sous .sbx. */
.sbx{
  color-scheme: dark; color:var(--text-1); font-family:var(--font-text); font-size:var(--fs-14); line-height:1.5;
  /* Couleurs de la charte */
  --bg-page:#141d2b;
  --bg-side:#111927;
  --surface:#1a2332;
  --hover:#313f55;
  --hover-2:#3a4a63;
  --border:rgba(255,255,255,.07);
  --grid:rgba(255,255,255,.06);
  --text-1:#e0e6f0;
  --text-2:#a4b1cd;
  --accent:#9fef00;
  --accent-hover:#c5f467;
  --on-accent:#141d2b;
  --gold:#ffd700;
  --silver:#c0c0c0;
  --bronze:#cd7f32;
  --blood:#ff3e3e;
  --data-1:#5cb2ff;
  --data-2:#ffaf00;
  --data-3:#2ee7b6;
  --data-4:#9f00ff;
  --data-5:#ff3e3e;
  --data-6:#004cff;
  /* Typographie */
  --font-title:"Raleway", "Segoe UI", system-ui, sans-serif;
  --font-text:"Lato", "Segoe UI", system-ui, sans-serif;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px;
  /* Espacements (multiples de 8) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px; --sp-8:64px;
  /* Rayon unique */
  --radius:6px;
  /* Mouvement */
  --fade:240ms; --hover-t:120ms;
  /* Gabarit existant */
  --row-h:48px;
}
.sbx .num{font-variant-numeric:tabular-nums lining-nums}
.sbx h1,.sbx h2,.sbx h3{font-family:var(--font-title);font-weight:700;margin:0;text-wrap:balance}
.sbx button,.sbx input{font:inherit;color:inherit}
.sbx :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ---------- Zone de contenu ---------- */
.sbx .content{padding:var(--sp-4) var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.sbx .sbx-in{animation:sbx-fade var(--fade) ease-out both}
@keyframes sbx-fade{from{opacity:0}to{opacity:1}}
.sbx .c-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-height:32px}
.sbx .c-head .left{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sbx .event{font-family:var(--font-title);font-weight:700;font-size:var(--fs-16)}
.sbx .status{font-size:var(--fs-14);color:var(--text-2)}
.sbx .c-head .right{display:flex;align-items:center;gap:var(--sp-2)}
.sbx .updated{font-size:var(--fs-12);color:var(--text-2)}
.sbx .lang{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius)}
.sbx .lang button{border:0;background:transparent;height:32px;padding:0 8px;min-width:40px;font-size:var(--fs-12);font-weight:700;color:var(--text-2);cursor:pointer;border-radius:var(--radius);transition:background var(--hover-t),color var(--hover-t)}
.sbx .lang button:hover{background:var(--hover);color:var(--text-1)}
.sbx .lang button[aria-pressed="true"]{color:var(--accent)}
.sbx .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.sbx .banner{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.sbx .banner h2{font-size:var(--fs-16)}
.sbx .banner p{margin:0;color:var(--text-2)}
.sbx .card-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-3) 0}
.sbx .card-h h2{font-size:var(--fs-20);display:flex;align-items:center;gap:var(--sp-1)}
.sbx .card-h .sub{margin:0;color:var(--text-2);font-size:var(--fs-14)}
.sbx .count{font-family:var(--font-text);font-size:var(--fs-14);font-weight:700;color:var(--accent)}
/* Podium */
.sbx .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);align-items:end}
.sbx .pc{position:relative;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);border-top:2px solid var(--rk)}
.sbx .pc.r1{--rk:var(--gold);order:2;padding-top:var(--sp-5)}
.sbx .pc.r2{--rk:var(--silver);order:1}
.sbx .pc.r3{--rk:var(--bronze);order:3}
.sbx .pc.empty{border-style:dashed;border-top:2px dashed rgba(255,255,255,.08);background:transparent}
.sbx .pc-top{display:flex;align-items:center;gap:var(--sp-2)}
.sbx .medal{width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;font-weight:700;font-size:var(--fs-16);color:var(--rk);border:1px solid var(--rk);flex:none}
.sbx .pc.empty .medal{color:var(--text-2);border:1px dashed rgba(255,255,255,.16)}
.sbx .pc-top .lbl{font-size:var(--fs-14);color:var(--text-2)}
.sbx .pc h3{font-size:var(--fs-20);line-height:1.3;overflow-wrap:anywhere}
.sbx .pc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.sbx .score{display:flex;align-items:baseline;gap:var(--sp-1)}
.sbx .score b{font-size:var(--fs-32);line-height:1.1;font-weight:700}
.sbx .score span{font-size:var(--fs-14);color:var(--text-2)}
.sbx .pb{font-size:var(--fs-14);color:var(--text-2);display:flex;align-items:center;gap:var(--sp-1)}
.sbx .pb b{color:var(--blood);font-weight:700}
.sbx .you{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font-family:var(--font-text);font-size:var(--fs-12);font-weight:700;vertical-align:middle;margin-left:8px}
/* Graphique */
.sbx .chart-wrap{position:relative;padding:var(--sp-2) var(--sp-3) 0}
.sbx .chart-wrap svg{display:block;width:100%;overflow:visible}
.sbx .axis text{fill:var(--text-2);font-family:var(--font-text);font-size:12px;font-variant-numeric:tabular-nums}
.sbx .gridl{stroke:var(--grid);stroke-width:1}
.sbx .series{transition:opacity var(--hover-t)}
.sbx .series path.ln{fill:none;stroke-width:2;stroke-linejoin:round}
.sbx .series.dim{opacity:.2}
.sbx .mk{stroke:var(--surface);stroke-width:1.5}
.sbx .guide{stroke:var(--text-2);stroke-width:1;stroke-dasharray:2 4}
.sbx .freeze-l{stroke:var(--text-2);stroke-width:1;stroke-dasharray:4 4}
.sbx .freeze-t{fill:var(--text-2);font-size:12px;font-family:var(--font-text);font-weight:700}
.sbx .tip{position:absolute;pointer-events:none;background:var(--hover);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-1) var(--sp-2);font-size:var(--fs-12);color:var(--text-2);width:256px;z-index:3}
.sbx .tip .t-team{display:flex;align-items:center;gap:8px;color:var(--text-1);font-weight:700;font-size:var(--fs-14);margin-bottom:8px}
.sbx .tip dl{display:grid;grid-template-columns:auto 1fr;gap:0 16px;margin:0}
.sbx .tip dd{margin:0;color:var(--text-1)}
.sbx .legend{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) var(--sp-3);align-items:center}
.sbx .lg{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:transparent;border-radius:var(--radius);height:32px;padding:0 8px;font-size:var(--fs-14);color:var(--text-1);cursor:pointer;transition:background var(--hover-t)}
.sbx .lg:hover{background:var(--hover)}
.sbx .lg svg{width:24px;height:16px;flex:none}
.sbx .lg .rk{color:var(--text-2)}
.sbx .lg[aria-pressed="false"] .nm,.sbx .lg[aria-pressed="false"] .rk{color:var(--text-2);text-decoration:line-through}
.sbx .lg[aria-pressed="false"] svg{opacity:.35}
.sbx .lg-hint{font-size:var(--fs-12);color:var(--text-2);margin-left:auto}
.sbx .chart-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--text-2);pointer-events:none}
/* Tableau */
.sbx .search input{width:256px;height:32px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-page);padding:0 8px;font-size:var(--fs-14);color:var(--text-1)}
.sbx .search input::placeholder{color:var(--text-2)}
.sbx .search input:focus{outline:2px solid var(--accent);outline-offset:0}
.sbx .tbl-wrap{margin-top:var(--sp-2);overflow:auto}
.sbx .tbl-wrap.scroll{max-height:calc(var(--row-h) * 20 + 41px)}
.sbx table{width:100%;border-collapse:separate;border-spacing:0}
.sbx col.c-rank{width:72px}
.sbx col.c-score{width:256px}
.sbx col.c-blood{width:96px}
.sbx col.c-last{width:200px}
.sbx thead th{position:sticky;top:0;z-index:1;background:var(--surface);font-size:var(--fs-12);font-weight:700;color:var(--text-2);padding:0 16px;height:40px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.sbx th.r,.sbx td.r{text-align:right}
.sbx th:first-child,.sbx td:first-child{padding-left:var(--sp-3)}
.sbx th:last-child,.sbx td:last-child{padding-right:var(--sp-3)}
.sbx tbody td{height:var(--row-h);padding:0 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.sbx tbody tr:last-child td{border-bottom:0}
.sbx tbody tr td{transition:background var(--hover-t)}
.sbx tbody tr:hover td{background:var(--hover)}
.sbx tbody tr.me td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.sbx .rk-m{width:24px;height:24px;border-radius:var(--radius);display:inline-grid;place-items:center;font-size:var(--fs-12);font-weight:700;color:var(--rk);border:1px solid var(--rk)}
.sbx .rk-n{display:inline-block;min-width:24px;text-align:center;color:var(--text-2);font-weight:700}
.sbx .t-name{font-weight:700}
.sbx .t-mob{display:none}
.sbx .sc{display:flex;align-items:center;gap:var(--sp-2)}
.sbx .sc b{min-width:56px;text-align:right;font-weight:700}
.sbx .bar{flex:1;height:4px;background:var(--hover);max-width:160px}
.sbx .bar i{display:block;height:100%;background:var(--text-2)}
.sbx tr.me .bar i{background:var(--accent)}
.sbx .bl{color:var(--blood);font-weight:700}
.sbx .none{color:var(--text-2)}
.sbx .last{color:var(--text-2);white-space:nowrap}
.sbx .tie{font-size:var(--fs-12);color:var(--text-1);border-bottom:1px dotted var(--text-2);cursor:help;margin-right:8px}
.sbx .tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-12);color:var(--text-2);border-top:1px solid var(--border)}
.sbx .pin{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);height:var(--row-h);border-top:1px solid var(--border);box-shadow:inset 2px 0 0 var(--accent)}
.sbx .pin button{margin-left:auto;border:0;background:transparent;color:var(--accent);font-weight:700;cursor:pointer;padding:0;height:32px}
.sbx .pin button:hover{color:var(--accent-hover)}
.sbx .empty-row td{height:auto;padding:var(--sp-5) var(--sp-3);text-align:center;color:var(--text-2)}
/* Avant l'épreuve */
.sbx .pre{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-3);flex-wrap:wrap}
.sbx .pre h2{font-size:var(--fs-24);margin-bottom:8px}
.sbx .pre p{margin:0;color:var(--text-2);max-width:64ch}
.sbx .cd{display:flex;gap:var(--sp-1)}
.sbx .cd div{border:1px solid var(--border);border-radius:var(--radius);padding:8px 16px;text-align:center;min-width:72px}
.sbx .cd b{display:block;font-size:var(--fs-32);line-height:1.2;font-weight:700}
.sbx .cd span{font-size:var(--fs-12);color:var(--text-2)}
/* Squelettes : statiques, aucun reflet */
.sbx .sk{background:var(--hover);border-radius:var(--radius);opacity:.6}
.sbx .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width: 767px){
.sbx .content{padding:var(--sp-2) var(--sp-2) var(--sp-5);gap:var(--sp-2)}
.sbx .c-head .event{font-size:var(--fs-14)}
.sbx .c-head .right{width:100%;justify-content:space-between}
.sbx .podium{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.sbx .pc{padding:var(--sp-2);gap:var(--sp-1)}
.sbx .pc.r1{grid-column:1/-1;order:0;padding-top:var(--sp-3)}
.sbx .pc.r2{order:1}
.sbx .pc.r3{order:2}
.sbx .pc h3{font-size:var(--fs-16)}
.sbx .pc:not(.r1) .score b{font-size:var(--fs-24)}
.sbx .pc:not(.r1) .pc-foot{flex-direction:column;align-items:flex-start;gap:0}
.sbx .card-h{padding:var(--sp-2) var(--sp-2) 0}
.sbx .card-h h2{font-size:var(--fs-16)}
.sbx .chart-wrap{padding:var(--sp-1) var(--sp-2) 0}
.sbx .legend{padding:var(--sp-2)}
.sbx .lg-hint{display:none}
.sbx .search,.sbx .search input{width:100%}
.sbx col.c-rank{width:48px}
.sbx col.c-score{width:88px}
.sbx .c-blood,.sbx .c-last,.sbx th.h-blood,.sbx th.h-last,.sbx td.d-blood,.sbx td.d-last{display:none}
.sbx th:first-child,.sbx td:first-child{padding-left:var(--sp-2)}
.sbx th:last-child,.sbx td:last-child{padding-right:var(--sp-2)}
.sbx tbody td{height:56px;padding:0 8px}
.sbx .bar,.sbx .d-tie{display:none}
.sbx .sc{justify-content:flex-end}
.sbx .sc b{min-width:0}
.sbx .t-mob{display:flex;flex-wrap:wrap;gap:0 16px;font-size:var(--fs-12);color:var(--text-2)}
.sbx .pin{padding:8px var(--sp-2);flex-wrap:wrap;height:auto}
.sbx .tbl-foot{padding:var(--sp-2)}
.sbx .pre{padding:var(--sp-2)}
.sbx .pre h2{font-size:var(--fs-20)}
.sbx .cd{width:100%}
.sbx .cd div{flex:1;min-width:0;padding:8px}
.sbx .cd b{font-size:var(--fs-24)}
.sbx .banner{padding:var(--sp-2)}
}
@media (prefers-reduced-motion: reduce){
.sbx *,.sbx *::before,.sbx *::after{animation:none!important;transition:none!important}
}

/* Liens : le nom d'equipe reprend la couleur du texte, soulignement au survol. */
.sbx a{color:inherit;text-decoration:none}
.sbx a:hover{color:var(--accent);text-decoration:underline}

/* Selecteur segmente (periode du graphique) */
.sbx .seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.sbx .seg button{border:0;background:transparent;height:32px;padding:0 16px;cursor:pointer;font-size:var(--fs-14);color:var(--text-2);white-space:nowrap;border-radius:var(--radius);transition:background var(--hover-t),color var(--hover-t)}
.sbx .seg button:hover:not(:disabled){background:var(--hover);color:var(--text-1)}
.sbx .seg button[aria-pressed="true"]{background:var(--hover);color:var(--accent);font-weight:700}
.sbx .seg button:disabled{cursor:default;opacity:.6}

/* Bouton d'action simple (reessayer) */
.sbx .copy{border:1px solid var(--border);background:transparent;color:var(--accent);border-radius:var(--radius);height:32px;padding:0 16px;cursor:pointer;font-size:var(--fs-14);font-weight:700}
.sbx .copy:hover{background:var(--hover)}

/* Bloods : goutte + nombre, rien s'il n'y en a pas */
.sbx .bl i{font-size:var(--fs-12)}
.sbx .pb .bl{font-size:var(--fs-16)}
/* Pas d'animation lors d'un rafraichissement : seulement a la premiere apparition */
.sbx .no-anim .sbx-in{animation:none}