*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --dk:#0b2a14;--dk2:#0f3319;--g:#1a6632;--g2:#2a8a47;--g3:#e6f4ec;
  --gold:#e8940a;
  --hdr1:rgba(19,56,36,.98);
  --hdr2:rgba(19,56,36,.92);
  --acc1:rgba(202,162,77,.75);
  --acc2:rgba(202,162,77,.35);
  --ink:#0d1410;--ink2:#2b3a32;--ink3:#6a7a72;--ink4:#9aa79f;
  --bg:#f2f1ed;--card:#fff;--border:#e2e1dd;--border2:#cfd3cf;
  --red:#c0392b;--redbg:#fef0ee;
  --amber:#9a6500;--amberbg:#fdf8ee;
  --blue:#1a4a99;--bluebg:#eef2ff;
  --grey:#555;--greybg:#f3f3f3;
  --good:#00b15d;
  --mono:'JetBrains Mono',monospace;
  --sans:'Outfit',sans-serif;
  --r:12px;
  --sh:0 12px 30px rgba(0,0,0,.08);
  --sh2:0 6px 16px rgba(0,0,0,.08);
  --max:1120px;
  --htmlbg:radial-gradient(1200px 800px at 20% -10%, rgba(42,138,71,.10), transparent 60%),radial-gradient(900px 700px at 95% 0%, rgba(232,148,10,.10), transparent 55%),var(--bg);
  --hdrH:56px;
  --progH:2px;
  --tabsH:0px;
  --barH:0px;
  --subcatsH:0px;
}

html[data-theme="olive"]{
  --dk:#133824;--dk2:#133824;--g:#1f5337;--g2:#2c6a46;--g3:#e6f4ec;
  --gold:#caa24d;
  --hdr1:rgba(19,56,36,.98);
  --hdr2:rgba(19,56,36,.92);
  --acc1:rgba(202,162,77,.75);
  --acc2:rgba(202,162,77,.35);
  --ink:#1b1b19;--ink2:#2b2b27;--ink3:#6f6a5e;--ink4:#9a9486;
  --bg:#f3efe6;--card:#ffffff;--border:#e7decc;--border2:#d7ccb7;
  --red:#c0392b;--redbg:#fef0ee;
  --amber:#9a6500;--amberbg:#fdf8ee;
  --blue:#1a4a99;--bluebg:#eef2ff;
  --grey:#555;--greybg:#f3f3f3;
  --r:18px;
  --sh:0 16px 40px rgba(0,0,0,.10);
  --sh2:0 10px 24px rgba(0,0,0,.10);
  --htmlbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%23d7ccb7' stroke-opacity='.35' stroke-width='2'%3E%3Cpath d='M-40 90 C 60 10 140 150 240 90 C 340 30 420 150 520 90 C 620 30 700 150 800 90'/%3E%3Cpath d='M-60 160 C 40 80 120 220 220 160 C 320 100 400 220 500 160 C 600 100 680 220 780 160'/%3E%3Cpath d='M-30 240 C 70 160 150 300 250 240 C 350 180 430 300 530 240 C 630 180 710 300 810 240'/%3E%3Cpath d='M-70 330 C 30 250 110 390 210 330 C 310 270 390 390 490 330 C 590 270 670 390 770 330'/%3E%3Cpath d='M-40 420 C 60 340 140 480 240 420 C 340 360 420 480 520 420 C 620 360 700 480 800 420'/%3E%3Cpath d='M-60 510 C 40 430 120 570 220 510 C 320 450 400 570 500 510 C 600 450 680 570 780 510'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg, rgba(243,239,230,1) 0%, rgba(243,239,230,1) 100%);
  background-blend-mode:multiply,normal;
}

html[data-theme="sport"]{
  --dk:#061521;--dk2:#0a1f2f;--g:#00d084;--g2:#00e09a;--g3:#e6fff4;
  --gold:#00e5ff;
  --hdr1:rgba(6,21,33,.98);
  --hdr2:rgba(10,31,47,.92);
  --acc1:rgba(0,229,255,.70);
  --acc2:rgba(0,229,255,.28);
  --ink:#061521;--ink2:#15314a;--ink3:#4a6a86;--ink4:#86a1b9;
  --bg:#e7fffa;--card:#ffffff;--border:#cfeee6;--border2:#b6e0d6;
  --red:#e11d48;--redbg:#ffe8ee;
  --amber:#b45309;--amberbg:#fff3e6;
  --blue:#2563eb;--bluebg:#e8f0ff;
  --grey:#3f5568;--greybg:#f1f6fb;
  --r:14px;
  --sh:0 16px 40px rgba(1,18,34,.12);
  --sh2:0 8px 20px rgba(1,18,34,.10);
  --htmlbg:radial-gradient(1100px 780px at 12% -10%, rgba(0,208,132,.18), transparent 58%),radial-gradient(900px 720px at 95% 0%, rgba(0,224,154,.14), transparent 55%),var(--bg);
}

html[data-theme="classic"]{
  --dk:#0b1f33;--dk2:#0f2a44;--g:#7c3aed;--g2:#6d28d9;--g3:#f1e8ff;
  --gold:#ff6b00;
  --hdr1:rgba(11,31,51,.98);
  --hdr2:rgba(15,42,68,.92);
  --acc1:rgba(124,58,237,.70);
  --acc2:rgba(124,58,237,.26);
  --ink:#0b1f33;--ink2:#28435c;--ink3:#6a7a8a;--ink4:#93a4b5;
  --bg:#f2f6ff;--card:#ffffff;--border:#dbe5ff;--border2:#c7d6ff;
  --red:#e11d48;--redbg:#ffe8ee;
  --amber:#b45309;--amberbg:#fff3e6;
  --blue:#7c3aed;--bluebg:#f1e8ff;
  --grey:#41556a;--greybg:#eef2f7;
  --r:14px;
  --sh:0 16px 40px rgba(2,12,27,.10);
  --sh2:0 8px 20px rgba(2,12,27,.08);
  --htmlbg:radial-gradient(1200px 820px at 18% -12%, rgba(37,99,235,.16), transparent 58%),radial-gradient(900px 720px at 95% 0%, rgba(255,107,0,.10), transparent 55%),var(--bg);
}

html[data-theme="dark"]{
  --dk:#0b0f14;--dk2:#101722;--g:#32d583;--g2:#12b76a;--g3:#0f2a1d;
  --gold:#ffd84a;
  --hdr1:rgba(11,15,20,.98);
  --hdr2:rgba(16,23,34,.92);
  --acc1:rgba(255,216,74,.60);
  --acc2:rgba(255,216,74,.18);
  --ink:#eef2f6;--ink2:#c7d0db;--ink3:#8a97a7;--ink4:#647387;
  --bg:#0b0f14;--card:#101722;--border:#1d2836;--border2:#263244;
  --red:#ff453a;--redbg:rgba(255,69,58,.14);
  --amber:#ffb020;--amberbg:rgba(255,176,32,.14);
  --blue:#4c8dff;--bluebg:rgba(76,141,255,.12);
  --grey:#9aa4b2;--greybg:rgba(154,164,178,.12);
  --sh:0 18px 50px rgba(0,0,0,.45);
  --sh2:0 10px 26px rgba(0,0,0,.35);
  --htmlbg:radial-gradient(1200px 800px at 20% -10%, rgba(76,141,255,.10), transparent 60%),radial-gradient(900px 700px at 95% 0%, rgba(50,213,131,.10), transparent 55%),var(--bg);
}
html[data-theme="dark"] thead th{background:var(--card);color:var(--ink3);border-bottom:1px solid var(--border)}
html[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.04)}

html[data-theme="dark"] #srch{background:rgba(16,23,34,.92);border-color:rgba(255,255,255,.10);color:var(--ink)}
html[data-theme="dark"] #srch-ico{fill:var(--ink4)}
html[data-theme="dark"] #stats{color:var(--ink3)}

html{background:var(--htmlbg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.35}
body{min-height:100vh}

#main,#bar{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
.wrap{max-width:var(--max);margin:0 auto}

/* HEADER */
#hdr{background:radial-gradient(900px 400px at 20% 0%, rgba(255,255,255,.08), transparent 55%),linear-gradient(180deg, var(--hdr1), var(--hdr2));padding:14px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));border-bottom:1px solid rgba(0,0,0,.18);position:sticky;top:0;z-index:50;backdrop-filter:blur(10px)}
#hdr-top{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"brand clock theme" "course course course";align-items:center;gap:12px}
#brand{grid-area:brand;min-width:0}
#clock-wrap{grid-area:clock;justify-self:center;display:flex;flex-direction:column;align-items:center}
#course-wrap{grid-area:course;display:flex;justify-content:center}
#theme-wrap{grid-area:theme;display:flex;justify-content:flex-end;justify-self:end;align-items:center;gap:8px}
#title{font-size:22px;font-weight:900;color:#fff;white-space:nowrap;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
#logo{height:clamp(26px, 5.8vw, 40px);width:auto;max-width:clamp(140px, 26vw, 240px);flex:0 0 auto;display:block}
#logo{filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
#title span{color:#fff}
#hdr-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;color:rgba(255,255,255,.75);font-size:12px}
#hdr-meta .sep{opacity:.45}
#hdr-date{font-size:12px;color:rgba(255,255,255,.65)}
#hdr-clock{font-family:var(--mono);font-size:24px;font-weight:950;color:var(--gold);letter-spacing:.08em;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,216,74,.55);background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));box-shadow:0 12px 28px rgba(0,0,0,.26), 0 0 0 1px rgba(255,216,74,.18), 0 0 22px rgba(255,216,74,.20), inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(10px);text-shadow:0 0 18px rgba(255,216,74,.35), 0 2px 14px rgba(0,0,0,.35);font-variant-numeric:tabular-nums;position:relative}
#hdr-clock:before{content:"";position:absolute;inset:-2px;border-radius:999px;background:radial-gradient(140px 70px at 35% 0%, rgba(255,216,74,.22), transparent 70%);pointer-events:none;filter:blur(.2px)}
#hdr-clock .clk-sep{opacity:.55;margin:0 2px}
#hdr-clock .clk-sec{font-size:.78em;opacity:.82;font-weight:850;letter-spacing:.02em;animation:secPulse 1s steps(1,end) infinite}
@keyframes secPulse{0%{opacity:.65}50%{opacity:.95}100%{opacity:.65}}
#offline-badge{display:none;margin-top:6px;background:rgba(192,57,43,.95);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;align-items:center;justify-content:center;gap:8px;animation:offBlink 1s steps(1,end) infinite;box-shadow:0 10px 24px rgba(0,0,0,.20)}
#offline-badge.on{display:inline-flex}
@keyframes offBlink{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
#offi-badge{background:var(--gold);color:var(--dk);border-radius:20px;padding:2px 10px;font-size:10px;font-weight:700;letter-spacing:.06em;display:none;white-space:nowrap;line-height:1.2;align-items:center;justify-content:center}
#live-badge{display:none;align-items:center;gap:4px;background:rgba(42,138,71,.3);border:1px solid rgba(42,138,71,.5);color:#6ddd94;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:600;letter-spacing:.08em}
#live-badge.on{display:flex}
.ldot{width:5px;height:5px;border-radius:50%;background:#6ddd94;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
#sel{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:12px;padding:10px 14px;font-family:var(--sans);font-size:16px;font-weight:700;outline:none;width:min(100%, clamp(320px, 66vw, 860px));max-width:100%;min-width:0;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease;box-shadow:0 10px 24px rgba(0,0,0,.20)}
#sel:focus{border-color:rgba(232,148,10,.8);background:rgba(255,255,255,.14)}
#sel:active{transform:translateY(1px)}
#sel option{background:var(--dk)}

#theme{background:var(--bg);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:9px 12px;font-family:var(--sans);font-size:14px;font-weight:700;outline:none;width:100%;cursor:pointer;transition:border-color .12s ease,background .12s ease}
#theme:focus{border-color:rgba(26,102,50,.55);box-shadow:0 0 0 4px rgba(26,102,50,.12)}
#theme option{background:var(--card);color:var(--ink)}

#hlp-btn,#settings-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.92);font-size:17px;font-weight:700;font-family:var(--sans);cursor:pointer;transition:background .12s,transform .12s;flex-shrink:0}
#hlp-btn:hover,#settings-btn:hover{background:rgba(255,255,255,.26)}
#settings-btn:active{transform:translateY(1px) rotate(20deg)}
#hlp-btn:active{transform:translateY(1px)}

#settings-ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(3px)}
#settings-ovl.on{opacity:1;pointer-events:all}
#settings{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);max-width:420px;width:calc(100% - 32px);max-height:80vh;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);z-index:201;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;pointer-events:none}
#settings.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
#settings-body{padding:6px 18px 20px;overflow-y:auto}
.stg-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.stg-row:last-child{border-bottom:none}
.stg-lab{display:flex;align-items:center;gap:12px;min-width:0}
.stg-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px}
.stg-t{font-size:13.5px;font-weight:800;color:var(--ink)}
.stg-s{font-size:11.5px;color:var(--ink3);margin-top:1px}
.stg-row select#theme,.stg-row select#defcat-sel{width:auto;min-width:120px;max-width:160px;flex-shrink:0}
#defcat-sel{background:var(--bg);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:9px 12px;font-family:var(--sans);font-size:13px;font-weight:700;outline:none;cursor:pointer;transition:border-color .12s ease}
#defcat-sel:focus{border-color:rgba(26,102,50,.55);box-shadow:0 0 0 4px rgba(26,102,50,.12)}
#defcat-sel:disabled{cursor:not-allowed;opacity:.6}
#defcat-sel option{background:var(--card);color:var(--ink)}
.stg-toggle{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--ink3);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s,opacity .12s}
.stg-toggle:hover{border-color:rgba(26,102,50,.35)}
.stg-toggle.off{opacity:.4}
.stg-btn{flex-shrink:0;border:1px solid rgba(26,102,50,.35);border-radius:999px;background:linear-gradient(180deg, rgba(26,102,50,.14), rgba(26,102,50,.06));padding:8px 16px;font-family:var(--sans);font-size:12px;font-weight:900;color:var(--g);cursor:pointer;transition:filter .12s ease}
.stg-btn:hover{filter:brightness(1.05)}

/* PROGRESS */
#prog{height:8px;background:rgba(0,0,0,.10);position:sticky;top:var(--hdrH);z-index:45;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#prog-fill{height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg, var(--gold), rgba(255,255,255,.75), var(--gold));background-size:200% 100%;will-change:transform,background-position;filter:drop-shadow(0 8px 10px rgba(0,0,0,.20))}
#prog.on #prog-fill{animation:sh 1.4s linear infinite}
@keyframes sh{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* TABS — le bouton catégorie vit maintenant dans #bar, sur la même ligne
   que la recherche et le bouton comparer. */
#tabs-inner{display:flex;justify-content:center;align-items:center;min-width:0}

#cat-trigger{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:9px 20px;border-radius:999px;border:1px solid transparent;background:linear-gradient(180deg, var(--g), var(--g2));color:#fff;font-family:var(--sans);font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.14);transition:filter .12s ease,transform .12s ease;white-space:nowrap}
#cat-trigger:hover{filter:brightness(1.07)}
#cat-trigger:active{transform:translateY(1px)}
#cat-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
#cat-trigger-arrow{font-size:12px;opacity:.85;flex-shrink:0}

/* Clignotement discret pour signaler que ce bouton s'ouvre au tap — s'arrête
   dès la première ouverture du picker (classe retirée en JS + mémorisé). */
#cat-trigger.pulse{animation:catPulse 1.7s ease-in-out infinite}
@keyframes catPulse{
  0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.16), 0 0 0 0 rgba(255,107,53,.65)}
  50%{box-shadow:0 6px 18px rgba(0,0,0,.16), 0 0 0 8px rgba(255,107,53,0)}
}
@media(prefers-reduced-motion: reduce){
  #cat-trigger.pulse{animation:none}
}

/* SUBCATS BAR : conservée masquée en permanence — remplacée par #catpick,
   l'élément reste dans le DOM pour ne pas casser --subcatsH. */
#subcats-bar{display:none}

/* CATEGORY PICKER — modal plein écran ouvert par #cat-trigger */
#catpick-ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(3px)}
#catpick-ovl.on{opacity:1;pointer-events:all}
#catpick{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);max-width:460px;width:calc(100% - 32px);max-height:80vh;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);z-index:201;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;pointer-events:none}
#catpick.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
#catpick-body{overflow-y:auto;padding:6px 12px 18px}

/* SEARCH — bouton loupe compact dans la barre + modal dédié (même famille
   visuelle que #catpick) contenant le champ et les suggestions. */
#srch-trigger{justify-self:start;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;transition:border-color .12s,background .12s,color .12s;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
#srch-trigger:hover{border-color:var(--g);color:var(--g);background:var(--g3)}
#srch-trigger:active{transform:translateY(1px)}
#srch-trigger svg{width:16px;height:16px;fill:currentColor}

#srchpick-ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(3px)}
#srchpick-ovl.on{opacity:1;pointer-events:all}
#srchpick{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);max-width:460px;width:calc(100% - 32px);max-height:80vh;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);z-index:201;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;pointer-events:none}
#srchpick.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
#srchpick-body{padding:18px;overflow-y:auto}
.cpk-grp{margin-top:18px}
.cpk-grp:first-child{margin-top:4px}
.cpk-grp-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g);padding-left:10px;border-left:3px solid var(--g);margin-bottom:10px;line-height:1.3}
.cpk-grp-rows{display:flex;flex-wrap:wrap;gap:8px}
.cpk-row{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--bg);cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);transition:border-color .12s,background .12s,color .12s;user-select:none}
.cpk-row:hover{border-color:var(--g);background:var(--g3)}
.cpk-row.on{background:linear-gradient(180deg, var(--g), var(--g2));border-color:transparent;color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.cpk-row.on::after{content:'✓';font-weight:900}

/* TOOLBAR */
#bar{display:none;background:transparent;padding:8px 0;align-items:center;gap:10px;position:sticky;top:calc(var(--hdrH) + var(--progH) + var(--tabsH) + var(--subcatsH));z-index:42}
.bar-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:6px 14px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
#bar-right{display:flex;align-items:center;gap:14px;justify-self:end;min-width:0}
#srch-wrap{position:relative}
#srch{border:1px solid rgba(0,0,0,.12);border-radius:12px;background:rgba(255,255,255,.9);padding:13px 14px 13px 42px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;width:100%;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}
#srch:focus{border-color:rgba(26,102,50,.55);background:var(--card);box-shadow:0 0 0 4px rgba(26,102,50,.12)}
#srch-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--ink4);pointer-events:none}
#srch-sug{margin-top:10px;background:var(--card);border:1px solid var(--acc2);border-radius:12px;box-shadow:var(--sh2);overflow:hidden;display:none;max-height:44vh;overflow-y:auto}
#srch-sug.on{display:block}
.sug-sec{padding:8px 10px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);background:color-mix(in srgb, var(--acc2) 12%, transparent)}
.sug-it{display:flex;align-items:center;gap:10px;padding:10px 10px;border-top:1px solid color-mix(in srgb, var(--acc2) 18%, transparent);cursor:pointer}
.sug-it:first-of-type{border-top:none}
.sug-it:hover{background:color-mix(in srgb, var(--acc2) 14%, transparent)}
.sug-ico{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--acc2) 18%, transparent);color:var(--ink3);font-weight:900;font-size:12px;flex:0 0 auto}
.sug-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.sug-n{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-m{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stats{display:flex;gap:12px;font-size:11px;color:var(--ink3)}
.sv{font-family:var(--mono);font-weight:500;color:var(--ink2);font-size:12px}
#upd-time{font-size:10px;color:var(--ink4);font-family:var(--mono)}

#cmpbtn{display:none;align-items:center;gap:7px;border:1px solid rgba(26,102,50,.32);border-radius:999px;background:linear-gradient(180deg, rgba(26,102,50,.13), rgba(26,102,50,.05));padding:8px 16px;font-family:var(--sans);font-size:12px;font-weight:900;color:var(--g);cursor:pointer;transition:transform .12s ease,border-color .12s ease,filter .12s ease,background .12s ease;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.05)}
#cmpbtn:hover{filter:brightness(1.05);border-color:rgba(26,102,50,.55)}
#cmpbtn:active{transform:translateY(1px)}
#cmpbtn.on{display:inline-flex}
#cmpn{min-width:22px;height:16px;padding:0 6px;border-radius:999px;background:rgba(26,102,50,.12);border:1px solid rgba(26,102,50,.22);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--g)}

/* MAIN */
#main{min-height:400px;padding-top:10px;padding-bottom:34px}
.card{background:var(--card);border:1px solid var(--acc2);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card.pad{padding:18px}
#empty{display:flex;flex-direction:column;align-items:center;padding:80px 20px;gap:10px}
.ei{font-size:36px;opacity:.15}
.et{font-size:14px;font-weight:600;color:var(--ink3)}
.es{font-size:12px;color:var(--ink4)}
.spin{width:24px;height:24px;border:2px solid var(--border2);border-top-color:var(--g);border-radius:50%;animation:sp 1s linear infinite;margin:50px auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* TABLE */
table{width:100%;border-collapse:collapse}
.tblwrap{overflow:visible}
.tblwrap{max-height:none}
.tblwrap{-webkit-overflow-scrolling:touch}

@media(max-width:720px){
  .tblwrap{overflow:visible;overscroll-behavior:auto}
  .tblwrap{max-height:none}
}

/* < 600px : la colonne DÉPART (classement) / CATÉGORIE (recherche) se masque
   via .hm — la règle existait déjà plus bas, elle est désormais réellement
   utilisée puisque app.js pose la classe .hm sur ces cellules. */

/* < 400px : filet de sécurité — si le nom + les colonnes restantes ne
   tiennent toujours pas, un scroll horizontal prend le relai plutôt que
   d'écraser le texte de façon illisible. La colonne COUREUR reste flexible,
   les colonnes chiffrées gardent une largeur figée. */
@media(max-width:400px){
  .tblwrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  table{min-width:360px}
  .rn{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rc{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

thead th{background:#fff;font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#2b2b27;padding:14px 14px;border-bottom:1px solid var(--acc2);white-space:nowrap;position:sticky;top:0;z-index:5;backdrop-filter:none}
th.c{text-align:center;width:46px}
th.r{text-align:center}
tbody tr{border-bottom:1px solid var(--acc2);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg)}
tbody tr.focus{background:rgba(37,99,235,.14)}
tbody tr.focus:hover{background:rgba(37,99,235,.18)}
tbody tr.fl{animation:fl .6s}
@keyframes fl{0%{background:#e6f4ec}100%{background:transparent}}
tbody tr.arr{animation:arr .8s}
@keyframes arr{0%{transform:translateY(6px);opacity:.35}60%{transform:translateY(0);opacity:1}100%{transform:none;opacity:1}}
tbody tr.drow td{opacity:.45}
tbody tr.row-ok{background:var(--g3)}
tbody tr.row-ok:hover{background:#d0ecdb}
tbody tr.row-err{background:var(--redbg)}
tbody tr.row-err:hover{background:#fad8d4}
tbody tr.cmp-sel{background:var(--redbg)}
tbody tr.cmp-sel:hover{background:#fad8d4}
tbody tr.pod1:not(.row-err):not(.cmp-sel){background:linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(255, 215, 0, .18) 50%, rgba(255,255,255,.00) 100%)}
tbody tr.pod2:not(.row-err):not(.cmp-sel){background:linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(192, 192, 192, .22) 50%, rgba(255,255,255,.00) 100%)}
tbody tr.pod3:not(.row-err):not(.cmp-sel){background:linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(205, 127, 50, .20) 50%, rgba(255,255,255,.00) 100%)}
tbody tr.pod1:hover:not(.row-err):not(.cmp-sel){background:linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(255, 215, 0, .24) 50%, rgba(255,255,255,.00) 100%)}
tbody tr.pod2:hover:not(.row-err):not(.cmp-sel){background:linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(192, 192, 192, .28) 50%, rgba(255,255,255,.00) 100%)}
tbody tr.pod3:hover:not(.row-err):not(.cmp-sel){background:linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(205, 127, 50, .26) 50%, rgba(255,255,255,.00) 100%)}
tbody tr{cursor:pointer}
td{padding:16px 14px;vertical-align:middle}
td.c{text-align:center}
td.r{text-align:center}
tbody td:nth-child(3),tbody td:nth-child(5){text-align:center}
.rk{font-size:16px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;text-align:center;color:#2b2b27;background:rgba(0,0,0,.05)}
.rk.prov{font-size:13px;font-style:italic;opacity:.65;border:2px dashed var(--border2);background:transparent;color:var(--ink3)}
.rk.p1{background:radial-gradient(circle at 30% 30%, #fff2c2, #d1a141);color:#5a3c00;box-shadow:inset 0 0 0 1px rgba(90,60,0,.10)}
.rk.p2{background:radial-gradient(circle at 30% 30%, #ffffff, #b9c0c9);color:#39414a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.rk.p3{background:radial-gradient(circle at 30% 30%, #ffd8bf, #b46b3f);color:#4b2b1a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.rn{font-size:13px;font-weight:600;color:var(--ink);text-align:center}
.rc{font-size:11px;color:var(--ink3);margin-top:1px;text-align:center}
.cl{font-size:12px;color:var(--ink2);text-align:center}
.tm{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);text-align:center}
.tg{font-family:var(--mono);font-size:10px;color:var(--ink4);margin-top:1px;text-align:center}
.bd{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
.bd::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ok{background:var(--g3);color:var(--g)}.ok::before{background:var(--g)}
.run{background:var(--bluebg);color:var(--blue)}.run::before{background:var(--blue)}
.err{background:var(--redbg);color:var(--red)}.err::before{background:var(--red)}
.dns{background:var(--greybg);color:var(--grey)}.dns::before{background:var(--grey)}
.dsq{background:var(--amberbg);color:var(--amber)}.dsq::before{background:var(--amber)}
.run-ico{display:inline-block;font-size:18px;animation:run-anim 1.2s linear infinite}
@keyframes run-anim{
  0%  {transform:scaleX(-1) translateX(0)     translateY(0)}
  25% {transform:scaleX(-1) translateX(-10px)  translateY(-3px)}
  50% {transform:scaleX(-1) translateX(-20px) translateY(0)}
  75% {transform:scaleX(-1) translateX(-10px)  translateY(-3px)}
  100%{transform:scaleX(-1) translateX(0)     translateY(0)}
}
.ok-ico{font-size:18px}
.run-ico-wait{display:inline-block;font-size:18px;opacity:.35}
.fstar{cursor:pointer;font-size:16px;user-select:none;line-height:1;opacity:.2;transition:opacity .15s,transform .15s;display:inline-block}
.fstar:hover{opacity:.6;transform:scale(1.2)}
.fstar.on{opacity:1;color:var(--gold)}
.sep-follow td{padding:5px 14px;background:var(--amberbg);border-top:2px solid var(--gold);border-bottom:1px solid rgba(202,162,77,.4)}
.sep-follow span{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--amber);text-transform:uppercase}
.sep-class td{padding:5px 14px;background:var(--greybg);border-top:2px solid var(--border2);border-bottom:1px solid var(--border)}
.sep-class span{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--grey);text-transform:uppercase}


/* SPLITS PANEL */
#ovl{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
#ovl.on{opacity:1;pointer-events:all}
#pnl{position:fixed;right:0;top:0;bottom:0;width:320px;max-width:92vw;background:var(--card);border-left:1px solid rgba(0,0,0,.08);box-shadow:-10px 0 30px rgba(0,0,0,.20);z-index:101;transform:translateX(100%);transition:transform .25s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column}
#pnl.on{transform:none}
.ph{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.10);flex-shrink:0;background:linear-gradient(180deg, var(--hdr1), var(--hdr2))}
.pn{font-size:14px;font-weight:700;color:#fff}
.pn-dep{display:inline-block;margin-left:8px;font-size:11px;font-weight:500;color:rgba(255,255,255,.6);font-family:var(--mono);white-space:nowrap}
.pm{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.pcl{float:right;cursor:pointer;color:rgba(255,255,255,.4);font-size:16px;line-height:1;transition:color .1s}
.pcl:hover{color:#fff}
#pb{flex:1;overflow-y:auto;padding:8px}
.stbl{width:100%;border-collapse:collapse;font-size:12px}
.stbl th{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:5px 8px;border-bottom:1px solid var(--border);background:var(--bg);text-align:center}
.stbl th:last-child,.stbl td:last-child{text-align:center}
.stbl td{padding:5px 8px;border-bottom:1px solid var(--border);color:var(--ink2);text-align:center}
.stbl tr:last-child td{border-bottom:none}
.stbl td:last-child{font-family:var(--mono);font-weight:500;color:var(--ink)}
.spl-cum{font-family:var(--mono);font-weight:700;color:var(--ink);font-size:12px}
.spl-leg{font-family:var(--mono);font-size:12px;color:var(--g);font-weight:500}
.spl-rg{font-family:var(--mono);font-weight:700;font-size:12px;text-align:center;color:var(--ink2)}
.spl-rg small{font-weight:400;color:var(--ink3);font-size:10px}
.spl-r1{color:#b8860b}
.spl-r3{color:var(--g)}

.bicon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#ffffff 0 50%, #f58220 50% 100%);border:2px solid #f58220;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.bicon::after{content:attr(data-n);font-family:var(--mono);font-weight:950;font-size:14px;line-height:1;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.thp{display:flex;flex-direction:column;align-items:center;gap:6px}
.stbl .bicon{margin-top:2px}
.ctbl th .bicon{width:28px;height:22px;border-radius:6px;border-width:2px}
.ctbl th .bicon::after{font-size:13px;font-weight:950;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.7)}

.cplus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:8px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.75);color:var(--ink3);font-weight:900;cursor:pointer;user-select:none;transition:transform .12s ease,background .12s ease,border-color .12s ease,color .12s ease}
.cplus:hover{background:var(--card);border-color:rgba(26,102,50,.35);color:var(--ink2)}
.cplus:active{transform:translateY(1px)}
.cplus.on{background:var(--redbg);border-color:rgba(192,57,43,.35);color:var(--red)}

#covl{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
#covl.on{opacity:1;pointer-events:all}
#cpnl{position:fixed;left:0;right:0;top:0;bottom:0;background:var(--bg);z-index:151;transform:translateY(8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:flex;flex-direction:column}
#cpnl.on{transform:none;opacity:1;pointer-events:all}
.cph{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:linear-gradient(180deg, var(--hdr1), var(--hdr2));color:#fff}
.cpt{display:flex;align-items:center;gap:10px;min-width:0}
.cpn{font-size:14px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.cpm{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.cpr{margin-left:auto;display:flex;align-items:center;gap:8px}
.creflab{font-size:11px;font-weight:900;letter-spacing:.06em;color:rgba(255,255,255,.72);white-space:nowrap}
.crefsel{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:6px 10px;font-family:var(--sans);font-size:12px;font-weight:800;outline:none;max-width:280px}
.crefsel option{color:#000}
.cchip{display:inline-flex;align-items:center;gap:6px;max-width:min(240px, 30vw);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);cursor:pointer;user-select:none;transition:background .12s,border-color .12s,transform .12s}
.cchip:hover{background:rgba(255,255,255,.16)}
.cchip:active{transform:translateY(1px)}
.cchip.on{border-color:rgba(109,221,148,.55);background:rgba(109,221,148,.16)}
.cchip .cn{font-weight:800;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip .cx{opacity:.7;font-weight:900}
.cref{font-size:10px;font-weight:900;letter-spacing:.10em;opacity:.75}
.ccl{cursor:pointer;color:rgba(255,255,255,.5);font-size:18px;line-height:1;transition:color .1s}
.ccl:hover{color:#fff}
#cb{flex:1;overflow:auto;padding:14px}

.ctbl{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.ctbl th{position:sticky;top:0;background:var(--bg);z-index:40;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--border);text-align:center;white-space:nowrap}
.ctbl td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;text-align:center;white-space:nowrap}
.ctbl .corner{left:0;z-index:5;text-align:center}
.ctbl .rname{position:sticky;left:0;z-index:10;background:var(--card);text-align:left;min-width:180px;max-width:220px;box-shadow:8px 0 0 rgba(0,0,0,0), 1px 0 0 var(--border);white-space:normal}
.ctbl .rname .rn,.ctbl .rname .rc{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.ctbl thead .corner{position:sticky;left:0;z-index:50;background:var(--bg)}
.ctbl .cposte{font-weight:900;color:var(--ink)}
.ctbl .cline{display:flex;flex-direction:column;gap:3px;align-items:center}
.ctbl .line{display:flex;gap:6px;align-items:baseline;justify-content:center}
.ctbl .k{font-size:10px;font-weight:900;letter-spacing:.06em;color:var(--ink4)}
.ctbl .v{font-family:var(--mono);font-weight:900;color:var(--ink)}
.ctbl .d{font-family:var(--mono);font-weight:800;color:var(--ink2);font-size:11px}
.ctbl .d.pos{color:var(--red)}
.ctbl .d.neg{color:var(--good)}
.ctbl .miss{color:var(--ink4)}
.ctbl td.bestp{background:color-mix(in srgb, var(--good) 12%, transparent)}
.ctbl td.worstp{background:color-mix(in srgb, var(--red) 10%, transparent)}
.ctbl .csum{margin-top:6px;font-size:11px;line-height:1.25;color:var(--ink3);white-space:normal}
.ctbl .csum b{color:var(--ink);font-weight:900}
.ctbl tr.ref td{background:var(--card);box-shadow:inset 0 0 0 9999px rgba(26,102,50,.07);position:sticky;top:34px;z-index:20}
.ctbl tr.ref td:not(.rname){z-index:20}
.ctbl tr.ref td.rname{background:var(--card);box-shadow:inset 0 0 0 9999px rgba(26,102,50,.10);z-index:30}

/* SCROLL TO TOP */
:root{--totop-lift:0px}
#totop{position:fixed;bottom:calc(max(14px, env(safe-area-inset-bottom) + 10px) + var(--totop-lift));right:14px;width:44px;height:44px;border-radius:50%;background:rgba(11,42,20,.92);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9);font-size:18px;font-weight:900;cursor:pointer;z-index:60;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.28);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,bottom .22s ease}
#totop.on{opacity:1;pointer-events:all;transform:translateY(0)}
#totop:hover{background:rgba(11,42,20,1)}
#totop:active{transform:translateY(1px)}
html[data-theme="dark"] #totop{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
/* Le popup d'arrivée (#toast) occupe le bas de l'écran : on remonte le
   bouton "haut de page" pendant qu'il est visible pour éviter tout chevauchement. */
body.toast-on{--totop-lift:76px}

#footer{text-align:center;padding:20px 16px 28px;font-size:11px;color:var(--ink3);letter-spacing:.04em;border-top:1px solid var(--border)}
.fsep{margin:0 8px;opacity:.35}

#rovl{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:160;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
#rovl.on{opacity:1;pointer-events:all}
#rpnl{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:calc(100% - 32px);max-width:520px;max-height:84vh;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);z-index:161;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;pointer-events:none}
#rpnl.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
.rph{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--card)}
.rpn{font-size:14px;font-weight:900;letter-spacing:.02em;min-width:0}
.rcl{margin-left:auto;cursor:pointer;color:var(--ink3);font-size:18px;line-height:1;transition:color .1s}
.rcl:hover{color:var(--ink)}
.rbody{padding:14px 16px 16px;overflow:auto}
.rsub{font-size:12px;color:var(--ink3);line-height:1.5;margin-top:4px}
.rstars{display:flex;gap:8px;justify-content:center;padding:12px 0 6px}
.rstar{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.rstar:hover{transform:translateY(-1px);border-color:rgba(26,102,50,.35)}
.rstar.on{background:rgba(26,102,50,.10);border-color:rgba(26,102,50,.35)}
.rstar svg{width:18px;height:18px;fill:transparent;stroke:var(--ink3);stroke-width:2}
.rstar.on svg{fill:var(--gold);stroke:rgba(0,0,0,.15)}
.rta{width:100%;min-height:96px;resize:vertical;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-family:var(--sans);font-size:13px;outline:none;background:var(--card);color:var(--ink);line-height:1.4}
.rta:focus{border-color:rgba(26,102,50,.45);box-shadow:0 0 0 4px rgba(26,102,50,.10)}
.ract{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:12px;flex-wrap:wrap}
.rbtn{border:1px solid rgba(26,102,50,.35);border-radius:999px;background:linear-gradient(180deg, rgba(26,102,50,.14), rgba(26,102,50,.06));padding:9px 14px;font-family:var(--sans);font-size:12px;font-weight:900;color:var(--g);cursor:pointer;transition:transform .12s ease,border-color .12s ease,filter .12s ease,background .12s ease;white-space:nowrap}
.rbtn:hover{filter:brightness(1.05);border-color:rgba(26,102,50,.55)}
.rbtn:active{transform:translateY(1px)}
.rlink{border:none;background:none;color:var(--ink3);font-size:12px;font-weight:900;letter-spacing:.02em;cursor:pointer;padding:8px 10px}
.rlink:hover{color:var(--ink)}
.rmsg{margin-top:10px;font-size:12px;color:var(--ink3);text-align:center;min-height:16px}
#ratebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(26,102,50,.35);border-radius:999px;background:linear-gradient(180deg, rgba(26,102,50,.14), rgba(26,102,50,.06));padding:6px 12px;font-family:var(--sans);font-size:11px;font-weight:900;color:var(--g);cursor:pointer;transition:transform .12s ease,border-color .12s ease,filter .12s ease,background .12s ease;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.08)}
#ratebtn:hover{filter:brightness(1.05);border-color:rgba(26,102,50,.55)}
#ratebtn:active{transform:translateY(1px)}
#toast{position:fixed;left:50%;bottom:max(16px, env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);z-index:120;pointer-events:none;min-width:min(520px, calc(100vw - 24px));max-width:min(720px, calc(100vw - 24px));display:none}
#toast.on{display:block;animation:toIn .18s ease-out}
#toast .tbox{background:rgba(14,44,29,.95);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 16px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px);display:flex;align-items:center;gap:10px;pointer-events:auto;cursor:pointer;user-select:none}
#toast .tbox:active{transform:translateY(1px)}
#toast .tico{width:34px;height:34px;border-radius:10px;background:rgba(109,221,148,.16);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
#toast .tmain{min-width:0;display:flex;flex-direction:column;gap:1px}
#toast .ttit{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
#toast .tname{font-weight:900;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toast .tmeta{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.82)}
#toast.off{animation:toOut .20s ease-in forwards}
@keyframes toIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(8px)}}
#toast-toggle-btn.off{opacity:.4}
#hlp-ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(3px)}
#hlp-ovl.on{opacity:1;pointer-events:all}
#hlp-pnl{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);max-width:500px;width:calc(100% - 32px);max-height:84vh;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);z-index:201;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;pointer-events:none}
#hlp-pnl.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
#hlp-body{overflow-y:auto;padding:16px 18px 24px;font-size:13px;color:var(--ink2);line-height:1.6}

#news-ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:180;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(3px)}
#news-ovl.on{opacity:1;pointer-events:all}
#news-pnl{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);max-width:520px;width:calc(100% - 32px);max-height:84vh;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);z-index:181;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;pointer-events:none;border:1px solid var(--acc2)}
#news-pnl.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
#news-body{overflow-y:auto;padding:16px 18px 22px}
.hlp-h{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none}
.hlp-h::after{content:'›';font-size:14px;opacity:.6;transform:rotate(90deg);transition:transform .15s ease,opacity .15s ease}
.hlp-h.cl::after{transform:rotate(0deg);opacity:.75}
.hlp-c{padding:0 0 2px}
.hlp-c.cl{display:none}
.hlp-h:first-child{margin-top:0}
.hlp-row{display:flex;gap:10px;align-items:baseline;padding:3px 0}
.hlp-k{font-family:var(--mono);font-weight:600;font-size:11px;background:var(--bg);border:1px solid var(--border2);border-radius:5px;padding:1px 6px;white-space:nowrap;color:var(--ink);flex-shrink:0}
.hlp-ico{flex-shrink:0;width:26px;text-align:center;font-size:15px}
.hlp-sq{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0;margin-top:3px}
@media(max-width:520px){
  #hdr{padding:10px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left))}
  #pnl{width:100%;border-left:none;border-top:3px solid var(--g);top:auto;bottom:0;height:65vh;transform:translateY(100%)}
  #pnl.on{transform:none}
  html.searching{--subcatsH:0px}
  html.searching #subcats-bar{display:none !important}
  th.hm,td.hm{display:none}
  #stats{display:none}
  #hdr-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"brand clock theme" "course course course";gap:8px;align-items:center}
  #brand{display:flex;flex-direction:column;gap:4px;min-width:0}
  #hdr-meta{margin-top:0;gap:6px;font-size:11px}
  #clock-wrap{grid-area:clock;justify-self:center;align-self:center;min-width:0;max-width:100%}
  #hdr-clock{font-size:22px;padding:9px 16px;box-shadow:0 12px 26px rgba(0,0,0,.24), 0 0 26px rgba(255,216,74,.18), inset 0 1px 0 rgba(255,255,255,.18)}
  #hdr-clock:before{background:radial-gradient(140px 64px at 35% 0%, rgba(255,216,74,.20), transparent 70%)}
  #course-wrap{justify-content:flex-start}
  #sel{min-width:100%;font-size:14px;padding:8px 12px;border-radius:11px}
  #offi-badge,#live-badge{font-size:9px;padding:2px 7px}
  th.c{width:24px}
  td,thead th{padding:10px 5px}
  .rk{width:28px;height:28px;font-size:12px}
  .fstar{font-size:13px}
  .rn{font-size:12.5px}
  .rc{font-size:10px}
  .tm{font-size:12px}
  thead th{font-size:10.5px;letter-spacing:.06em}
}

@media(max-width:420px){
  #hdr-top{gap:6px}
  #hdr-meta{gap:5px;font-size:10px}
  #logo{height:clamp(22px, 5.4vw, 34px);max-width:clamp(120px, 24vw, 210px)}
  #offi-badge,#live-badge{font-size:8.5px;padding:2px 6px}
  #hdr-clock{max-width:100%;font-size:clamp(17px, 4.8vw, 20px);padding:7px 12px;letter-spacing:.05em}
  #sel{font-size:13px;padding:7px 11px}
  #hlp-btn,#settings-btn{width:32px;height:32px;font-size:15px}
}

/* Barre recherche/catégorie/comparer : reste centrée en grille jusqu'à 460px
   (couvre les fenêtres desktop réduites), ne bascule en empilement que sur
   les écrans vraiment étroits. */
@media(max-width:460px){
  .bar-wrap{row-gap:6px}
  #bar-right{justify-self:auto}
  #srch-trigger{width:32px;height:32px}
  #srch-trigger svg{width:14px;height:14px}
  #cat-trigger{font-size:12.5px;padding:7px 14px;gap:6px;box-shadow:none}
  #cat-trigger-label{max-width:90px}
  #cmpbtn{padding:6px 10px;font-size:10.5px;gap:6px}
  #cmpn{min-width:20px;height:14px;padding:0 5px;font-size:9.5px}
}