/* ============================================================
   Boules & Stats : palette "studio de tirage"
   ============================================================ */
:root {
  --bg: #0e1430;
  --bg-deep: #0a0f24;
  --surface: #171f42;
  --surface-2: #1e2851;
  --line: #2a3565;
  --ink: #edf0fa;
  --muted: #8b94b8;
  --hot: #ffc53d;      /* or : boules chaudes, étoiles EM */
  --hot-2: #ff8c42;
  --cold: #4f7de9;     /* bleu : boules froides */
  --chance: #ff5d5d;   /* rouge : N° chance Loto */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 80% -10%, #1b2a6b55, transparent 60%),
    radial-gradient(900px 420px at -10% 30%, #14286033, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.2rem);
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-ball {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff8 0 18%, transparent 40%),
              radial-gradient(circle at 50% 55%, var(--hot), var(--hot-2));
  box-shadow: 0 4px 14px #ffc53d40;
}
.brand h1 {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; margin: 0;
}
.brand h1 em { color: var(--hot); font-style: normal; }

.game-switch {
  display: flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
}
.game-switch button {
  border: 0; background: transparent; color: var(--muted);
  font: 600 .85rem var(--font-body); letter-spacing: .02em;
  padding: .45rem 1.05rem; border-radius: 999px; cursor: pointer;
  transition: color .2s, background .2s;
}
.game-switch button[aria-selected="true"] { background: var(--ink); color: var(--bg-deep); }

/* ---------- Layout ---------- */
main { max-width: 1080px; margin: 0 auto; padding: clamp(1rem, 3.5vw, 2.2rem); display: grid; gap: 1.4rem; }
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.6rem);
}
.panel-head { margin-bottom: 1rem; }
.panel-head.sub { margin-top: 1.6rem; }
.panel h3 {
  font-family: var(--font-display); font-size: .95rem; font-weight: 500;
  margin: 0 0 .3rem; letter-spacing: .01em;
}
.panel-sub { color: var(--muted); font-size: .84rem; margin: 0 0 .8rem; }
.cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.2rem, 4vw, 2rem);
}
.eyebrow {
  color: var(--hot); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; margin: 0 0 .25rem;
}
.hero h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 3.4vw, 1.7rem); margin: 0 0 1.1rem; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin: 1.3rem 0 0; padding-top: 1.1rem;
  border-top: 1px dashed var(--line);
}
.hero-meta div { margin: 0; }
.hero-meta dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-meta dd { margin: .15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Boules ---------- */
.draw-line { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  color: #0a0f24;
  background: radial-gradient(circle at 32% 26%, #ffffffcc 0 16%, transparent 42%),
              radial-gradient(circle at 50% 60%, #f4f6ff, #c6cde6);
  box-shadow: inset 0 -4px 8px #0002, 0 3px 10px #0006;
}
.ball.extra {
  background: radial-gradient(circle at 32% 26%, #fff9 0 16%, transparent 42%),
              radial-gradient(circle at 50% 60%, var(--hot), var(--hot-2));
  color: #241500;
}
[data-game="loto"] .ball.extra {
  background: radial-gradient(circle at 32% 26%, #fff8 0 16%, transparent 42%),
              radial-gradient(circle at 50% 60%, #ff7a7a, var(--chance));
  color: #2b0606;
}
.ball.big { width: 62px; height: 62px; font-size: 1.4rem; }
.draw-line.small .ball { width: 38px; height: 38px; font-size: .9rem; }

/* ---------- Filtres ---------- */
.filters { display: grid; gap: .8rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-group button {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: 600 .8rem var(--font-body); padding: .4rem .85rem; border-radius: 999px; cursor: pointer;
  transition: .18s;
}
.filter-group button[aria-pressed="true"] { background: var(--hot); border-color: var(--hot); color: #241500; }
.filter-selects { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--muted); font-size: .84rem; }
.filter-selects label { display: flex; align-items: center; gap: .45rem; }
.filter-selects select {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: .35rem .5rem; font: inherit;
}
.filter-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Heatmap ---------- */
.ballgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .5rem; }
.ballgrid .cell {
  aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 .95rem var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: radial-gradient(circle at 32% 26%, #ffffff26 0 16%, transparent 45%),
              color-mix(in srgb, var(--cold) calc(var(--heat) * 0%), var(--surface-2));
  box-shadow: inset 0 -3px 6px #0003;
  transition: transform .15s;
}
.ballgrid .cell:hover, .ballgrid .cell:focus-visible { transform: scale(1.08); outline: 2px solid var(--hot); outline-offset: 2px; }
.ballgrid .cell small { font-weight: 500; font-size: .58rem; color: #ffffffb3; }
.legend { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .78rem; margin: 1rem 0 0; }
.legend-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.legend-swatch.cold { background: var(--cold); }
.legend-swatch.hot { background: var(--hot); }
.legend-bar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--cold), var(--surface-2), var(--hot)); }

/* ---------- Classements ---------- */
.ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; counter-reset: rank; }
.ranklist li {
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .7rem; font-variant-numeric: tabular-nums;
}
.ranklist li::before {
  counter-increment: rank; content: counter(rank, decimal-leading-zero);
  color: var(--muted); font-size: .72rem; font-weight: 700; width: 1.6em;
}
.ranklist .who { display: flex; gap: .35rem; align-items: center; font-weight: 700; }
.ranklist .who .mini {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #e9ecfa; color: #0a0f24; font-size: .8rem; font-weight: 700;
}
.ranklist .val { margin-left: auto; color: var(--hot); font-weight: 700; }
.ranklist .bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #0b1130; overflow: hidden; }
.ranklist .bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); background: linear-gradient(90deg, var(--cold), var(--hot)); border-radius: 3px; }
.ranklist.combos li { padding: .42rem .6rem; }
.ranklist.combos .who { letter-spacing: .04em; }

/* ---------- Dialog détail ---------- */
dialog#detail {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  width: min(92vw, 460px); padding: 1.4rem;
}
dialog#detail::backdrop { background: #060a1acc; backdrop-filter: blur(3px); }
.detail-close {
  position: absolute; top: .6rem; right: .6rem; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); font-size: 1.1rem; cursor: pointer;
}
.detail-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.detail-head h3 { font-family: var(--font-display); margin: 0; font-size: 1.05rem; }
.detail-head p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin: 0 0 1.1rem; }
.detail-stats div { background: var(--surface-2); border-radius: 10px; padding: .55rem .7rem; }
.detail-stats dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.detail-stats dd { margin: .1rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
dialog#detail h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 1.1rem 0 .5rem; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.spark i { flex: 1; background: linear-gradient(180deg, var(--hot), var(--hot-2)); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark i[title] { cursor: help; }

/* ---------- Footer ---------- */
.foot { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 2.2rem) 2.5rem; color: var(--muted); font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 560px) {
  .ballgrid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .ball { width: 42px; height: 42px; font-size: .95rem; }
}

/* ============================================================
   V2 : structure, matrice, verdict, vérificateur
   ============================================================ */
.panel-head.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }

/* Mini-graphiques observé vs théorique */
.structure-grid { margin-bottom: .4rem; }
.mini-chart h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .55rem; }
.duo { display: grid; gap: .35rem; }
.duo .row { display: grid; grid-template-columns: 2.2em 1fr 3.4em; gap: .5rem; align-items: center; font-size: .8rem; }
.duo .row .lab { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.duo .row .track { position: relative; height: 14px; background: #0b1130; border-radius: 4px; }
.duo .row .obs { position: absolute; inset: 3px auto 3px 0; width: calc(var(--w) * 100%); background: linear-gradient(90deg, var(--cold), var(--hot)); border-radius: 3px; }
.duo .row .th { position: absolute; top: -2px; bottom: -2px; left: calc(var(--x) * 100%); width: 2px; background: var(--ink); opacity: .85; border-radius: 1px; }
.duo .row .pct { font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--ink); }

/* Lignes de stat simple */
.statline-row { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1rem; }
.statline { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .8rem; font-size: .85rem; }
.statline b { color: var(--hot); font-variant-numeric: tabular-nums; }
.statline .th-note { color: var(--muted); font-size: .76rem; display: block; margin-top: .15rem; }

/* Histogramme des sommes */
.histo { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.histo .bin { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; height: 100%; }
.histo .bin .th { position: absolute; left: 10%; right: 10%; bottom: 0; height: calc(var(--h) * 100%); border: 1px dashed #ffffff59; border-bottom: 0; border-radius: 3px 3px 0 0; }
.histo .bin .obs { height: calc(var(--h) * 100%); min-height: 1px; background: linear-gradient(180deg, var(--hot), var(--hot-2)); border-radius: 3px 3px 0 0; }
.histo .bin small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: .58rem; margin-top: .25rem; }
.histo { margin-bottom: 1.3rem; }

/* Matrice */
.matrix-wrap { position: relative; max-width: 640px; }
#matrix { width: 100%; height: auto; border-radius: 10px; background: var(--bg-deep); cursor: crosshair; touch-action: none; }
.matrix-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem .6rem; font-size: .78rem; font-variant-numeric: tabular-nums;
  transform: translate(-50%, -130%); white-space: nowrap;
}
.ghost-list { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 180px; overflow: auto; }
.ghost-list .pair {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: .22rem .6rem; font-size: .78rem; font-variant-numeric: tabular-nums;
}
#repeat-grids .repeat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .5rem; font-size: .84rem; }
#repeat-grids .repeat .dates { color: var(--muted); font-size: .76rem; }

/* Verdict */
.verdict-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.verdict-card h4 { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.verdict-card .big-p { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 .35rem; }
.verdict-card .ok { color: #6fe3a5; }
.verdict-card .warn { color: var(--hot-2); }
.verdict-card p { margin: .2rem 0; font-size: .84rem; color: var(--muted); }
.sim-block { margin-top: 1.1rem; display: grid; gap: .5rem; justify-items: start; }

/* Boutons & vérificateur */
.btn {
  border: 0; border-radius: 999px; padding: .6rem 1.3rem; cursor: pointer;
  font: 700 .88rem var(--font-body); color: #241500;
  background: linear-gradient(120deg, var(--hot), var(--hot-2));
  box-shadow: 0 4px 16px #ffc53d33;
  transition: transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.verif-inputs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.verif-inputs input {
  width: 62px; height: 52px; text-align: center; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: 700 1.05rem var(--font-body); font-variant-numeric: tabular-nums;
}
.verif-inputs input.extra-input { border-color: var(--hot); }
[data-game="loto"] .verif-inputs input.extra-input { border-color: var(--chance); }
.verif-inputs input:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.verif-result { margin-top: 1.1rem; display: grid; gap: 1rem; }
.verif-result .vr-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.verif-result h4 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.verif-result table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.verif-result td, .verif-result th { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--line); }
.verif-result th { color: var(--muted); font-weight: 500; font-size: .74rem; }
.banal-gauge { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #6fe3a5, var(--hot), var(--chance)); margin: .5rem 0 .3rem; }
.banal-gauge i { position: absolute; top: -4px; width: 4px; height: 18px; background: var(--ink); border-radius: 2px; left: calc(var(--x) * 100%); }
.verif-result ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .82rem; color: var(--muted); }
.error-note { color: var(--chance); font-size: .84rem; }

/* Intégrité & sync */
#sync-block { margin-top: 1.3rem; }
#sync-progress { margin-top: .6rem; }
.sync-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.btn.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.missing-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; max-height: 160px; overflow: auto; }
.missing-chips .pair { border-color: var(--chance); }
.sync-line { font-size: .84rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sync-line:last-child { border-bottom: 0; }
.sync-line .okmark { color: #6fe3a5; }
.sync-line .komark { color: var(--chance); }

/* Installation & mise à jour */
.topbar-right { display: flex; align-items: center; gap: .7rem; }
.btn.install { padding: .45rem 1rem; font-size: .8rem; }
.update-toast {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: .7rem;
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 14px;
  padding: .7rem 1rem; box-shadow: 0 10px 30px #0009; font-size: .88rem;
  max-width: min(94vw, 480px);
}
.update-toast .btn { padding: .45rem .9rem; font-size: .8rem; }
.update-toast[hidden] { display: none; }
dialog#ios-install {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  width: min(92vw, 420px); padding: 1.4rem;
}
dialog#ios-install::backdrop { background: #060a1acc; backdrop-filter: blur(3px); }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .topbar-right { width: 100%; justify-content: space-between; }
}

/* Top 5 par jour de tirage */
.topjours { display: grid; gap: .6rem; }
.tj-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .65rem .8rem;
}
.tj-row.all { background: linear-gradient(160deg, var(--surface-2), #23306a); }
.tj-label {
  min-width: 118px; font: 700 .78rem var(--font-body);
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.tj-row.all .tj-label { color: var(--hot); }
.tj-balls { display: flex; gap: .45rem; flex-wrap: wrap; }
.tj-sep { width: 1px; align-self: stretch; background: var(--line); }
.tj-stack { display: grid; justify-items: center; gap: .15rem; }
.tj-stack small { color: var(--muted); font-size: .62rem; font-variant-numeric: tabular-nums; }
.tj-empty { color: var(--muted); font-size: .82rem; }
@media (max-width: 560px) {
  .tj-label { min-width: 100%; }
  .tj-sep { display: none; }
}

/* Vue Excel */
dialog#excel-view {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  width: min(96vw, 940px); max-height: 92vh; overflow: auto; padding: 1.4rem;
}
dialog#excel-view::backdrop { background: #060a1acc; backdrop-filter: blur(3px); }
dialog#excel-view h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 1rem; }
.xl-h { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hot); margin: 1.4rem 0 .6rem; }
.xl-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.xl-scroll.tall { max-height: 300px; }
.xl-table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.xl-table th, .xl-table td { padding: .42rem .6rem; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.xl-table th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; position: sticky; top: 0; }
.xl-table td.lab { text-align: left; font-weight: 700; }
.xl-table td.star { color: var(--hot); font-weight: 700; }
[data-game="loto"] .xl-table td.star { color: var(--chance); }
.xl-table tr:last-child td { border-bottom: 0; }
.xl-tendances { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.xl-tcol h5 { margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; }
.xl-selects { display: flex; gap: .5rem; margin-bottom: .4rem; }
.xl-selects select {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: .35rem .5rem; font: inherit; flex: 1;
}
.xl-count { color: var(--muted); font-size: .74rem; margin: 0 0 .4rem; }

/* Recommandation */
#reco-desc { margin-top: .2rem; }
.reco-grids { display: grid; gap: .8rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.reco-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1rem; display: grid; gap: .6rem;
}
.reco-card .draw-line .ball { width: 40px; height: 40px; font-size: .95rem; }
.reco-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.reco-meta b { color: var(--ink); }
.reco-badge { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .18rem .55rem; width: fit-content; }
.reco-badge.atypique { background: #17452f; color: #6fe3a5; }
.reco-badge.commune { background: #4a3a10; color: var(--hot); }
.reco-badge.banale { background: #4a1717; color: #ff9d9d; }
.reco-ai { margin-top: 1rem; white-space: pre-wrap; line-height: 1.6; font-size: .92rem; }

/* Tous les tirages */
dialog#all-draws {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  width: min(96vw, 860px); max-height: 92vh; overflow: auto; padding: 1.4rem;
}
dialog#all-draws::backdrop { background: #060a1acc; backdrop-filter: blur(3px); }
dialog#all-draws h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 1rem; }
.all-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.all-filters select, .all-filters input {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: .4rem .55rem; font: inherit;
}
.all-filters input { width: 140px; }
.all-tall { max-height: 55vh; }
#all-table .b { font-weight: 700; }
#all-table .e { color: var(--hot); font-weight: 700; }
[data-game="loto"] #all-table .e { color: var(--chance); }
#all-table .hit { outline: 2px solid var(--hot); border-radius: 6px; padding: .05rem .3rem; }
#all-table .src-ia { font-size: .62rem; color: var(--cold); border: 1px solid var(--cold); border-radius: 999px; padding: .05rem .4rem; margin-left: .3rem; }