/* ═══════════════════════════════════════════════════════════════ HOKAY — Classement 3 thèmes, pilotés par (clé localStorage 'hokay-theme') : (aucun attribut) Mode Clair · "dark" Dark Marron (défaut) · "pure" Dark Pur Même langage visuel que la page Défis (challenges_hub.css). ═══════════════════════════════════════════════════════════════ */ :root{ --crust:#eeece7;--surface:#ffffff;--card:#ffffff;--card2:#f6f3ed; --ember:#a8460f;--ember2:#8a3a0c;--ember-dim:rgba(168,70,15,.08); --sand:#2a2015;--sand2:#5c4a38;--fog:#6b5a44;--muted:#8a7358; --green:#2f9e63;--red:#c93f3f; --line:rgba(42,32,21,.13);--line-soft:rgba(42,32,21,.08);--hover:rgba(42,32,21,.035); --on-ember:#fff;--r-c:6px; --font:'DM Sans',system-ui,sans-serif;--head:'Syne',system-ui,sans-serif; } [data-theme="dark"]{ --crust:#0c0a08;--surface:#1a130c;--card:#1f160d;--card2:#271c10; --ember:#e07b35;--ember2:#c4621e;--ember-dim:rgba(224,123,53,.16); --sand:#ede0cc;--sand2:#c4b49e;--fog:#8a7358;--muted:#4a3a26; --green:#5ec98f;--red:#e05252; --line:rgba(237,224,204,.13);--line-soft:rgba(237,224,204,.07);--hover:rgba(237,224,204,.04);--on-ember:#1a1008; } [data-theme="pure"]{ --crust:#18181a;--surface:#1f1f22;--card:#26262a;--card2:#2c2c30; --ember:#e07b35;--ember2:#c4621e;--ember-dim:rgba(224,123,53,.14); --sand:#ededee;--sand2:#c9c9cc;--fog:#a3a3a8;--muted:#8f8f94; --green:#5ec98f;--red:#e05252; --line:#38383d;--line-soft:#2a2a2e;--hover:rgba(255,255,255,.04);--on-ember:#1a1008; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{font-family:var(--font);background:var(--crust);color:var(--sand);min-height:100vh;font-size:15px;line-height:1.5; padding-bottom:calc(64px + env(safe-area-inset-bottom));} a{color:inherit;text-decoration:none;} button,select,input{font:inherit;color:inherit;} button{cursor:pointer;} :focus-visible{outline:2px solid var(--ember);outline-offset:2px;} [hidden]{display:none!important;} /* ── Barre du haut ── */ .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px; background:var(--crust);border-bottom:1px solid var(--line);} .topbar-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-c);color:var(--sand2);} .topbar-back:hover{background:var(--hover);color:var(--sand);} .topbar-title{font-family:var(--head);font-weight:700;font-size:1.02rem;} .topbar-links{margin-left:auto;display:flex;gap:4px;} .topbar-links a{padding:8px 12px;border-radius:var(--r-c);font-size:.88rem;font-weight:500;color:var(--sand2);} .topbar-links a:hover{background:var(--hover);color:var(--sand);} /* ── Page ── */ .page{max-width:920px;margin:0 auto;padding:28px 20px 40px;} .intro h1{font-family:var(--head);font-weight:700;font-size:1.75rem;letter-spacing:-.01em;line-height:1.2;margin-bottom:8px;} .intro-lead{color:var(--sand2);max-width:62ch;line-height:1.6;} .how{margin-top:14px;font-size:.9rem;color:var(--sand2);} .how summary{cursor:pointer;color:var(--ember);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px;} .how summary::-webkit-details-marker{display:none;} .how summary::before{content:'›';display:inline-block;transition:transform .15s;font-size:1.1rem;line-height:1;} .how[open] summary::before{transform:rotate(90deg);} .how p{margin-top:10px;max-width:62ch;line-height:1.55;} /* ── Contrôles ── */ .controls{margin-top:26px;display:grid;gap:14px;} .scope-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;} .scope-tabs::-webkit-scrollbar{display:none;} .scope-tab{flex:0 0 auto;padding:10px 14px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px; color:var(--sand2);font-weight:500;font-size:.92rem;white-space:nowrap;} .scope-tab:hover{color:var(--sand);} .scope-tab.active{color:var(--sand);border-bottom-color:var(--ember);font-weight:600;} .scope-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:var(--card);border:1px solid var(--line); border-radius:var(--r-c);color:var(--sand2);font-size:.88rem;font-weight:500;} .chip:hover{border-color:var(--fog);color:var(--sand);} .chip.active{border-color:var(--ember);background:var(--ember-dim);color:var(--sand);font-weight:600;} .chip .n{color:var(--fog);font-weight:400;font-size:.8rem;} .scope-pick select{height:42px;min-width:min(100%,280px);} select{height:42px;width:100%;padding:0 34px 0 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-c); color:var(--sand);font-size:.9rem;appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7358' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;} select:hover{border-color:var(--fog);} select:focus{border-color:var(--ember);outline:none;} .filters{display:grid;grid-template-columns:180px 180px minmax(0,1fr);gap:10px;align-items:end;} .filters.solo{grid-template-columns:minmax(0,1fr);} .field{display:grid;gap:4px;} .field-label{font-size:.8rem;color:var(--fog);} .search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;background:var(--card);border:1px solid var(--line); border-radius:var(--r-c);color:var(--muted);} .search:focus-within{border-color:var(--ember);} .search i{font-size:.85rem;} .search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--sand);} .search input::placeholder{color:var(--fog);} /* ── Ma position ── */ .mine{margin-top:22px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:8px; display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;} .mine-title{font-weight:600;font-size:.92rem;} .mine-items{display:flex;flex-wrap:wrap;gap:8px 8px;} .pos{display:grid;text-align:left;gap:1px;padding:6px 12px;background:none;border:1px solid var(--line);border-radius:var(--r-c);} .pos:hover{border-color:var(--ember);} .pos-label{font-size:.78rem;color:var(--fog);} .pos-value{font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums;} .mine-note{color:var(--sand2);font-size:.9rem;} .mine a{color:var(--ember);font-weight:500;} .mine a:hover{text-decoration:underline;} .summary{margin-top:22px;display:flex;flex-wrap:wrap;gap:2px 22px;font-size:.9rem;color:var(--sand2);} .summary strong{color:var(--sand);font-weight:600;font-variant-numeric:tabular-nums;} /* ── Liste ── */ .board{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;} .rows{list-style:none;} .board-head,.row{display:grid;grid-template-columns:48px minmax(0,1fr) 92px 64px 84px 96px;gap:0 10px;align-items:center;padding:0 18px;} .board-head{padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--fog);} .board-head .c,.row .c{text-align:right;} .row{min-height:64px;padding-top:10px;padding-bottom:10px;border-top:1px solid var(--line-soft);} .row:first-child{border-top:none;} .row:hover{background:var(--hover);} .row.me{background:var(--ember-dim);box-shadow:inset 3px 0 0 var(--ember);} .rk{font-weight:600;color:var(--fog);font-variant-numeric:tabular-nums;} .row.top .rk{color:var(--ember);font-size:1.1rem;font-weight:700;} .who{display:flex;align-items:center;gap:12px;min-width:0;} .avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--card2);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;color:var(--sand2);} .who-text{min-width:0;display:grid;} .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .who:hover .name{color:var(--ember);} .you{font-style:normal;font-weight:500;font-size:.78rem;color:var(--ember);margin-left:8px;} .sub{font-size:.82rem;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .c{font-variant-numeric:tabular-nums;color:var(--sand2);font-size:.92rem;} .c.pts{color:var(--sand);font-weight:600;} .c.good{color:var(--green);} .meta-m{display:none;} /* chargement */ .row.skel{height:64px;background:linear-gradient(100deg,transparent 30%,var(--hover) 50%,transparent 70%);background-size:200% 100%;animation:sk 1.4s infinite linear;} @keyframes sk{to{background-position:-200% 0;}} @media (prefers-reduced-motion:reduce){.row.skel{animation:none;}html{scroll-behavior:auto;}} /* état vide / erreur */ .state{padding:56px 24px;text-align:center;} .state strong{display:block;font-size:1rem;margin-bottom:4px;} .state p{color:var(--sand2);font-size:.9rem;margin-bottom:16px;} .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--r-c);border:1px solid var(--line); background:var(--card);color:var(--sand);font-weight:500;font-size:.9rem;} .btn:hover{border-color:var(--ember);color:var(--ember);} .btn:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--sand);} .btn.primary{background:var(--ember);border-color:var(--ember);color:var(--on-ember);font-weight:600;} .btn.primary:hover{filter:brightness(1.06);color:var(--on-ember);} .pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;font-size:.9rem;color:var(--sand2);} .foot-note{margin-top:16px;font-size:.85rem;color:var(--fog);} /* navigation basse (mobile) */ .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:repeat(4,1fr);background:var(--crust); border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);} .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:.7rem;color:var(--fog);} .bottom-nav a i{font-size:1.05rem;} .bottom-nav a.active{color:var(--ember);} @media (max-width:820px){ .filters{grid-template-columns:1fr 1fr;} .filters .search{grid-column:1 / -1;} } @media (max-width:719px){ .board-head{display:none;} .row{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"rk who pts" ". meta meta";gap:2px 10px;padding:12px 14px;min-height:0;} .rk{grid-area:rk;}.who{grid-area:who;}.c.pts{grid-area:pts;} .c.c-solved,.c.c-avg,.c.c-fast{display:none;} .meta-m{grid-area:meta;display:flex;flex-wrap:wrap;gap:0 14px;font-size:.8rem;color:var(--fog);padding-left:48px;font-variant-numeric:tabular-nums;} .row.skel{height:66px;} } @media (max-width:640px){ .topbar-links a:not(#topProfilBtn){display:none;} .bottom-nav{display:grid;} .page{padding:20px 14px 28px;} .intro h1{font-size:1.45rem;} .mine{padding:12px 14px;} }