/* PronoSoon V2 — feuille de style
   Direction : tableau d'affichage d'hippodrome. Vert gazon, rouge casaque,
   chiffres jaune totalisateur, typo condensée de signalétique. */

:root{
  --bg:#eef1ec;
  --surface:#ffffff;
  --surface-2:#f6f8f4;
  --encre:#13201a;
  --encre-2:#3f4d46;
  --dim:#66746c;
  --faint:#9aa59e;
  --ligne:#dbe1da;
  --ligne-forte:#c3ccc4;
  --gazon:#0e3b2c;
  --gazon-2:#175040;
  --gazon-txt:#e6efe9;
  --gazon-dim:#9fbcb0;
  --rouge:#d0142c;
  --rouge-2:#a30d21;
  --rouge-pale:#fbe9ec;
  --tote:#ffc933;
  --ok:#1d7f47;
  --ok-pale:#e3f3e9;
  --warn:#b86200;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-s:6px; --r-m:10px; --r-l:16px;
  --ombre:0 1px 0 rgba(19,32,26,.04),0 6px 20px -12px rgba(19,32,26,.25);
  --gutter:clamp(16px,3.5vw,32px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a1511;--surface:#11201a;--surface-2:#162820;--encre:#e8efea;--encre-2:#c0cdc5;--dim:#8fa098;--faint:#5f7068;
    --ligne:#1f3329;--ligne-forte:#2c463a;--gazon:#08251b;--gazon-2:#103a2c;--rouge:#ff4d63;--rouge-2:#d0142c;--rouge-pale:rgba(255,77,99,.12);
    --ok:#4cc07c;--ok-pale:rgba(76,192,124,.12);--warn:#f0a040;--ombre:0 1px 0 rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1511;--surface:#11201a;--surface-2:#162820;--encre:#e8efea;--encre-2:#c0cdc5;--dim:#8fa098;--faint:#5f7068;
  --ligne:#1f3329;--ligne-forte:#2c463a;--gazon:#08251b;--gazon-2:#103a2c;--rouge:#ff4d63;--rouge-2:#d0142c;--rouge-pale:rgba(255,77,99,.12);
  --ok:#4cc07c;--ok-pale:rgba(76,192,124,.12);--warn:#f0a040;--ombre:0 1px 0 rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  background:var(--bg);color:var(--encre);font-family:var(--sans);
  font-size:16px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums;
}
main{flex:1;outline:none;padding-bottom:40px}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--rouge);color:#fff}
:focus-visible{outline:2px solid var(--rouge);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:100;border-radius:var(--r-s)}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= Barre du haut ================= */
.topbar{background:var(--gazon);color:var(--gazon-txt);position:sticky;top:0;z-index:40;border-bottom:3px solid var(--rouge)}
.topbar-in{max-width:1200px;margin:0 auto;padding:0 var(--gutter);height:60px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:7px;background:var(--rouge);color:#fff;display:grid;place-items:center;
  font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.02em;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.25);
}
.brand-name{font-family:var(--cond);font-weight:700;font-size:24px;letter-spacing:.01em}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{
  text-decoration:none;font-weight:600;font-size:15px;color:var(--gazon-dim);
  padding:8px 12px;border-radius:var(--r-s);transition:color .15s,background .15s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gazon-dim);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--gazon-dim)}
.status[data-mode="ok"] i{background:#4cd18a;box-shadow:0 0 0 3px rgba(76,209,138,.18)}
.status[data-mode="load"] i{background:var(--tote);animation:blink 1s infinite}
.status[data-mode="err"] i{background:var(--rouge)}
.status[data-mode="err"]{color:#ffb3bd}
@keyframes blink{50%{opacity:.25}}
.icon-btn{
  width:38px;height:38px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.16);
  background:transparent;color:var(--gazon-txt);display:grid;place-items:center;
}
.icon-btn:hover{border-color:rgba(255,255,255,.4)}

/* Barre d'onglets mobile */
.tabbar{display:none}
@media (max-width:820px){
  .nav{display:none}
  .topbar-in{height:54px}
  .brand-name{font-size:21px}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);
    border-top:1px solid var(--ligne);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
    font-size:11.5px;font-weight:600;color:var(--dim);padding:4px 0;border-radius:var(--r-s);min-height:44px;justify-content:center;
  }
  .tabbar svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{color:var(--rouge)}
  body{padding-bottom:72px}
}

/* ================= Mise en page ================= */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.page-head{padding:28px 0 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h1{font-family:var(--cond);font-weight:700;font-size:clamp(30px,4.5vw,44px);line-height:1;letter-spacing:-.005em}
.page-head p{color:var(--dim);margin-top:6px;max-width:62ch}
h2.h{font-family:var(--cond);font-weight:700;font-size:24px;line-height:1.1;margin:0 0 12px}
h3.h{font-family:var(--cond);font-weight:700;font-size:19px;line-height:1.15;margin:0 0 8px}
.muted{color:var(--dim)}
.small{font-size:14px}
.section{margin-top:28px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-m);padding:clamp(16px,2.6vw,24px)}

/* ================= Boutons & champs ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;
  border-radius:var(--r-s);border:1px solid var(--ligne-forte);background:var(--surface);
  font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{border-color:var(--encre-2)}
.btn.primary{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.primary:hover{background:var(--rouge-2);border-color:var(--rouge-2)}
.btn.dark{background:var(--encre);border-color:var(--encre);color:var(--bg)}
.btn.ghost{background:transparent}
.btn.sm{min-height:34px;padding:0 11px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.on{background:var(--rouge-pale);border-color:var(--rouge);color:var(--rouge)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lbl{font-weight:600;font-size:14px}
.field .hint{font-size:13px;color:var(--dim)}
.input,select.input{
  min-height:42px;border:1px solid var(--ligne-forte);border-radius:var(--r-s);background:var(--surface);
  padding:0 12px;font-size:15px;width:100%;
}
.input:focus{outline:2px solid var(--rouge);outline-offset:0;border-color:transparent}
input[type=range]{accent-color:var(--rouge);width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  min-height:36px;padding:0 13px;border-radius:99px;border:1px solid var(--ligne-forte);background:var(--surface);
  font-weight:600;font-size:14px;color:var(--encre-2);
}
.chip[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--bg)}

/* ================= Tapis de selle ================= */
.plate{
  display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:6px;
  font-family:var(--cond);font-weight:800;font-size:19px;line-height:1;
  border:1px solid rgba(19,32,26,.16);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.18);
}
.plate.lg{width:58px;height:58px;font-size:32px;border-radius:9px;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -4px 0 rgba(0,0,0,.2),0 8px 18px -8px rgba(0,0,0,.45)}
.plate.sm{width:26px;height:26px;font-size:15px;border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.16)}
.plate.hit{outline:3px solid var(--ok);outline-offset:1px}
.plate.win{outline:3px solid var(--tote);outline-offset:1px}
.plates{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plates.gap{gap:10px}

/* ================= Le tableau (hero) ================= */
.board{
  background:var(--gazon);color:var(--gazon-txt);border-radius:var(--r-l);margin-top:22px;
  padding:clamp(18px,3vw,30px);position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px);
}
.board-grid{display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:end}
.board-kicker{font-weight:600;font-size:15px;color:var(--gazon-dim)}
.board-code{font-family:var(--cond);font-weight:800;color:var(--tote);font-size:clamp(46px,8vw,84px);line-height:.9;letter-spacing:.01em;margin-top:6px}
.board-title{font-family:var(--cond);font-weight:600;font-size:clamp(21px,2.8vw,28px);line-height:1.15;margin-top:8px;color:#fff}
.board-meta{color:var(--gazon-dim);margin-top:4px;font-size:15px}
.board-clock{text-align:right}
.board-clock .lbl{font-size:14px;color:var(--gazon-dim);font-weight:600}
.board-clock .digits{
  font-family:var(--cond);font-weight:700;color:var(--tote);font-size:clamp(48px,9vw,96px);line-height:.95;
  text-shadow:0 0 22px rgba(255,201,51,.28);
}
.board-clock .digits.done{color:var(--gazon-dim);text-shadow:none}
.board-foot{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:4px;
}
.board-foot .who{color:var(--gazon-dim);font-size:15px}
.board-foot .who b{color:#fff;font-weight:600}
.board .plate{border-color:rgba(255,255,255,.2)}
.board .btn{background:var(--tote);border-color:var(--tote);color:#13201a}
.board .btn:hover{background:#ffd75e}
.board-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:12px}
.mini-board{
  display:flex;align-items:center;gap:14px;text-decoration:none;padding:14px 16px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--ligne);
}
.mini-board:hover{border-color:var(--ligne-forte)}
.mini-board .code{font-family:var(--cond);font-weight:800;font-size:26px;color:var(--rouge);line-height:1}
.mini-board .t{flex:1;min-width:0}
.mini-board .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-board .t span{font-size:14px;color:var(--dim)}
.mini-board .clk{font-family:var(--cond);font-weight:700;font-size:22px;color:var(--encre)}
.mini-board.quinte{background:var(--rouge);border-color:var(--rouge);color:#fff}
.mini-board.quinte .code{color:var(--tote)}
.mini-board.quinte .t span{color:rgba(255,255,255,.8)}
.mini-board.quinte .clk{color:#fff}
@media (max-width:640px){
  .board-grid{grid-template-columns:1fr}
  .board-clock{text-align:left;display:flex;align-items:baseline;gap:12px}
}

/* ================= Barre du jour ================= */
.daybar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:30px}
.daynav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
@media (max-width:640px){.daynav h2{font-size:22px;margin:0 4px}.daynav .input{flex:1 1 140px;min-width:0}}
.daynav h2{font-family:var(--cond);font-weight:700;font-size:26px;line-height:1;margin:0 8px;white-space:nowrap}
.daynav .input{width:auto;min-height:38px}

/* ================= Programme ================= */
.reunion{margin-top:20px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-m);overflow:hidden}
.reu-head{display:flex;align-items:baseline;gap:12px;padding:14px 18px;border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.reu-head .rc{font-family:var(--cond);font-weight:800;font-size:22px;color:var(--rouge);line-height:1}
.reu-head h3{font-family:var(--cond);font-weight:700;font-size:22px;line-height:1}
.reu-head .m{color:var(--dim);font-size:14px}
.race{
  display:grid;grid-template-columns:58px 44px 1fr auto;gap:14px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--ligne);text-decoration:none;transition:background .12s;
}
.race:last-child{border-bottom:none}
.race:hover{background:var(--surface-2)}
.race-time{font-family:var(--cond);font-weight:700;font-size:20px}
.race-code{font-family:var(--cond);font-weight:700;font-size:18px;color:var(--dim)}
.race-main{min-width:0}
.race-name,.race-info{display:block}
.race-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race-name .q{display:inline-block;background:var(--rouge);color:#fff;font-size:12px;font-weight:700;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:2px}
.race-info{font-size:14px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race-state{text-align:right;font-size:14px;color:var(--dim);white-space:nowrap}
.race-state .clk{font-family:var(--cond);font-weight:700;font-size:19px;color:var(--rouge)}
.race.past .race-time,.race.past .race-name{color:var(--dim)}
@media (max-width:640px){
  .race{grid-template-columns:48px 1fr auto;gap:10px;padding:12px 14px}
  .race-code{display:none}
  .race-time{font-size:18px}
  .race-state .plates .plate.sm:nth-child(n+4){display:none}
}

/* ================= Page course ================= */
.crumbs{display:flex;align-items:center;gap:8px;padding-top:20px;font-size:14px;color:var(--dim);flex-wrap:wrap}
.crumbs a{text-decoration:none;font-weight:600;color:var(--encre-2)}
.crumbs a:hover{color:var(--rouge)}
.rail{display:flex;gap:6px;overflow-x:auto;padding:14px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail a{
  flex:0 0 auto;text-decoration:none;min-width:58px;text-align:center;padding:6px 10px;border-radius:var(--r-s);
  border:1px solid var(--ligne);background:var(--surface);line-height:1.15;
}
.rail a b{display:block;font-family:var(--cond);font-weight:700;font-size:18px}
.rail a span{font-size:12.5px;color:var(--dim)}
.rail a.past{opacity:.55}
.rail a[aria-current="page"]{border-color:var(--rouge);background:var(--rouge-pale)}
.rail a[aria-current="page"] b{color:var(--rouge)}

.course-top{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:start;margin-top:12px}
.course-top > *{min-width:0}
.course-top h1{overflow-wrap:anywhere;font-family:var(--cond);font-weight:700;font-size:clamp(28px,4.2vw,42px);line-height:1.02}
.course-top h1 .rc{color:var(--rouge);margin-right:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-size:13.5px;padding:3px 9px;border-radius:var(--r-s);background:var(--surface);border:1px solid var(--ligne);color:var(--encre-2)}
.tag.q{background:var(--rouge);border-color:var(--rouge);color:#fff;font-weight:600}
.clock{text-align:right;background:var(--gazon);color:var(--gazon-txt);border-radius:var(--r-m);padding:12px 18px;min-width:170px}
.clock .lbl{font-size:13.5px;color:var(--gazon-dim);font-weight:600}
.clock .digits{font-family:var(--cond);font-weight:700;font-size:44px;line-height:1;color:var(--tote)}
.clock .digits.done{color:var(--gazon-dim);font-size:32px}
.clock .maj{font-size:12px;color:var(--gazon-dim);margin-top:2px}
@media (max-width:640px){
  .course-top{grid-template-columns:1fr}
  .clock{text-align:left;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .clock .digits{font-size:36px}
}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* Synthèse */
.synth{margin-top:22px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
@media (max-width:900px){.synth{grid-template-columns:1fr}}
.synth .card h2{margin-bottom:14px}
.conf{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.conf b{font-weight:700;white-space:nowrap}
.conf .bar{flex:1;min-width:120px;height:8px;border-radius:99px;background:var(--ligne);overflow:hidden}
.conf .bar i{display:block;height:100%;border-radius:99px}
.conf.haute b{color:var(--ok)}.conf.haute .bar i{background:var(--ok)}
.conf.moyenne b{color:var(--warn)}.conf.moyenne .bar i{background:var(--warn)}
.conf.basse b{color:var(--rouge)}.conf.basse .bar i{background:var(--rouge)}
.conf p{flex-basis:100%;font-size:14px;color:var(--dim)}
.picks{display:flex;flex-direction:column;gap:2px}
.pick{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ligne)}
.pick:last-child{border-bottom:none}
.pick .role{grid-column:1 / -1;font-weight:700;font-size:14px;color:var(--rouge)}
.pick.val .role{color:var(--ok)}
.pick .nm{font-weight:700}
.pick .why{grid-column:2;font-size:14px;color:var(--encre-2)}
.jeu{margin-top:16px}
.jeu-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed var(--ligne-forte);flex-wrap:wrap}
.jeu-row .ty{font-weight:700;min-width:118px}
.jeu-row .nt{font-size:14px;color:var(--dim)}
.jeu-row .btn{margin-left:auto}

/* Tableau des partants */
.tbl-wrap{overflow-x:auto;margin:0 calc(-1 * clamp(16px,2.6vw,24px));padding:0 clamp(16px,2.6vw,24px)}
table.runners{width:100%;border-collapse:collapse;font-size:15px;min-width:720px}
.runners th{
  text-align:left;font-weight:600;font-size:13.5px;color:var(--dim);padding:10px 8px;border-bottom:2px solid var(--encre);
  white-space:nowrap;user-select:none;
}
.runners th button{background:none;border:none;font-weight:600;color:inherit;padding:0;display:inline-flex;gap:4px;align-items:center}
.runners th button:hover{color:var(--rouge)}
.runners th[aria-sort] button{color:var(--encre)}
.runners th.r,.runners td.r{text-align:right}
.runners td{padding:9px 8px;border-bottom:1px solid var(--ligne);vertical-align:middle}
.runners tbody tr{cursor:pointer;transition:background .12s}
.runners tbody tr:hover{background:var(--surface-2)}
.runners tr.np{opacity:.4}
.runners tr.np td:nth-child(2) b{text-decoration:line-through}
.runners .nm b{font-weight:700}
.runners .nm small{display:block;color:var(--dim);font-size:13px}
.runners .mus{font-size:14px;color:var(--encre-2);letter-spacing:.02em;white-space:nowrap}
.runners .cote{font-weight:700;font-size:16px}
.bar-p{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.bar-p i{display:block;width:64px;height:6px;border-radius:99px;background:var(--ligne);overflow:hidden}
.bar-p i b{display:block;height:100%;background:var(--rouge);border-radius:99px}
.vflag{display:inline-block;font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-pale);border-radius:4px;padding:1px 6px}
.delta{font-size:11px;margin-left:3px}
.delta.down{color:var(--ok)}.delta.up{color:var(--rouge)}
@keyframes flash{from{background:rgba(255,201,51,.45)}to{background:transparent}}
td.flash{animation:flash 1.8s ease}
@media (max-width:640px){
  table.runners{min-width:0;font-size:14px}
  .runners .c-mus,.runners .c-prob,.runners .c-juste{display:none}
  .runners td,.runners th{padding:9px 5px}
}

/* Arrivée */
.arrivee{background:var(--ok-pale);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);border-radius:var(--r-m);padding:16px 18px;margin-top:22px}
.arrivee.miss{background:var(--rouge-pale);border-color:color-mix(in srgb,var(--rouge) 30%,transparent)}
.arrivee h2{font-family:var(--cond);font-weight:700;font-size:24px}
.arrivee .cols{display:flex;gap:28px;flex-wrap:wrap;margin-top:12px}
.arrivee .cols .lbl{font-size:14px;font-weight:600;color:var(--dim);margin-bottom:6px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dim);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--ligne)}
.legend i.w{outline:2.5px solid var(--tote)}.legend i.h{outline:2.5px solid var(--ok)}

/* ================= Fiche (sheet) ================= */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(5,15,10,.5);display:flex;align-items:center;justify-content:center;padding:18px}
.sheet[hidden]{display:none}
.sheet-panel{
  background:var(--surface);border-radius:var(--r-l);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  padding:24px;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:pop .2s ease;
}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.sheet-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:var(--r-s);border:1px solid var(--ligne);background:var(--surface);display:grid;place-items:center}
.sheet-close:hover{border-color:var(--rouge);color:var(--rouge)}
.sh-head{display:flex;gap:14px;align-items:center;padding-right:42px}
.sh-head h2{font-family:var(--cond);font-weight:700;font-size:28px;line-height:1.05}
.kv{margin-top:16px;border-top:1px solid var(--ligne)}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--ligne);font-size:15px}
.kv dt{color:var(--dim)}
.kv dd{font-weight:600;text-align:right}
.mus-line{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.mt{font-size:13.5px;font-weight:700;padding:3px 7px;border-radius:5px;background:var(--surface-2);color:var(--encre-2);border:1px solid var(--ligne)}
.mt.w{background:var(--ok);border-color:var(--ok);color:#fff}
.mt.p{background:var(--ok-pale);color:var(--ok)}
.mt.f{background:var(--rouge-pale);color:var(--rouge)}
.mt.y{background:transparent;border-style:dashed;color:var(--faint);font-weight:500}
.sig{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.sig li{display:flex;gap:8px}
.sig li::before{content:'+';font-weight:800;color:var(--ok);width:12px}
.sig li.neg::before{content:'−';color:var(--rouge)}
.probabox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.probabox div{background:var(--surface-2);border:1px solid var(--ligne);border-radius:var(--r-s);padding:10px;text-align:center}
.probabox b{display:block;font-family:var(--cond);font-weight:700;font-size:26px;line-height:1.05}
.probabox span{font-size:12.5px;color:var(--dim)}
@media (max-width:640px){
  .sheet{padding:0;align-items:flex-end}
  .sheet-panel{border-radius:var(--r-l) var(--r-l) 0 0;max-height:92vh;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease}
  @keyframes up{from{transform:translateY(40px)}to{transform:none}}
}

/* ================= Stats & bilan ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-m);padding:14px 16px}
.stat b{display:block;font-family:var(--cond);font-weight:700;font-size:34px;line-height:1.05}
.stat span{font-size:14px;color:var(--dim)}
.stat.pos b{color:var(--ok)}.stat.neg b{color:var(--rouge)}
.spark{width:100%;height:80px;display:block;margin-top:10px}
.blist{display:flex;flex-direction:column}
.brow{display:grid;grid-template-columns:150px 1fr 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ligne)}
.brow:last-child{border-bottom:none}
.brow .c{font-family:var(--cond);font-weight:700;font-size:19px;text-decoration:none}
.brow .c small{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--dim)}
.brow .lbl{font-size:12.5px;color:var(--dim);margin-right:4px}
.brow .res{font-size:14px;font-weight:600;text-align:right}
.res.ok{color:var(--ok)}.res.ko{color:var(--rouge)}
@media (max-width:700px){.brow{grid-template-columns:1fr auto;gap:6px 12px}.brow .p2{grid-column:1}}
.progress{height:6px;border-radius:99px;background:var(--ligne);overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--rouge);transition:width .3s}

/* ================= Mes paris ================= */
.bets{display:flex;flex-direction:column}
.bet{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px 14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--ligne)}
.bet:last-child{border-bottom:none}
.bet .st{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.bet .st.gagne{background:var(--ok)}.bet .st.perdu{background:var(--rouge)}.bet .st.rembourse{background:var(--warn)}.bet .st.attente{background:var(--tote)}
.bet .main b{font-weight:700}
.bet .main small{display:block;color:var(--dim);font-size:13.5px}
.bet .money{text-align:right;font-weight:700;white-space:nowrap}
.bet .money small{display:block;font-weight:500;color:var(--dim);font-size:13px}
.bet .tools{display:flex;gap:4px}
@media (max-width:640px){.bet{grid-template-columns:auto 1fr auto}.bet .tools{grid-column:2 / -1;justify-content:flex-end}}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}

/* ================= États ================= */
.empty{text-align:center;padding:48px 18px;color:var(--encre-2)}
.empty h2{font-family:var(--cond);font-weight:700;font-size:26px;margin-bottom:6px}
.empty p{max-width:52ch;margin:0 auto 18px}
.journal{margin:18px auto 0;max-width:560px;text-align:left;font-size:13.5px;color:var(--dim)}
.journal summary{cursor:pointer;font-weight:600}
.journal ul{margin-top:8px;padding-left:18px}
.sk{border-radius:var(--r-s);background:linear-gradient(90deg,var(--ligne) 25%,var(--surface-2) 50%,var(--ligne) 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* ================= Méthode ================= */
.prose{max-width:70ch}
.prose h2{font-family:var(--cond);font-weight:700;font-size:26px;margin:30px 0 8px}
.prose p,.prose li{color:var(--encre-2);margin-bottom:10px}
.prose ul,.prose ol{padding-left:22px}
.prose code{font-size:14px;background:var(--surface);border:1px solid var(--ligne);border-radius:4px;padding:1px 5px}
.formula{background:var(--gazon);color:var(--gazon-txt);border-radius:var(--r-m);padding:16px 18px;margin:14px 0;font-family:var(--cond);font-size:20px;line-height:1.5}
.formula b{color:var(--tote);font-weight:700}

/* ================= Toast & pied ================= */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;background:var(--encre);color:var(--bg);
  padding:12px 18px;border-radius:var(--r-m);font-weight:600;font-size:15px;max-width:min(92vw,520px);text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.3);animation:pop .2s ease;
}
@media (max-width:820px){.toast{bottom:88px}}
.foot{border-top:1px solid var(--ligne);padding:22px var(--gutter) 30px;text-align:center;font-size:13.5px;color:var(--dim)}
.foot p{max-width:80ch;margin:0 auto 4px}

/* =====================================================================
   V2.2 — refonte visuelle : palette, boutons, logo, palettes, bandeau
   ===================================================================== */
:root{
  --bg:#ecf0e8;--surface:#ffffff;--surface-2:#f4f7f1;--ligne:#d9e0d6;--ligne-forte:#bfcabd;
  --gazon:#0a3526;--gazon-2:#114a36;--gazon-3:#1b6249;--rouge:#cf1430;--rouge-2:#a10c22;
  --tote:#ffcd3c;--laiton:#c99a2e;
  --ombre:0 1px 0 rgba(10,53,38,.05),0 2px 6px -2px rgba(10,53,38,.08),0 14px 30px -18px rgba(10,53,38,.28);
  --r-m:12px;--r-l:18px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08130e;--surface:#0f1d17;--surface-2:#14261e;--ligne:#1c3127;--ligne-forte:#2a4437;
    --gazon:#062218;--gazon-2:#0d3626;--gazon-3:#3fa77c;--rouge:#ff4d63;--rouge-2:#d0142c;--laiton:#e0b54a;
    --ombre:0 1px 0 rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#08130e;--surface:#0f1d17;--surface-2:#14261e;--ligne:#1c3127;--ligne-forte:#2a4437;
  --gazon:#062218;--gazon-2:#0d3626;--gazon-3:#3fa77c;--rouge:#ff4d63;--rouge-2:#d0142c;--laiton:#e0b54a;
  --ombre:0 1px 0 rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.8);
}

/* --- Barre du haut : bande photo-finish --- */
.topbar{border-bottom:none;background:linear-gradient(180deg,var(--gazon-2),var(--gazon))}
.topbar::after{content:'';display:block;height:5px;background:repeating-linear-gradient(90deg,#cf1430 0 14px,#fff 14px 28px)}
.nav a{position:relative}
.nav a[aria-current="page"]{background:transparent;color:#fff}
.nav a[aria-current="page"]::after{content:'';position:absolute;left:12px;right:12px;bottom:-11px;height:3px;border-radius:3px 3px 0 0;background:var(--tote)}
.brand-logo{width:34px;height:40px;flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.brand-name b{color:var(--tote);font-weight:700}
.icon-btn{border-radius:10px}

/* --- Boutons : relief de plaque émaillée --- */
.btn{
  border-radius:10px;font-weight:700;letter-spacing:.01em;min-height:44px;padding:0 18px;
  box-shadow:inset 0 -2px 0 var(--ligne),0 1px 2px rgba(10,53,38,.06);
  transition:transform .08s ease,box-shadow .15s,background .15s,border-color .15s,color .15s;
}
.btn:hover{border-color:var(--gazon-3);color:var(--gazon-3)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 var(--ligne)}
.btn.primary{background:linear-gradient(180deg,#e01a37,#cf1430);border-color:#a10c22;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(207,20,48,.7)}
.btn.primary:hover{background:linear-gradient(180deg,#cf1430,#a10c22);color:#fff;border-color:#a10c22}
.btn.primary:active{box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
.btn.ghost{box-shadow:none;border-color:transparent}
.btn.ghost:hover{background:var(--surface);border-color:var(--ligne)}
.btn.sm{min-height:36px;padding:0 13px;font-size:14px;border-radius:8px}
.btn.on{background:var(--gazon);border-color:var(--gazon);color:var(--tote);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.board .btn{border-color:#e3b425;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -10px rgba(255,205,60,.8)}
.board .btn:hover{color:#13201a}
.chip{transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--gazon-3)}
.chip[aria-pressed="true"]{background:var(--gazon);border-color:var(--gazon);color:var(--tote)}
.input{border-radius:10px}
:focus-visible{outline-color:var(--laiton)}

/* --- Cartes et sections --- */
.card,.reunion,.stat,.mini-board{border-radius:var(--r-m);box-shadow:var(--ombre)}
.reu-head{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.race{position:relative}
.race::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background .15s}
.race:hover::before{background:var(--rouge)}
.runners th{border-bottom-color:var(--gazon-3)}
.tabbar{box-shadow:0 -8px 24px -18px rgba(0,0,0,.4)}
.tabbar a{position:relative}
.tabbar a[aria-current="page"]{color:var(--gazon-3)}
.tabbar a[aria-current="page"]::before{content:'';position:absolute;top:-6px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--rouge)}

/* --- Tableau d'accueil : bandes de tonte --- */
.board{
  background-color:var(--gazon);
  background-image:
    radial-gradient(120% 90% at 85% 0%,rgba(255,205,60,.10),transparent 55%),
    repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 70px,transparent 70px 140px);
  box-shadow:0 24px 50px -30px rgba(6,34,24,.8),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
}
.clock{background-color:var(--gazon);background-image:repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 40px,transparent 40px 80px);border-radius:var(--r-m);box-shadow:var(--ombre)}

/* --- Chiffres à palettes (split-flap) --- */
.flaps{display:inline-flex;gap:.06em;align-items:stretch;perspective:400px}
.flap{
  position:relative;display:inline-grid;place-items:center;min-width:.62em;padding:0 .04em;
  background:linear-gradient(180deg,#14251d 0 49%,#0c1a14 51% 100%);color:var(--tote);
  border-radius:.08em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 .04em .08em rgba(0,0,0,.5);
  line-height:1.12;
}
.flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.65);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.flap.sep{background:none;box-shadow:none;min-width:.3em}
.flap.sep::after{display:none}
.flap.flip{animation:flip .38s cubic-bezier(.3,.6,.4,1)}
@keyframes flip{0%{transform:rotateX(0)}45%{transform:rotateX(-88deg);filter:brightness(.6)}55%{transform:rotateX(88deg);filter:brightness(.6)}100%{transform:rotateX(0)}}
.digits.done .flap{color:#f4e3b0}
.clock .digits.done{font-size:30px}
.board-clock .digits{text-shadow:none}

/* --- Bandeau des arrivées --- */
.ticker{
  display:flex;align-items:center;margin-top:16px;background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-m);box-shadow:var(--ombre);overflow:hidden;min-height:44px;
}
.ticker-lbl{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;gap:8px;padding:0 14px;background:#cf1430;color:#fff;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.02em}
.ticker-lbl i{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.ticker-view{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker-track{display:inline-flex;gap:28px;padding:0 24px;white-space:nowrap;animation:tick var(--dur,40s) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14.5px;flex:0 0 auto}
.ticker-item .plates{flex-wrap:nowrap;gap:4px}
.ticker-item b{font-family:var(--cond);font-weight:700;font-size:17px;color:var(--rouge)}
.ticker-item span{color:var(--dim)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Base sur chaque ligne du programme --- */
.race{grid-template-columns:58px 44px 1fr auto auto}
.race-pick{display:flex;align-items:center;gap:6px;justify-content:flex-end;min-width:52px}
.race-pick .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.race-pick .dot.haute{background:var(--ok);box-shadow:0 0 0 3px var(--ok-pale)}
.race-pick .dot.moyenne{background:var(--warn)}
.race-pick .dot.basse{background:var(--faint)}
.race-pick .sk{width:42px;height:22px}
.race-pick .plate.won{outline:3px solid var(--tote);outline-offset:1px}
@media (max-width:640px){.race{grid-template-columns:44px 1fr auto auto}.race-pick{min-width:40px}}

/* --- Fiche cheval : graphique de la musique + jauges --- */
.mchart{display:flex;align-items:flex-end;gap:5px;height:96px;margin-top:10px;padding:0 2px;border-bottom:1px solid var(--ligne-forte)}
.mbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.mbar i{display:block;width:100%;max-width:30px;border-radius:5px 5px 0 0;background:var(--ligne-forte)}
.mbar.w i{background:var(--tote);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.mbar.p i{background:var(--gazon-3)}
.mbar.f i{background:var(--rouge)}
.mlbl{display:flex;gap:5px;padding:4px 2px 0}
.mlbl span{flex:1;text-align:center;font-family:var(--cond);font-weight:700;font-size:14px;color:var(--encre-2);min-width:0}
.mlbl span.f{color:var(--rouge)}
.mnote{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);margin-top:2px}
.gauges{display:grid;gap:10px;margin-top:16px}
.gauge{display:grid;grid-template-columns:118px 1fr 58px;gap:10px;align-items:center;font-size:14px}
.gauge .t{height:12px;border-radius:99px;background:var(--surface-2);border:1px solid var(--ligne);overflow:hidden}
.gauge .t i{display:block;height:100%;border-radius:99px}
.gauge.m .t i{background:linear-gradient(90deg,var(--gazon-3),var(--gazon))}
.gauge.k .t i{background:linear-gradient(90deg,var(--laiton),#a87c1c)}
.gauge b{font-family:var(--cond);font-weight:700;font-size:19px;text-align:right}
.gauge-verdict{font-size:14px;color:var(--encre-2);margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none!important}
  .ticker-view{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}