/* MINUIT — Le Derby de Minuit */
.g-derby { --db-accent: #e8572e; --db-sand: #8a6440; }
.g-derby .db {
  height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 8px 14px 12px;
  box-sizing: border-box; min-height: 0;
}
.g-derby .db-missing { padding: 40px; color: var(--text-dim); }
/* réglette des potes flottante (barre pleine) : elle se pose en haut à droite, sur les jetons de l'en-tête ; l'en-tête descend sous elle
   (la piste perd cette hauteur : elle se redessine à la taille de sa scène) */
body:has(.so-dock.is-float) .g-derby .db { padding-top: var(--so-float-h, 58px); }

/* ---------- en-tête ---------- */
.g-derby .db-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.g-derby .db-title { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.g-derby .db-title b {
  font-family: var(--font-display); font-weight: 400; font-size: 25px; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.g-derby .db-raceno { font-size: 12px; color: var(--text-dim); letter-spacing: .12em; text-transform: uppercase; }
.g-derby .db-phase {
  font-family: var(--font-ui); font-size: 14px; color: var(--text); padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(222,184,92,.12), rgba(222,184,92,.02));
}
.g-derby .db[data-phase="course"] .db-phase { border-color: rgba(232,87,46,.7); color: #ffd9c9; background: rgba(232,87,46,.14); }
.g-derby .db[data-phase="stalles"] .db-phase { border-color: var(--gold); color: var(--gold-hi); }
.g-derby .db-ring { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.g-derby .db-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.g-derby .db-ring-bg { fill: rgba(5,6,11,.6); stroke: rgba(222,184,92,.18); stroke-width: 3; }
.g-derby .db-ring-arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transition: stroke .3s; }
.g-derby .db-ring.is-hot .db-ring-arc { stroke: var(--lose); }
.g-derby .db-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--gold-hi); }
.g-derby .db-ring.is-hot b { color: #ffb3b9; }
.g-derby .db-ready { min-width: 112px; }
.g-derby .db-ready.is-on { box-shadow: 0 0 0 2px var(--win), 0 0 18px rgba(62,224,143,.35); }
.g-derby .db-grow { flex: 1 1 auto; }
.g-derby .db-who { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.g-derby .db-who-av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.2), transparent 60%), var(--pc, var(--gold)); box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
.g-derby .db-who-t { display: flex; flex-direction: column; line-height: 1.1; }
.g-derby .db-who-t small { font-size: 11px; color: var(--text-dim); }
.g-derby .db-who-t b { font-size: 16px; color: var(--gold-hi); }
.g-derby .db-head .chip-rack { --chip-size: 34px; gap: 4px; }
.g-derby .db-voice { min-width: 40px; font-size: 17px; }
.g-derby .db-voice.is-off { opacity: .55; }

/* ---------- la piste ---------- */
.g-derby .db-stage {
  position: relative; min-height: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(0,0,0,.6); background: #0b1030;
}
.g-derby .db-canvas { position: absolute; inset: 0; display: block; }
.g-derby .db-call {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-size: clamp(26px, 4.6vw, 64px); color: var(--gold-hi); white-space: nowrap;
  text-shadow: 0 4px 0 rgba(0,0,0,.55), 0 0 40px rgba(247,221,143,.45); letter-spacing: .02em; transition: opacity .35s;
}
.g-derby .db-call.is-on { opacity: 1; }
.g-derby .db-call.is-finish { color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 50px rgba(232,87,46,.8); }
.g-derby .db-com {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); max-width: min(92%, 980px); pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 12px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, rgba(5,6,11,.92), rgba(17,21,42,.9)); border: 1px solid var(--line-strong); border-left: 4px solid var(--db-accent);
  border-radius: 12px; box-shadow: var(--shadow-1);
}
.g-derby .db-com.is-on { opacity: 1; }
.g-derby .db-com-mic { font-size: 18px; filter: saturate(.7); }
.g-derby .db-com-t { font-family: var(--font-ui); font-weight: 600; font-size: clamp(15px, 1.55vw, 24px); color: var(--text); line-height: 1.2; }
.g-derby .db-com.is-gagne, .g-derby .db-com.is-photo, .g-derby .db-com.is-verdict { border-left-color: var(--gold); }
.g-derby .db-com.is-gagne .db-com-t, .g-derby .db-com.is-verdict .db-com-t { color: var(--gold-hi); }
.g-derby .db-com.is-ext .db-com-t, .g-derby .db-com.is-corde .db-com-t, .g-derby .db-com.is-coude .db-com-t { color: #ffd9c9; }
.g-derby .db-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; opacity: 0; }
.g-derby .db-podium {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 26px 18px; min-width: min(560px, 92%);
  /* fond opaque : le poteau à damier de l'arrivée ne doit pas se voir à travers la carte du 3e */
  background: radial-gradient(120% 90% at 50% 0%, rgba(222,184,92,.18), transparent 60%), #07080f;
  border: 1px solid var(--gold); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 4px rgba(222,184,92,.08);
}
.g-derby .db-podium.is-on { opacity: 1; }
.g-derby .db-pod-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.g-derby .db-pod-tq {
  font-family: var(--font-display); font-size: 22px; color: #0a0d18; padding: 6px 22px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); box-shadow: 0 0 30px rgba(247,221,143,.55);
}
.g-derby .db-pod-row { display: flex; align-items: flex-end; gap: 14px; }
.g-derby .db-pod {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 14px; border-radius: 12px; min-width: 132px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); border: 1px solid rgba(222,184,92,.25);
}
.g-derby .db-pod-1 { padding-bottom: 20px; border-color: var(--gold); background: linear-gradient(180deg, rgba(222,184,92,.22), rgba(222,184,92,.04)); }
.g-derby .db-pod b { font-family: var(--font-num); font-size: 13px; color: var(--text-dim); }
.g-derby .db-pod-1 b { color: var(--gold-hi); font-size: 15px; }
.g-derby .db-pod-n { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; }
.g-derby .db-pod-1 .db-pod-n { font-family: var(--font-display); font-size: 22px; color: var(--gold-hi); }
.g-derby .db-pod em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.g-derby .db-winners { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g-derby .db-w {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(62,224,143,.1); border: 1px solid rgba(62,224,143,.45);
}
.g-derby .db-w i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--pc); }
.g-derby .db-w b { font-size: 14px; }
.g-derby .db-w em { font-style: normal; font-family: var(--font-num); color: var(--win); font-weight: 600; }
.g-derby .db-w.is-me { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(247,221,143,.35); }
.g-derby .db-w.is-back { background: rgba(169,162,142,.1); border-color: rgba(169,162,142,.4); }
.g-derby .db-w.is-back em { color: var(--text-dim); font-weight: 500; }
.g-derby .db-w-none { color: var(--text-dim); font-style: italic; }

/* ---------- le pont du bas : tableau des cotes, tiercé, tickets, la table ---------- */
.g-derby .db-deck {
  display: grid; gap: 10px; min-height: 0; height: 300px;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .92fr);
  grid-template-rows: auto minmax(0, 1fr);
  transition: height .55s cubic-bezier(.2,.8,.2,1);
}
/* le pont se redéploie (course suivante) : ses cotes montent avec lui, il ne prend aucun appui avant d'être posé (derby.js) ;
   les cases à jouer restent éteintes pendant la montée et s'allument une fois le pont posé */
.g-derby .db-deck.is-deploie { pointer-events: none; }
.g-derby .db-deck.is-deploie .db-odd, .g-derby .db-deck.is-deploie .db-tq-pick { opacity: .38; }
.g-derby .db-board { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.g-derby .db-tierce { grid-column: 2; grid-row: 1; }
.g-derby .db-tickets { grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column; }
.g-derby .db-side { grid-column: 3; grid-row: 1 / span 2; min-height: 0; display: flex; flex-direction: column; }
.g-derby .db-deck .panel { padding: 8px 12px; border-radius: var(--radius-sm); }
.g-derby .db-ptitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.g-derby .db-ptitle small { font-family: var(--font-num); font-size: 11px; color: var(--text-faint); letter-spacing: 0; text-transform: none; }

.g-derby .db-bhead, .g-derby .db-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px 96px 88px minmax(70px, .7fr); align-items: center; gap: 8px;
}
.g-derby .db-bhead { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 0 10px 2px; }
.g-derby .db-row {
  flex: 1 1 0; min-height: 34px; max-height: 50px; padding: 0 10px; border-radius: 10px; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 16%, transparent), rgba(17,21,42,.72) 42%);
  border: 1px solid rgba(222,184,92,.14); transition: background .3s, border-color .3s, opacity .3s;
}
.g-derby .db-row::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--c1); }
.g-derby .db-row:hover { border-color: rgba(222,184,92,.35); }
.g-derby .db-row.is-first { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(222,184,92,.25); }
.g-derby .db-row.is-placed { border-color: rgba(62,224,143,.55); }
.g-derby .db-row.is-out { opacity: .55; }
.g-derby .db-id { display: flex; align-items: center; gap: 4px; }
.g-derby .db-num {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  border: 2px solid; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.g-derby .db-silk { display: inline-flex; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.g-derby .db-hname { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.g-derby .db-hname b { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-derby .db-hname small { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.g-derby .db-hname.is-pote small { font-style: normal; color: #e9d9a8; }
.g-derby .db-hname.is-pote small.is-contre { color: #ff9ad5; }
.g-derby .db-fd.is-malice { color: #ff9ad5; }
.g-derby .db-form { display: flex; align-items: center; gap: 6px; }
.g-derby .db-form i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); max-width: 54px; flex: 0 0 auto; }
.g-derby .db-form em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
.g-derby .db-odd {
  height: 32px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
  font: inherit; color: var(--text); background: linear-gradient(180deg, #1c2246, #11152a); border: 1px solid rgba(222,184,92,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .12s, border-color .15s, background .15s, opacity .2s;
}
.g-derby .db-odd b { font-size: 15px; color: var(--gold-hi); }
.g-derby .db-odd small { font-size: 11px; color: #0a0d18; background: var(--gold); border-radius: 6px; padding: 1px 5px; font-weight: 700; }
.g-derby .db-odd small:empty { display: none; }
.g-derby .db-odd.is-place b { color: #c9f3dd; }
.g-derby .db-odd:hover:not([disabled]) { border-color: var(--gold); transform: translateY(-1px); background: linear-gradient(180deg, #262d5c, #151a36); }
.g-derby .db-odd:active:not([disabled]) { transform: translateY(1px); }
.g-derby .db-odd.is-mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(222,184,92,.25); }
.g-derby .db-odd[disabled] { cursor: default; opacity: .72; }
.g-derby .db-pals { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.g-derby .db-pal {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 1px; border-radius: 999px; font-size: 11px;
  background: rgba(5,6,11,.55); border: 1px solid color-mix(in srgb, var(--pc) 70%, transparent);
}
.g-derby .db-pal i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--pc); }
.g-derby .db-pal b { font-weight: 600; color: var(--text); }
.g-derby .db-pal.is-me { box-shadow: 0 0 0 1px var(--gold); }
.g-derby .db-pal.is-more { padding: 1px 6px; color: var(--text-dim); }

/* tiercé */
.g-derby .db-tq-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-derby .db-tq-slot {
  height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font: inherit;
  color: var(--text-dim); background: rgba(5,6,11,.45); border: 1px dashed rgba(222,184,92,.35);
}
.g-derby .db-tq-slot small { font-size: 11px; }
.g-derby .db-tq-slot.is-on { border-style: solid; border-color: var(--c1); background: color-mix(in srgb, var(--c1) 16%, rgba(5,6,11,.6)); color: var(--text); }
.g-derby .db-tq-slot b { font-size: 16px; color: var(--gold-hi); }
.g-derby .db-tq-q { font-family: var(--font-display); color: var(--text-faint); font-size: 18px; }
.g-derby .db-tq-h { display: inline-flex; }
.g-derby .db-tq-picks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 7px 0; }
.g-derby .db-tq-pick {
  height: 28px; border-radius: 7px; cursor: pointer; font-family: var(--font-num); font-weight: 700; font-size: 14px;
  background: var(--c1); border: 2px solid var(--c2); box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .12s, opacity .2s;
}
.g-derby .db-tq-pick:hover { transform: translateY(-1px); }
.g-derby .db-tq-pick.is-on { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.g-derby .db-tq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-derby .db-tq-cote { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.g-derby .db-tq-cote b { font-size: 18px; color: var(--gold-hi); }
.g-derby .db-tq-cote small { font-size: 11px; color: var(--text-dim); font-family: var(--font-num); }
.g-derby .db-tq-cote em { font-size: 12px; color: var(--text-dim); }

/* tickets */
.g-derby .db-tk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.g-derby .db-tk {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto 20px; gap: 7px; align-items: center; font-size: 12.5px;
  padding: 3px 6px; border-radius: 7px; background: rgba(5,6,11,.4);
}
.g-derby .db-tk-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-derby .db-tk-a { color: var(--text); }
.g-derby .db-tk-c { color: var(--gold); }
.g-derby .db-tk-r { color: var(--text-dim); }
.g-derby .db-tk.is-won { background: rgba(62,224,143,.14); }
.g-derby .db-tk.is-won .db-tk-r { color: var(--win); font-weight: 700; }
.g-derby .db-tk.is-lost { opacity: .5; }
.g-derby .db-tk-x { width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,90,103,.18); color: #ffb3b9; font-size: 13px; line-height: 1; padding: 0; }
.g-derby .db-tk-x:hover { background: rgba(255,90,103,.4); }
.g-derby .db-tk-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.g-derby .db-tk-foot b { color: var(--gold-hi); font-size: 13px; }
.g-derby .db-tk-foot .btn { margin-left: auto; }
.g-derby .db-empty { font-size: 12px; color: var(--text-faint); font-style: italic; padding: 4px 2px; }

/* la table : potes et fil */
.g-derby .db-pl { display: flex; flex-direction: column; gap: 3px; }
.g-derby .db-pl-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; font-size: 13px; padding: 2px 4px; border-radius: 8px; }
.g-derby .db-pl-row.is-me { background: rgba(222,184,92,.08); }
.g-derby .db-pl-row.is-pick { cursor: pointer; }
.g-derby .db-pl-row.is-pick:hover { background: rgba(222,184,92,.12); }
.g-derby .db-pl-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--pc); font-size: 13px; }
.g-derby .db-pl-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-derby .db-pl-st { color: var(--gold); font-size: 12px; }
.g-derby .db-pl-rd { font-size: 10.5px; color: var(--win); text-transform: uppercase; letter-spacing: .06em; }
.g-derby .db-pl-net { font-size: 11.5px; }
.g-derby .db-feed { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); padding-top: 5px; }
.g-derby .db-fd { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-derby .db-fd.is-com { color: #ffd9c9; }
.g-derby .db-fd.is-win { color: var(--win); }

/* ---------- pendant la course : la piste prend la place, le tableau se resserre ---------- */
.g-derby .db.is-race .db-deck { height: 116px; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: minmax(0, 1fr); }
.g-derby .db.is-race .db-tierce { display: none; }
.g-derby .db.is-race .db-board { grid-row: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.g-derby .db.is-race .db-bhead { display: none; }
.g-derby .db.is-race .db-row {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 2px; max-height: none; padding: 6px 7px 5px 9px;
}
.g-derby .db.is-race .db-row .db-form, .g-derby .db.is-race .db-row .db-odd.is-place, .g-derby .db.is-race .db-hname small { display: none; }
.g-derby .db.is-race .db-row .db-odd { height: 22px; justify-content: flex-start; background: none; border: 0; box-shadow: none; padding: 0; }
.g-derby .db.is-race .db-row .db-odd b { font-size: 13px; }
.g-derby .db.is-race .db-id { position: absolute; right: 6px; top: 5px; }
.g-derby .db.is-race .db-id .db-silk { display: none; }
.g-derby .db.is-race .db-hname b { font-size: 13px; padding-right: 24px; }
/* 1366 : le nom du cheval passe sur deux lignes plutôt que « Tonnerre … » */
.g-derby .db.is-race .db-hname b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; overflow-wrap: anywhere; }
.g-derby .db.is-race .db-tickets { grid-column: 2; grid-row: 1; }
.g-derby .db.is-race .db-side { grid-column: 3; grid-row: 1; }
.g-derby .db.is-race .db-side .db-pl { display: none; }
/* le fil garde la DERNIÈRE ligne entière (le trop-plein part par le haut) */
.g-derby .db.is-race .db-side .db-feed { margin-top: 0; border-top: 0; padding-top: 0; justify-content: flex-end; }
.g-derby .db.is-race .db-tk-foot .btn { display: none; }

/* ---------- écrans plus petits ---------- */
@media (max-height: 800px) {
  .g-derby .db { gap: 6px; padding-top: 6px; }
  .g-derby .db-deck { height: 272px; }
  .g-derby .db.is-race .db-deck { height: 104px; }
  .g-derby .db-title b { font-size: 22px; }
  .g-derby .db-head .chip-rack { --chip-size: 30px; }
  .g-derby .db-hname small { display: none; }
  .g-derby .db-row { min-height: 30px; }
  .g-derby .db-odd { height: 28px; }
}
@media (min-height: 1000px) {
  .g-derby .db-deck { height: 340px; }
  .g-derby .db.is-race .db-deck { height: 132px; }
}
@media (max-width: 1250px) {
  .g-derby .db-bhead, .g-derby .db-row { grid-template-columns: 58px minmax(0, 1fr) 84px 84px 74px; }
  .g-derby .db-bhead span:nth-child(2), .g-derby .db-form { display: none; }
  .g-derby .db-deck { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr); }
  .g-derby .db-phase { display: none; }
}
@media (max-width: 1100px) {
  .g-derby .db-who { display: none; }
}

/* ---------- TÉLÉPHONE (N1b, 13/10 ; revue au téléphone, défaut n° 9) ----------
   Le pont du bas (tableau, tiercé, tickets, la table) gardait ses trois colonnes : la rangée d'un cheval débordait de sa colonne et les
   six cotes « placé » passaient sous le tiercé et les tickets, les choix 4 à 6 du tiercé sous « La table » : on ne pariait que
   « gagnant ». Couché, la piste s'écrasait à 0 px et le tableau sortait par le bas.
   La rangée d'un cheval tient en quatre colonnes (numéro et casaque, nom, gagnant, placé ; les potes sous le nom) et ses en-têtes
   suivent leurs colonnes. En PORTRAIT : une colonne qui défile — l'en-tête sur deux rangées (titre, chrono, « Prêt » ; jetons et
   voix), la piste, puis le tableau, le tiercé, les tickets et la table, l'un sous l'autre ; pendant la course, les six chevaux sur deux
   rangées. En PAYSAGE : la page défile, la piste garde sa hauteur au-dessus du pont.
   Règles bornées au téléphone (portrait ≤ 480 px de large, paysage ≤ 560 px de haut) : le PC ne change pas (s5-tel-jeux.mjs, D). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-derby .db { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .g-derby .db-stage { flex: none; }
  .g-derby .db-deck { flex: none; height: auto; }
  .g-derby .db-bhead, .g-derby .db-row { grid-template-columns: 52px minmax(0, 1fr) 72px 72px; column-gap: 6px; }
  .g-derby .db-bhead span:nth-child(1) { grid-column: 1 / span 2; }
  .g-derby .db-bhead span:nth-child(3) { grid-column: 3; }
  .g-derby .db-bhead span:nth-child(4) { grid-column: 4; }
  .g-derby .db-bhead span:nth-child(2), .g-derby .db-bhead span:nth-child(5), .g-derby .db-form { display: none; }
  .g-derby .db-row { flex: none; grid-template-rows: auto auto; row-gap: 0; min-height: 44px; max-height: none; padding: 4px 8px; }
  /* hors course seulement : pendant la course, la rangée devient une carte d'une colonne (règles .db.is-race plus haut) */
  .g-derby .db:not(.is-race) .db-row > .db-id { grid-column: 1; grid-row: 1 / span 2; }
  .g-derby .db:not(.is-race) .db-row > .db-hname { grid-column: 2; grid-row: 1; }
  .g-derby .db:not(.is-race) .db-row > .db-odd { grid-column: 3; grid-row: 1 / span 2; height: 38px; }
  .g-derby .db:not(.is-race) .db-row > .db-odd.is-place { grid-column: 4; }
  /* la ligne des potes, sous le nom, a sa hauteur même vide : un pari confirmé ne fait plus grandir la rangée (tout ce qui suit
     descendait de 20 px sous le doigt, au milieu d'un tiercé) */
  .g-derby .db:not(.is-race) .db-row > .db-pals { grid-column: 2; grid-row: 2; min-height: 20px; margin-top: 2px; }
  .g-derby .db-tq-pick { height: 38px; }
  .g-derby .db-tk { grid-template-columns: minmax(0, 1fr) auto auto auto 30px; }
  .g-derby .db-tk-x { width: 30px; height: 30px; }
}
@media (orientation: portrait) and (max-width: 480px) {
  .g-derby .db { gap: 10px; padding: 8px 10px 18px; }
  /* la réglette flottante garde sa voie AU-DESSUS du défileur (avec un rembourrage, ce qui défile passait dessous) */
  body:has(.so-dock.is-float) .g-derby .db { padding-top: 8px; margin-top: var(--so-float-h, 58px); height: calc(100% - var(--so-float-h, 58px)); }
  .g-derby .db-head { flex-wrap: wrap; gap: 8px 10px; }
  .g-derby .db-title b { font-size: 17px; }
  .g-derby .db-ready { min-width: 96px; }
  .g-derby .db-grow { flex: 1 0 100%; height: 0; }
  .g-derby .db-stage { height: clamp(180px, 30vh, 260px); }
  .g-derby .db-deck { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .g-derby .db-board, .g-derby .db-tierce, .g-derby .db-tickets, .g-derby .db-side { grid-column: 1; grid-row: auto; }
  .g-derby .db-tq-slot { height: 44px; }
  .g-derby .db-tk-list { max-height: 210px; }
  /* pendant la course : les six chevaux sur deux rangées de trois, les tickets et le fil dessous */
  .g-derby .db.is-race .db-deck { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .g-derby .db.is-race .db-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-derby .db.is-race .db-tickets, .g-derby .db.is-race .db-side { grid-column: 1; grid-row: auto; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .g-derby .db { gap: 8px; padding: 6px 12px 12px; }
  body:has(.so-dock.is-float) .g-derby .db { padding-top: 6px; margin-top: var(--so-float-h, 58px); height: calc(100% - var(--so-float-h, 58px)); }
  .g-derby .db-stage { height: clamp(150px, 52vh, 230px); }
  .g-derby .db-row { min-height: 40px; }
}
/* TÉLÉPHONE — N5 (annexe B remesurée sur d1cc705 ; règle de l'orchestrateur : les actions principales ont 44 px au moins) : « Prêt »
   (40 px) et « Jouer » du tiercé (30 px) : 44 px ; couchées, les six cases du tiercé (30,7 px de large, 5 px d'écart) : 33,7 px de zone
   de toucher par un cadre transparent d'1,5 px hors de leur bord de 2 px (moins que la moitié de l'écart : aucune ne couvre sa voisine
   ; un pseudo-élément se place depuis le bord intérieur, d'où les 3,5 px). Les cotes, à 22 px
   pendant la course, y sont éteintes (games/derby.js:538-539) : ce ne sont pas des cibles ; en phase de paris elles font 38 px (N1b).
   Bornée au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-derby .db-ready { min-height: 44px; }
  .g-derby .db-tq-foot .btn-gold { min-height: 44px; }
  .g-derby .db-tq-pick { position: relative; }
  .g-derby .db-tq-pick::after { content: ""; position: absolute; inset: 0 -3.5px; border-radius: inherit; }
}
/* TÉLÉPHONE — N11 (annexe A de la revue au téléphone, REMESURÉE sur 1bedc6a) : l'en-tête « Partants / Gagnant / Placé » (10,5 px), « max 250 », « 1er », le sponsor du cheval, la mise sur une cote et les potes (11 px), le fil (11,5 px) : 12 px. Mêmes polices, même interlettrage,
   même couleur ; on agrandit le texte, on ne redessine pas. Bornée au téléphone : le PC ne change pas (dev/tests-client/s5-tel-textes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-derby .db-bhead, .g-derby .db-ptitle small, .g-derby .db-tq-slot small, .g-derby .db-hname small, .g-derby .db-odd small, .g-derby .db-pal, .g-derby .db-fd { font-size: 12px; }
}
/* TÉLÉPHONE EN PORTRAIT — N14 (dev/audit/nuit/N14-JOURNAL.md) : en ligne à 390 × 844, la cote « gagnant » du cheval 6 n'était pas
   recouverte : elle était SOUS le bas de l'écran au repos (rectangle [221, 859, 72, 38] pour 844 px de haut ; dclic-pont.mjs --seul
   enligne, « g:6 pas libre »). La réglette des potes, qui ne flotte qu'en ligne, réserve sa voie au-dessus de la colonne du Derby
   (58 px, règle de N1b plus haut) : tout le pont descendait d'autant, alors que seul (sans réglette) la rangée 6 tient dans l'écran (bas
   à 839 px). La piste rend cette voie : sa hauteur moins celle de la réglette, jamais sous les 180 px de N1b ; la colonne retrouve, en
   ligne, la place qu'elle a seule. Rien d'autre ne bouge ; bornée au téléphone debout : le PC ne lit rien de ceci. */
@media (orientation: portrait) and (max-width: 480px) {
  body:has(.so-dock.is-float) .g-derby .db-stage { height: clamp(180px, calc(30vh - var(--so-float-h, 58px)), 260px); }
}
/* TÉLÉPHONE — N21 (revue finale R2 du 17/10, défaut n° 6) : à l'arrivée, le podium du PC (cartes de 132 px au moins sur une rangée,
   min-width: min(560px, 92%), 272 px de haut) débordait de la piste, qui le rogne : à 390 × 844 les cartes du 2e et du 3e sortaient des
   deux côtés (parts visibles 0,35 et 0,37), à 360 × 740 aussi (0,12 et 0,14), et aux trois tailles le kicker « Arrivée · Tiercé … » et la
   ligne des gagnants, au-dessus et au-dessous de la piste (180 px de haut à 360 en ligne, 195 à 390, 203 couché), ne se voyaient pas.
   Au téléphone, le même podium compact : la largeur de la piste moins 12 px, les trois cartes se partagent la rangée (le 1er un peu
   plus large et plus haut : la marche est gardée), les noms passent à la ligne au lieu de déborder, les casaques rapetissent ; aucun
   texte sous 12 px. Centré en hauteur, si un contenu rare le fait déborder (un nom de trois lignes, plusieurs gagnants), ce sont le
   kicker et la ligne des gagnants qui se rognent d'abord, jamais les cartes ; le ruban d'un tiercé gagné tient lieu de kicker.
   Mêmes couleurs, mêmes polices. Bornée au téléphone : le PC ne lit rien de ceci (dev/tests-client/s5-tel-recouvrements.mjs, PC). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-derby .db-podium { box-sizing: border-box; min-width: 0; width: calc(100% - 12px); max-width: 560px; gap: 4px; padding: 5px 7px 6px; border-radius: 14px; }
  .g-derby .db-pod-k { font-size: 12px; letter-spacing: .1em; line-height: 1.3; text-align: center; }
  .g-derby .db-pod-tq { font-size: 15px; padding: 4px 14px; white-space: normal; text-align: center; }
  .g-derby .db-podium:has(.db-pod-tq) .db-pod-k { display: none; }
  .g-derby .db-pod-row { width: 100%; gap: 6px; }
  .g-derby .db-pod { flex: 1 1 0; min-width: 0; gap: 1px; padding: 3px 5px 5px; border-radius: 10px; }
  .g-derby .db-pod-1 { flex-grow: 1.3; padding-bottom: 7px; }
  .g-derby .db-pod-silk { display: flex; }   /* la casaque sans l'interligne d'un SVG posé sur la ligne de base */
  .g-derby .db-pod-silk svg { width: 24px; height: 24px; }
  .g-derby .db-pod-1 .db-pod-silk svg { width: 30px; height: 30px; }
  .g-derby .db-pod b { font-size: 12px; white-space: nowrap; }
  .g-derby .db-pod-1 b { font-size: 13px; }
  .g-derby .db-pod-n { font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; overflow-wrap: anywhere; }
  .g-derby .db-pod-1 .db-pod-n { font-size: 15px; line-height: 1.05; }
  .g-derby .db-pod em { white-space: nowrap; }
  .g-derby .db-winners { gap: 4px 6px; }
  .g-derby .db-w { gap: 5px; padding: 2px 9px 2px 3px; }
  .g-derby .db-w i { width: 20px; height: 20px; font-size: 12px; }
  .g-derby .db-w b, .g-derby .db-w em { font-size: 13px; }
}
/* TÉLÉPHONE — N21 (revue finale R2 du 17/10, défaut n° 22) : au téléphone, la rangée d'un cheval (N1b : 52px minmax(0, 1fr) 72px 72px)
   laisse au nom 108 px à 360 × 740, 138 à 390 × 844, 144 couché ; le nom (14,5 px) et la ligne dessous (12 px depuis N11) gardaient la
   règle du PC (une ligne, « … ») : « Pégase du Dimanche » (137 px) coupé à 360, les devises (146 à 205 px) à 390, le nom d'un pote de
   18 caractères partout ; les lignes du fil de la table aussi (« 🎙 … franchit le poteau en vainqueur, d… »). Au téléphone, le nom, la
   ligne d'un cheval de pote (« le cheval de … · 😈 N contre lui ») et les lignes du fil passent à la ligne au lieu d'être coupés. La
   devise d'un cheval de l'écurie, un décor, est déjà cachée sous 800 px de haut (360 × 740, et le PC 1366 × 768) ; au téléphone debout
   elle l'est aussi : elle ne tient pas dans la colonne du nom, et sur deux lignes elle repousserait la cote du 6 hors de l'écran au
   repos (garde de N14, dclic-pont). Mêmes polices, mêmes couleurs. Bornée au téléphone : le PC ne lit rien de ceci. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-derby .db:not(.is-race) .db-hname b, .g-derby .db-hname.is-pote small { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .g-derby .db-fd { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}
@media (orientation: portrait) and (max-width: 480px) {
  .g-derby .db-hname:not(.is-pote) small { display: none; }
}
/* TÉLÉPHONE — N27 (vérification finale de l'orchestrateur sur 2f56a82, s5-tel-textes B : « Gagnant # · Pégase du Dimanche » coupé à
   360 × 740 et 390 × 844) : le libellé d'un ticket gardait la règle du PC, une ligne coupée par « … » ; au téléphone il n'a que 142 px
   (360 × 740) à 172 px (390 × 844) dans sa rangée, et il nomme le cheval tiré : « Dernière Tournée » tenait (la référence de N11),
   « Pégase du Dimanche » (18 lettres) ne tient pas. Il passe à la ligne. Couché, la colonne des tickets (un tiers du pont) ne lui laissait
   que 37 à 64 px à côté des montants : il prend toute la rangée, la mise, la cote et le retour passent dessous, le « × » reste à droite.
   Mêmes polices, mêmes couleurs. Bornée au téléphone : le PC ne lit rien de ceci (dev/tests-client/s5-r2-finitions.mjs, D). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-derby .db-tk-lab { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .g-derby .db-tk { grid-template-rows: auto auto; row-gap: 0; }
  .g-derby .db-tk-lab { grid-column: 1 / 5; grid-row: 1; }
  .g-derby .db-tk-a, .g-derby .db-tk-c, .g-derby .db-tk-r { grid-row: 2; }
  .g-derby .db-tk-a { grid-column: 2; }
  .g-derby .db-tk-c { grid-column: 3; }
  .g-derby .db-tk-r { grid-column: 4; }
  .g-derby .db-tk-x { grid-column: 5; grid-row: 1 / span 2; }
}
/* PC — N27 (revue finale R2, n° 22 en partie : le PC change pour ces lignes seulement) : à 1366 × 768, pendant la course, le fil de « La
   table » mettait ses cinq lignes dans 64 px : coupées par « … » à la largeur du panneau, elles étaient aussi écrasées de 5 px chacune
   (une boîte qui rogne se laisse rétrécir dans une colonne flexible). Une ligne du fil passe désormais à la ligne et garde sa hauteur ;
   celles qui ne tiennent pas EN ENTIER dans la hauteur du fil se retirent, les plus anciennes d'abord, la plus récente toujours gardée
   (games/derby.js, ajusterFil). Au téléphone, le pont n'a pas de hauteur fixe : rien ne s'y retire, et N21 y passait déjà à la ligne. */
.g-derby .db-fd { flex: none; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.g-derby .db-fd.est-hors { display: none; }