:root{ color-scheme:dark; --ink:#080B14; --panel:#111726; --panel-2:#161E31; --line:#25304a; --hair:rgba(37,48,74,.6); --hover:rgba(22,30,49,.55); --scrim:rgba(8,11,20,.94); --glow:#16223f; --text:#E6EBF7; --dim:#8492b0; --soft:#b9c4dc; --blue:#4A7DFF; --green:#4CBB6C; --pink:#E56AA8; --red:#E4485C; --grey:#5c6884; --gold-line:#5b4a2a; --gold-text:#d6b168; /* code couleur des durées (histoire principale) */ --dur-short:#37C08A; --dur-mid:#E7A93B; --dur-long:#EA5C6E; --dur-short-soft:rgba(55,192,138,.14); --dur-mid-soft:rgba(231,169,59,.14); --dur-long-soft:rgba(234,92,110,.14); --plate-w:64px; --plate-gap:8px; --row-px:6px; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* Thème clair : suivi du système par défaut, ou forcé via le switch de thème. Le switch pose data-theme sur . Sans data-theme on suit le système ; avec data-theme="dark" c'est le :root de base (sombre) qui s'applique. Les deux sélecteurs partagent les mêmes tokens (pas de bundler pour factoriser). */ @media (prefers-color-scheme:light){ :root:not([data-theme]){ color-scheme:light; --ink:#F3F5FA;--panel:#FFFFFF;--panel-2:#E9EEF8;--line:#CBD4E4; --hair:rgba(203,212,228,.85);--hover:rgba(233,238,248,.8); --scrim:rgba(243,245,250,.94);--glow:#DCE5F7;--text:#101728;--dim:#5A6580; --soft:#3C465C;--blue:#2B55D0;--green:#1E7C43;--pink:#B93B7E;--red:#BF2637; --grey:#6C7791;--gold-line:#C9A45C;--gold-text:#7A5A1A; --dur-short:#178B5E;--dur-mid:#B57912;--dur-long:#C7364A; --dur-short-soft:rgba(23,139,94,.12);--dur-mid-soft:rgba(181,121,18,.12); --dur-long-soft:rgba(199,54,74,.12); } } :root[data-theme="light"]{ color-scheme:light; --ink:#F3F5FA;--panel:#FFFFFF;--panel-2:#E9EEF8;--line:#CBD4E4; --hair:rgba(203,212,228,.85);--hover:rgba(233,238,248,.8); --scrim:rgba(243,245,250,.94);--glow:#DCE5F7;--text:#101728;--dim:#5A6580; --soft:#3C465C;--blue:#2B55D0;--green:#1E7C43;--pink:#B93B7E;--red:#BF2637; --grey:#6C7791;--gold-line:#C9A45C;--gold-text:#7A5A1A; --dur-short:#178B5E;--dur-mid:#B57912;--dur-long:#C7364A; --dur-short-soft:rgba(23,139,94,.12);--dur-mid-soft:rgba(181,121,18,.12); --dur-long-soft:rgba(199,54,74,.12); } *{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--ink)} body{ background: radial-gradient(1200px 600px at 50% -200px, var(--glow) 0%, transparent 70%), var(--ink); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; } .wrap{max-width:1080px;margin:0 auto;padding:0 16px 80px} /* ---- hero ---- */ header.hero{padding:44px 0 22px;border-bottom:1px solid var(--line)} .topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .switches{display:flex;gap:8px;flex:none} .switch{ cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--soft); border-radius:999px;min-width:40px;height:34px;padding:0 12px; font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em; display:inline-flex;align-items:center;justify-content:center;gap:6px; transition:color .12s ease,border-color .12s ease,background .12s ease; } .switch:hover{color:var(--text);border-color:var(--blue)} .switch.kofi{text-decoration:none;color:var(--gold-text);border-color:var(--gold-line)} .switch.kofi:hover{color:var(--gold-text);border-color:var(--gold-text)} .shapes{font-size:15px;letter-spacing:.7em;color:var(--dim);margin-bottom:14px} .shapes .t{color:var(--green)}.shapes .c{color:var(--red)} .shapes .x{color:var(--blue)}.shapes .s{color:var(--pink)} h1{ margin:0;font-size:clamp(30px,7vw,54px);line-height:.98; font-weight:800;letter-spacing:-.03em;text-transform:uppercase; } h1 em{font-style:normal;color:var(--dim);display:block;font-weight:500; font-size:clamp(13px,2.4vw,16px);letter-spacing:.28em;margin-top:12px} .lede{color:var(--dim);max-width:60ch;font-size:14.5px;line-height:1.6;margin:18px 0 0} /* ---- controls ---- */ .controls{ position:sticky;top:0;z-index:20; background:var(--scrim);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:14px 0;margin-bottom:6px; } .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} input[type=search],input[type=password],select{ background:var(--panel);border:1px solid var(--line);color:var(--text); border-radius:8px;padding:9px 11px;font-size:14px;font-family:var(--sans); outline:none;min-height:40px; } input[type=search]{flex:1 1 200px} select{flex:0 1 auto} input[type=search]:focus,input[type=password]:focus,select:focus,button:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,125,255,.25)} /* ---- groupes de filtres ---- */ .bands{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:12px;align-items:center} .fgroup{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center} .flabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);font-weight:700;margin-right:2px} .band{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:var(--panel);border:1px solid var(--line);color:var(--dim); border-radius:999px;padding:6px 13px;font-size:12px;font-family:var(--mono); transition:color .12s ease,border-color .12s ease,background .12s ease; } .band:hover{color:var(--text)} .band .g{font-size:13px} .band[aria-pressed="true"]{color:var(--text);border-color:currentColor;background:var(--panel-2)} .band.t[aria-pressed="true"]{color:var(--green)} .band.x[aria-pressed="true"]{color:var(--blue)} .band.s[aria-pressed="true"]{color:var(--pink)} .band.c[aria-pressed="true"]{color:var(--red)} .band.n[aria-pressed="true"]{color:var(--grey)} /* pastilles de durée : pastille de couleur toujours visible */ .band.dur .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} .band.dur-short{color:var(--dur-short)} .band.dur-mid{color:var(--dur-mid)} .band.dur-long{color:var(--dur-long)} .band.dur[aria-pressed="true"]{border-color:currentColor;background:var(--panel-2)} .band.dur[aria-pressed="false"]{color:var(--dim)} .band.dur[aria-pressed="false"] .dot{background:var(--dur-short)} .band.dur-mid[aria-pressed="false"] .dot{background:var(--dur-mid)} .band.dur-long[aria-pressed="false"] .dot{background:var(--dur-long)} /* ---- barre de tri (au-dessus des colonnes de notes) ---- */ .listhead{ display:flex;justify-content:space-between;align-items:center;gap:12px; margin-top:14px;padding:0 var(--row-px); } .lh-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .lh-scores{display:flex;gap:var(--plate-gap)} .sortbtn{ cursor:pointer;background:var(--panel);border:1px solid var(--line); color:var(--dim);border-radius:8px;padding:7px 11px;font-size:11px; font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase; transition:color .12s ease,border-color .12s ease,background .12s ease; } .sortbtn:hover{color:var(--text)} .sortbtn[aria-pressed="true"]{color:var(--text);border-color:var(--blue); background:var(--panel-2);font-weight:600} .sortbtn.col{width:var(--plate-w);text-align:center;padding:7px 4px; display:inline-flex;align-items:center;justify-content:center;gap:3px} .sortbtn .ar{font-size:10px;color:var(--blue)} .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:16px 2px 10px;font-family:var(--mono);font-size:12px;color:var(--dim); letter-spacing:.06em;border-bottom:1px solid var(--line);flex-wrap:wrap} .meta b{color:var(--text);font-weight:600} .reset{background:none;border:none;color:var(--blue);font:inherit;cursor:pointer;padding:0;text-decoration:underline} /* ---- list ---- */ ol.list{list-style:none;margin:0;padding:0} li.game{ display:grid; grid-template-columns:30px 64px 1fr auto; grid-template-areas: "rank cover info scores" "rank cover times times"; column-gap:16px;row-gap:0;align-items:center; padding:14px var(--row-px);border-bottom:1px solid var(--hair); border-radius:10px; } li.game .rank{grid-area:rank} li.game .cover{grid-area:cover} li.game .info{grid-area:info;min-width:0} li.game .scores{grid-area:scores} li.game .times{grid-area:times} li.game:hover{background:var(--hover)} .rank{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--dim);text-align:right} .cover{ width:64px;height:86px;border-radius:8px;overflow:hidden; border:1px solid var(--line);background:var(--panel-2); display:flex;align-items:center;justify-content:center; position:relative;flex:none;box-shadow:0 3px 10px rgba(0,0,0,.22); } .cover img{width:100%;height:100%;object-fit:cover;display:block} .cover .fallback{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.04em; color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45); } .title{font-size:17.5px;font-weight:700;letter-spacing:-.015em;line-height:1.2} .title a{color:inherit;text-decoration:none} .title a:hover{color:var(--blue);text-decoration:underline} .sub{margin-top:5px;font-size:11.5px;color:var(--dim);font-family:var(--mono); display:flex;gap:8px;flex-wrap:wrap;align-items:center} .tag{border:1px solid var(--line);border-radius:4px;padding:2px 7px;letter-spacing:.04em} .tag.classic{border-color:var(--gold-line);color:var(--gold-text)} .scores{display:flex;gap:var(--plate-gap);align-items:stretch} .plate{ width:var(--plate-w);min-height:48px;border:1px solid var(--line);border-radius:10px; padding:6px;background:var(--panel); display:flex;align-items:center;justify-content:center; } .plate .n{font-family:var(--mono);font-size:21px;font-weight:700;line-height:1} a.plate{text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease} a.plate:hover{border-color:currentColor;background:var(--panel-2)} a.plate:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .plate.critic{border-width:1.5px} .b90{color:var(--green);border-color:var(--green)} .b80{color:var(--blue);border-color:var(--blue)} .b70{color:var(--pink);border-color:var(--pink)} .b60{color:var(--red);border-color:var(--red)} .bna{color:var(--grey);border-color:var(--line)} .plate.user .n{font-size:16px;color:var(--text);opacity:.9} .empty{padding:48px 4px;color:var(--dim);font-size:14px} footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--line); color:var(--dim);font-size:12px;line-height:1.7} footer b{color:var(--soft);font-weight:600} footer .tip{margin-top:16px;color:var(--soft)} footer .tip a{color:var(--blue);text-decoration:none;font-weight:600} footer .tip a:hover{text-decoration:underline} @media (max-width:768px){ .controls{position:static;backdrop-filter:none;background:transparent} } @media (max-width:640px){ :root{--plate-w:54px;--plate-gap:6px} /* menus de recherche : deux colonnes régulières, recherche pleine largeur */ .search-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .search-row #q{grid-column:1 / -1} .search-row select{width:100%;min-width:0} /* ligne : durées en pleine largeur sous la vignette, plus de rang */ li.game{ grid-template-columns:54px 1fr auto; grid-template-areas: "cover info scores" "cover times times"; column-gap:12px; } .rank{display:none} .cover{width:54px;height:72px} .plate .n{font-size:18px} /* durées : une fourchette compacte à la place des trois colonnes */ .times{gap:12px;margin-top:10px} li.game .times .t-col{display:none} li.game .times .t-range{display:flex} .bands{gap:10px 14px} /* barre de tri : Presse/Joueurs restent alignés à droite, au-dessus des colonnes */ .listhead{flex-wrap:wrap;gap:8px} .lh-scores{margin-left:auto;gap:6px} .sortbtn.col{width:auto;padding:7px 12px} } @media (max-width:380px){ :root{--plate-w:50px} li.game{column-gap:10px} .cover{width:48px;height:64px} } @media (prefers-reduced-motion:no-preference){ li.game{transition:background .15s ease} } #stamp{font-size:11px;color:var(--dim);letter-spacing:.04em} #stamp.stale{color:var(--gold-text)} .tag.store{color:var(--blue);text-decoration:none} .tag.leaving{border-color:var(--red);color:var(--red)} /* pastille de filtre « bientôt retirés » */ .band.leaving[aria-pressed="true"]{color:var(--red)} /* durées HowLongToBeat : badge coloré (bucket) + trois valeurs */ .times{display:flex;gap:16px;margin-top:8px;align-items:center;flex-wrap:wrap; font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--dim)} .times span{display:flex;flex-direction:column;gap:2px;white-space:nowrap} .times b{font-size:13px;letter-spacing:0;text-transform:none;color:var(--text); font-weight:600;white-space:nowrap} .times .t-range{display:none} /* fourchette : mobile seulement (voir media query) */ .durbadge{ flex:none;flex-direction:row!important;align-items:center;gap:6px;white-space:nowrap; padding:3px 9px;border-radius:999px;font-weight:700;letter-spacing:.06em; border:1px solid currentColor; } .durbadge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .durbadge.dur-short{color:var(--dur-short);background:var(--dur-short-soft)} .durbadge.dur-mid{color:var(--dur-mid);background:var(--dur-mid-soft)} .durbadge.dur-long{color:var(--dur-long);background:var(--dur-long-soft)} ol.list[aria-busy="true"]{opacity:.45}