/* ==========================================================
   CENTRO JEUX – Site de paris (Hippique / Sport / Loto)
   ========================================================== */
:root {
  --green-950: #061f17;
  --green-900: #082b20;
  --green-800: #0b3a2b;
  --green-700: #0f4a37;
  --green-600: #145c44;
  --green-500: #1c9a62;
  --green-400: #2bb673;
  --green-300: #3fcf86;
  --yellow: #ffd21f;
  --yellow-2: #f6b400;
  --red: #e3232d;
  --ink: #0f2a20;
  --muted: #6c7a74;
  --line: #e3e8e6;
  --bg-soft: #f1f4f3;
  --white: #fff;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(6, 31, 23, .08);
  /* Scène dessinée, affichée seulement si la photo d'accueil manque */
  --hero-secours: linear-gradient(180deg,
    #a9b9bb 0%, #cfd8d3 18%, #3f5e41 22%, #2c4a30 38%, #50677e 40%,
    #36506e 46%, #6c9a4a 47%, #58873b 60%, #8b6b4a 62%, #6f5238 100%);
  --font: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-cond: "Barlow Condensed", "Barlow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--green-900);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; vertical-align: -2px; }
.muted { color: var(--muted); }

/* ---------- Mise en page globale ---------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}
.site { background: var(--white); display: flex; flex-direction: column; min-width: 0; }
main { flex: 1; background: var(--green-950); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 2px solid transparent; border-radius: 999px;
  padding: .55em 1.2em; font-weight: 700; font-size: 15px; line-height: 1;
  transition: transform .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-outline { border-color: var(--green-700); color: var(--green-700); background: #fff; }
.btn-outline:hover { background: var(--bg-soft); }
.btn-dark { background: var(--green-700); color: #fff; }
.btn-dark:hover { background: var(--green-600); }
.btn-green { background: var(--green-400); color: #fff; }
.btn-green:hover:not(:disabled) { background: var(--green-500); box-shadow: 0 6px 18px rgba(43, 182, 115, .35); }
.btn-xl { font-size: 17px; padding: 16px 0; width: 243px; }
.btn-block { width: 100%; padding: 14px; }

/* ==========================================================
   HEADER
   ========================================================== */
.header {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  background: #fff;
  min-height: 146px;
}
.logo { display: flex; align-items: center; justify-content: center; padding: 6px 20px 6px 40px; }
.logo img { width: 190px; height: auto; display: block; }

.header-main { display: flex; flex-direction: column; min-width: 0; }
.warning-banner {
  background: var(--yellow);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 22px 10px 24px;
  min-height: 82px;
}
.warning-banner p { margin: 0; font-family: var(--font-cond); line-height: 1.12; color: #111; }
.warning-banner strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: .1px; }
.warning-banner span { display: block; font-size: 18.5px; font-weight: 700; }
.responsible-badge {
  flex: none; background: #fff; width: 100px; height: 58px; padding: 6px 8px;
  display: flex; flex-direction: column; justify-content: center; font-family: var(--font); color: #111;
}
.responsible-badge b { font-size: 8.5px; letter-spacing: .3px; margin-top: 3px; }
.responsible-badge small { font-size: 7px; font-style: italic; color: #666; line-height: 1.1; }
.rb-flag { display: flex; width: 22px; height: 11px; }
.rb-flag i { flex: 1; }
.rb-flag i:nth-child(1) { background: #0f4a37; }
.rb-flag i:nth-child(2) { background: #fff; outline: 1px solid #eee; }
.rb-flag i:nth-child(3) { background: var(--red); }

.topnav {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 20px 0 0;
}
.universes { display: flex; gap: 22px; align-items: center; margin-left: -45px; overflow-x: auto; scrollbar-width: none; }
.universes::-webkit-scrollbar { display: none; }
.universes a {
  font-family: var(--font-cond); font-style: italic; font-weight: 800; font-size: 16px;
  letter-spacing: .3px; color: #9aa39f; transition: color .15s; display: inline-flex; align-items: center; gap: 4px;
}
.universes a:hover { color: var(--green-700); }
.universes a.is-active { color: var(--green-800); }
.universes .u-play { color: #c8a84a; font-weight: 900; }
.universes .u-play em { color: #e0bf5c; font-style: italic; font-weight: 700; }
.auth { display: flex; align-items: center; gap: 8px; flex: none; }
.auth .btn { font-size: 14px; padding: 8px 14px; }
.age-badge {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--red);
  display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--red);
  position: relative;
}
.age-badge::after { content: ""; position: absolute; width: 2px; height: 26px; background: var(--red); transform: rotate(-45deg); }

/* ---------- Sous-navigation ---------- */
.subnav { background: var(--green-700); }
.subnav ul { display: flex; gap: 34px; padding: 0 45px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 50px; color: #fff; font-weight: 600; font-size: 16px; position: relative; white-space: nowrap;
}
.subnav a .ico { width: 20px; height: 20px; }
.subnav a.is-active { color: var(--yellow); }
.subnav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--yellow);
}
.subnav a:hover { color: var(--yellow); }

/* ==========================================================
   HIPPIQUE : HERO + PROGRAMME
   ========================================================== */
/* Accueil (02/10/2026, demande du propriétaire) : bannière basse, les matchs juste dessous, le programme des courses
   à droite sur toute la hauteur — on voit les matchs et les scores en direct sans faire défiler. */
.view-hippique {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 373px;
  grid-template-areas: "hero prog" "sport prog";
  grid-template-rows: auto 1fr;
}
.view-hippique > section:not(.hero):not(.accueil-sport) { grid-column: 1 / -1; }
/* Accueil (07/10/2026, demande du propriétaire) : la grille du Loto dans la colonne de gauche sur grand écran
   (ailleurs sous les matchs), et le panier sous le programme des courses, dans la colonne de droite. Sur téléphone,
   le panier reste aussi derrière la barre en bas de l'écran. */
.accueil-loto { grid-area: loto; min-width: 0; padding: 0 30px 30px; background: #fff; }
@media (min-width: 1200px) {
  .view-hippique { grid-template-columns: 290px minmax(0, 1fr) 373px; grid-template-areas: "loto hero prog" "loto sport prog"; }
  .accueil-loto { padding: 16px 0 30px 16px; background: var(--bg-soft); border-right: 1px solid #dfe5e2; }
}
@media (max-width: 1199px) { .view-hippique { grid-template-areas: "hero prog" "sport prog" "loto prog"; } }
.accueil-panier { flex: none; min-width: 0; padding: 4px 20px 18px 12px; }
.accueil-panier .slip { position: static; }
/* Le panier reste visible sous la liste des courses, qui défile seule ; ses choix défilent au-delà de quelques matchs */
.programme .prog-list { flex: 1 1 auto; min-height: 150px; }
.accueil-panier #slipItems { max-height: 34vh; overflow-y: auto; }
.panier-barre { display: none; }
@media (max-width: 900px) {
  .panier-barre:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center;
    gap: 12px; border: 0; border-radius: 14px; padding: 13px 16px; background: var(--green-700); color: #fff; font-weight: 700;
    font-size: 15px; box-shadow: 0 8px 24px rgba(6, 31, 23, .35); }
  .panier-barre b { background: var(--yellow); color: var(--green-900); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
  .panier-voir { margin-left: auto; color: var(--yellow); }
}
.hero { grid-area: hero; position: relative; overflow: hidden; background: var(--green-950); min-height: 330px; }
.hero-media {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,26,19,.92) 0%, rgba(6,26,19,.55) 30%, rgba(6,26,19,.05) 65%),
    linear-gradient(0deg, rgba(6,26,19,.95) 0%, rgba(6,26,19,.2) 45%, transparent 70%),
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
    url("../assets/hero.jpg") center / cover no-repeat,
    var(--hero-secours);
  transform: scale(1.02);
}
.hero-content {
  position: absolute; left: 45px; bottom: 28px; right: 30px; color: #fff; max-width: 720px;
}
.hero-kicker { margin: 0; color: var(--green-300); font-weight: 600; font-size: 15px; }
.hero-time {
  margin: 0 0 10px; font-family: var(--font); font-style: italic; font-weight: 900;
  font-size: 24px; color: var(--green-300); letter-spacing: .3px;
}
.hero-title {
  margin: 0 0 10px; font-family: var(--font); font-style: italic; font-weight: 900; font-size: 26px;
  line-height: 1.3; text-transform: uppercase; letter-spacing: .3px;
}
.hero-title span { display: block; }
.hero-meta { margin: 0 0 14px; font-size: 13.5px; font-weight: 500; opacity: .95; }

.programme {
  grid-area: prog; align-self: start; position: sticky; top: 0;
  background: var(--bg-soft);
  display: flex; flex-direction: column;
  max-height: max(620px, 100vh);
  border-left: 1px solid #dfe5e2;
}
.prog-head { display: flex; align-items: center; gap: 12px; padding: 8px 18px 6px 20px; }
.prog-cal {
  width: 32px; height: 32px; border-radius: 8px; background: var(--green-700); color: #fff;
  display: grid; place-items: center;
}
.prog-cal svg { width: 18px; height: 18px; }
.prog-head h2 { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.prog-arrows { display: flex; gap: 4px; }
.round-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1.6px solid var(--green-700); background: #fff;
  color: var(--green-700); display: grid; place-items: center; padding: 0;
}
.round-btn svg { width: 18px; height: 18px; }
.round-btn:hover { background: var(--green-700); color: #fff; }

.prog-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 18px 10px 20px; }
.prog-tabs button {
  border: 0; border-radius: 8px; background: #e6ebe9; color: var(--green-800);
  font-weight: 600; font-size: 14.5px; padding: 8px 4px;
}
.prog-tabs button.is-active { background: var(--green-700); color: #fff; }
.prog-tabs .tab-quinte { background: var(--red); color: #fff; font-style: italic; font-weight: 800; }
.prog-tabs .tab-quinte i { font-weight: 900; }
.prog-tabs .tab-quinte.is-active { box-shadow: inset 0 0 0 2px var(--green-800); }

.prog-list { overflow-y: auto; padding: 0 20px 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.prog-list::-webkit-scrollbar { width: 6px; }
.prog-list::-webkit-scrollbar-thumb { background: #c8d2ce; border-radius: 3px; }

.race {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 6px;
  background: #fff; border-radius: 10px; padding: 12px 12px 10px 10px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, box-shadow .12s; text-align: left;
  border: 0; width: 100%; color: inherit;
}
.race:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6,31,23,.12); }
.race.is-selected { outline: 2px solid var(--green-400); }
.race-badge {
  width: 44px; height: 44px; border-radius: 8px; background: #eef1f0; color: #9aa6a1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font); font-style: italic; font-weight: 900; font-size: 17px; line-height: .92;
  align-self: start; margin: 2px 0 0 6px;
}
.race-info b { display: block; font-size: 14px; color: #5c6863; font-weight: 700; line-height: 1.25; }
.race-info small { display: block; white-space: nowrap; font-size: 11px; color: #5c6863; margin-top: 4px; }
.race-nums { display: flex; gap: 11px; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--ink); }
.race-side { text-align: right; font-size: 10px; white-space: nowrap; color: #3c4a44; font-weight: 500; line-height: 1.35; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.race-side .top { display: flex; align-items: flex-start; gap: 6px; }
.race-info { min-width: 0; }
.replay {
  display: inline-flex; align-items: center; gap: 3px; background: #1b1b1b; color: #fff; border-radius: 4px;
  font-size: 9px; font-weight: 700; padding: 3px 5px;
}
.replay svg { width: 10px; height: 10px; color: var(--red); }
.eq-badge { background: var(--red); color: #fff; border-radius: 6px; font-style: italic; font-weight: 900; font-size: 11px; padding: 2px 5px; margin-top: auto; }
/* Course KETÉ MANDAKO (mise 100 F, paris limités) */
.km-badge { display: inline-block; margin-top: 4px; background: #fff3c4; color: #7a5a00; border-radius: 6px; font-size: 11px; font-weight: 800; padding: 2px 6px; letter-spacing: .02em; }
.km-badge.ci { background: #e3eefc; color: #1d4f91; }
.race.is-live { background: var(--green-700); color: #fff; }
.race.is-live .race-badge { background: var(--green-900); color: #fff; }
.race.is-live .race-info b, .race.is-live .race-info small { color: #fff; }
.race.is-live .race-side { color: #fff; }
.live-dot { color: #ff5a5f; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.race .race-time { font-size: 14px; font-weight: 600; color: var(--ink); }
.reunion-head { font-weight: 800; font-size: 13px; color: var(--green-700); margin: 6px 0 -2px 6px; text-transform: uppercase; }
.prog-empty { padding: 30px 10px; text-align: center; color: var(--muted); }

/* ==========================================================
   SPORT & LOTO
   ========================================================== */
.view-sport, .view-loto, .empty-view { background: var(--bg-soft); min-height: 620px; }
.section-title { font-family: var(--font); font-style: italic; font-weight: 900; text-transform: uppercase; color: var(--green-800); margin: 0 0 14px; font-size: 26px; }
.sport-wrap, .loto-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; padding: 30px 45px; align-items: start; }
.empty-view { padding: 30px 45px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chips button { border: 0; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; box-shadow: var(--shadow); color: var(--green-800); }
.chips button.is-active { background: var(--green-700); color: #fff; }
.chips-jours button small { margin-left: 4px; font-size: 11px; font-weight: 700; opacity: .7; }
.match-list { display: flex; flex-direction: column; gap: 10px; }
.match {
  background: #fff; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
}
.match small { color: var(--muted); font-size: 12px; }
.match b { display: block; font-size: 15px; margin-top: 2px; }
.odds { display: flex; gap: 6px; }
.odd {
  border: 1.5px solid var(--line); background: #fff; border-radius: 8px; min-width: 64px; padding: 6px 8px;
  display: flex; flex-direction: column; align-items: center; font-weight: 700; color: var(--ink);
}
.odd span { font-size: 10px; color: var(--muted); font-weight: 600; }
.odd:hover { border-color: var(--green-400); }
.odd.is-picked { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.odd.is-picked span { color: #cfe; }
/* Autres paris d'un match : groupes à déplier, une ligne par choix (code, règle, cote) */
.odd-plus { min-width: 52px; color: var(--green-800); }
.odd-plus[aria-expanded="true"] { border-color: var(--green-400); }
.markets { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.mk-titre {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
  border: 0; background: var(--bg-soft); border-radius: 8px; padding: 9px 12px; font-weight: 700; color: var(--green-800);
}
.mk-titre small { color: var(--muted); font-weight: 600; white-space: nowrap; }
.mk-titre.is-picked { box-shadow: inset 3px 0 0 var(--green-700); }
.mk-lignes { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px; }
.odd.odd-ligne { flex-direction: row; justify-content: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; }
.odd-ligne .code { min-width: 58px; font-size: 12px; font-weight: 800; color: var(--green-800); }
.odd-ligne .lib { flex: 1; font-size: 13px; font-weight: 500; color: var(--ink); }
.odd-ligne b { font-size: 14px; }
.odd-ligne.is-picked .code, .odd-ligne.is-picked .lib { color: #fff; }

.slip { background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); position: sticky; top: 16px; }
.slip h2 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.slip h2 span { background: var(--green-400); color: #fff; border-radius: 999px; font-size: 12px; padding: 2px 8px; }
.slip-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.slip-item { background: var(--bg-soft); border-radius: 8px; padding: 8px 10px; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
.slip-item button { border: 0; background: none; color: var(--red); font-size: 16px; }
.slip label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.slip input, .slip select, .form input { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; }
.slip p { margin: 6px 0; font-size: 14px; }
#slipBonusLigne b { color: var(--green-500); }
.slip .slip-bonus-info { font-size: 12.5px; }
.slip .btn-block { margin-top: 10px; }

/* Panier (07/10/2026) : présenté comme le panier de l'app agent — bandeau bleu, pastille orange, un × par choix */
#betSlip { padding: 0; overflow: hidden; }
#betSlip .slip-tete { margin: 0; padding: 12px 14px; background: #5aa2f0; color: #0b1a3a; font-size: 16px; font-weight: 900; letter-spacing: .3px; gap: 10px; }
#betSlip .slip-tete .slip-ico { background: none; color: inherit; padding: 0; font-size: 19px; border-radius: 0; }
#betSlip .slip-tete #slipCount { min-width: 26px; height: 26px; border-radius: 50%; background: #ff5a1f; color: #fff; font-size: 14px;
  font-weight: 900; display: grid; place-items: center; padding: 0 6px; }
#betSlip .slip-tete-cote { margin-left: auto; font-size: 15px; font-weight: 800; }
#betSlip .slip-tete-cote[hidden] + .slip-fermer { margin-left: auto; }
#betSlip .slip-fermer { margin-left: 4px; background: rgba(255, 255, 255, .55); }
#betSlip .slip-items { margin: 12px 14px; gap: 0; }
#betSlip .slip-items:has(.slip-item) { border: 1.5px solid var(--line); border-radius: 12px; }
#betSlip .slip-item { background: none; border-radius: 0; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
#betSlip .slip-item:last-child { border-bottom: 0; }
#betSlip .si-m { flex: 1; min-width: 0; }
#betSlip .si-m b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
#betSlip .si-m small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
#betSlip .slip-item em { font-style: normal; font-weight: 800; font-size: 15px; white-space: nowrap; }
#betSlip .si-x { flex: none; border: 0; background: #fde8e9; color: var(--red); width: 28px; height: 28px; border-radius: 50%; font-size: 17px; line-height: 1; }
#betSlip .slip-foot { padding: 0 14px 14px; }
#betSlip .btn-block { white-space: normal; line-height: 1.2; }

/* Grille du Loto sur l'accueil (07/10/2026) */
.al-carte { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.al-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.al-tete h2 { margin: 0; font-size: 18px; font-weight: 800; }
.al-tirage { font-size: 12.5px; font-weight: 700; color: var(--green-700); background: var(--bg-soft); border-radius: 999px; padding: 3px 10px; }
.al-aide { margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); }
.al-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.al-grille .ball { font-size: 13px; }
.al-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.al-actions .btn { padding: 8px 0; font-size: 14px; }
.al-picked { margin: 10px 0 4px; min-height: 0; }
.al-picked:empty { display: none; }
.al-picked span { width: 30px; height: 30px; font-size: 13px; }
.al-mise { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; font-size: 13px; font-weight: 600; }
.al-mise select { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.al-total { margin: 6px 0; font-size: 13.5px; }
.al-lot { margin: 8px 0 0; padding: 8px; font-size: 13px; }
.al-carte .btn-block { margin-top: 8px; padding: 12px; font-size: 14px; white-space: normal; line-height: 1.2; }
.al-lien { display: block; margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--green-700); }
@media (min-width: 1200px) { .al-grille { gap: 4px; } }
@media (max-width: 1199px) and (min-width: 901px) { .al-carte { max-width: 560px; } .al-grille { grid-template-columns: repeat(10, 1fr); } }

.loto-card { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.loto-card h3 { margin: 18px 0 10px; font-size: 15px; }
.loto-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.loto-grid.chance { grid-template-columns: repeat(10, 1fr); }
.ball {
  aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-weight: 700; color: var(--green-800);
  display: grid; place-items: center; padding: 0; font-size: 14px; transition: all .12s;
}
.ball:hover { border-color: var(--green-400); }
.ball.is-on { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.chance .ball.is-on { background: var(--red); border-color: var(--red); }
.loto-actions { display: flex; gap: 10px; margin-top: 18px; }
.loto-picked { display: flex; gap: 6px; flex-wrap: wrap; min-height: 40px; margin-bottom: 14px; }
.loto-picked span { width: 36px; height: 36px; border-radius: 50%; background: var(--green-700); color: #fff; display: grid; place-items: center; font-weight: 700; }
.loto-picked span.c { background: var(--red); }
.jackpot { background: var(--yellow); border-radius: 8px; padding: 10px; text-align: center; }

.footer { background: var(--green-900); color: #9fb8ad; font-size: 12px; padding: 14px 45px; }
.footer p { margin: 0; }

/* ==========================================================
   MODALES & TOAST
   ========================================================== */
.modal { position: fixed; inset: 0; background: rgba(4, 20, 15, .7); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(3px); }
.modal-card { background: #fff; border-radius: 16px; width: min(620px, 100%); max-height: 92vh; overflow: auto; padding: 26px; position: relative; animation: pop .18s ease-out; }
.modal-card.small { width: min(400px, 100%); }
@keyframes pop { from { transform: translateY(12px); opacity: 0; } }
.modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: var(--bg-soft); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; }
.modal-kicker { margin: 0; color: var(--green-500); font-weight: 700; font-size: 13px; }
.modal-card h2 { margin: 2px 0 14px; font-family: var(--font); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 24px; color: var(--green-800); }
.modal-card h3 { font-size: 14px; margin: 18px 0 8px; }
.modal-card h3 small { color: var(--muted); font-weight: 500; }
.bet-types, .stakes { display: flex; flex-wrap: wrap; gap: 8px; }
.bet-types button, .stakes button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 13px; color: var(--ink); }
.bet-types button.is-active, .stakes button.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.horses { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.horses button { aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: 16px; color: var(--ink); position: relative; }
.horses button.is-on { background: var(--green-400); border-color: var(--green-400); color: #fff; }
.horses button i { position: absolute; top: 2px; right: 4px; font-size: 9px; font-style: normal; }
.bet-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); gap: 12px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; }
.form label.only-signup { flex-direction: row; align-items: center; gap: 8px; }
.mybets { display: flex; flex-direction: column; gap: 8px; }
.mybet { background: var(--bg-soft); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.mybet b { display: block; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 40px)); background: var(--green-800); color: #fff;
  padding: 12px 20px; border-radius: 10px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .25s; z-index: 60;
}
.toast.show { transform: translate(-50%, 0); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1399px) {
}
@media (max-width: 1100px) {
  .header { grid-template-columns: 210px minmax(0, 1fr); }
  .logo { padding-left: 20px; }
  .logo img { width: 160px; }
  .warning-banner strong { font-size: 19px; }
  .warning-banner span { font-size: 14px; }
  .universes { margin-left: 0; gap: 16px; }
  .view-hippique { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  .header { grid-template-columns: 1fr auto; grid-template-areas: "banner banner" "logo auth" "uni uni"; min-height: 0; }
  .header-main, .topnav { display: contents; }
  .warning-banner { grid-area: banner; min-height: 0; padding: 8px 16px; }
  .responsible-badge { display: none; }
  .logo { grid-area: logo; justify-content: flex-start; padding: 10px 16px; }
  .logo img { width: 130px; }
  .auth { grid-area: auth; padding-right: 16px; }
  .universes { grid-area: uni; margin: 0; padding: 0 16px 12px; gap: 18px; }
  .universes a { white-space: nowrap; }
  .subnav ul { padding: 0 16px; gap: 24px; }
  .view-hippique { grid-template-columns: 1fr; }
  .view-hippique { grid-template-areas: "hero" "sport" "loto" "prog"; grid-template-rows: auto; }
  .hero { min-height: 270px; }
  .hero-content { left: 16px; bottom: 18px; }
  .programme { max-height: none; border-left: 0; position: static; }
  .prog-list { max-height: 560px; }
  .sport-wrap, .loto-wrap { grid-template-columns: 1fr; padding: 20px 16px; }
  .slip { position: static; }
  .footer { padding: 14px 16px; }
}
@media (max-width: 560px) {
  .warning-banner strong { font-size: 13px; }
  .warning-banner span { font-size: 10.5px; }
  .auth .btn-outline { display: none; }
  .hero-title { font-size: 21px; }
  .hero-meta { font-size: 12.5px; }
  .btn-xl { width: 100%; }
  .loto-grid { grid-template-columns: repeat(7, 1fr); }
  .match { grid-template-columns: 1fr; }
  .odd { flex: 1; min-width: 0; }
  .bet-summary { flex-direction: column; align-items: stretch; }
  .bet-actions { flex-direction: column-reverse; }
}

/* ==========================================================
   v2 : compte joueur, connexion, résultats
   ========================================================== */
.balance-chip { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; padding: 4px 10px; border-radius: 10px; background: var(--bg-soft); }
.balance-chip small { font-size: 11px; color: var(--muted); font-weight: 600; }
.balance-chip b { font-size: 15px; color: var(--green-700); white-space: nowrap; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #e6ebe9; border-radius: 10px; padding: 4px; gap: 4px; margin: 0 40px 16px 0; }
.auth-tabs button { border: 0; background: none; border-radius: 8px; padding: 9px; font-weight: 700; color: var(--green-800); }
.auth-tabs button.is-active { background: var(--green-700); color: #fff; }
.form-error { color: var(--red); font-weight: 600; font-size: 14px; margin: 0; }
.form-error:empty { display: none; }
.link-btn { border: 0; background: none; color: var(--green-500); font-weight: 600; font-size: 14px; text-decoration: underline; padding: 4px; }
.otp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.otp-row .btn { height: 46px; font-size: 13px; }
.form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 13px; line-height: 1.4; }
.form label.check input { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.form label.check a { color: var(--green-500); text-decoration: underline; }
.toast.error { background: var(--red); }
.lose-text { color: var(--red); font-weight: 700; font-size: 12px; }
a.replay { color: #fff; }
.horses button:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.results-title { font-size: 16px; margin: 22px 0 10px; color: var(--green-800); }
.match.done { opacity: .85; grid-template-columns: 1fr; }
.loto-results { display: flex; flex-direction: column; gap: 8px; }
.loto-result { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.loto-result span { display: flex; gap: 3px; }
.loto-result i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--green-700); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.loto-result i.c { background: var(--red); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.footer-links a { color: #d6e6de; font-weight: 600; }
.footer-links a:hover { color: var(--yellow); }
@media (max-width: 560px) {
  .balance-chip b { font-size: 13px; }
  #authIn .btn { padding: 8px 10px; font-size: 13px; }
}

/* Formules hippiques */
.formula-help { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pick-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #e6ebe9; border-radius: 10px; padding: 4px; margin-top: 12px; }
.pick-mode button { border: 0; background: none; border-radius: 8px; padding: 8px; font-weight: 700; font-size: 13px; color: var(--green-800); }
.pick-mode button.is-active { background: var(--green-700); color: #fff; }
.horses button.is-base { background: var(--yellow); border-color: #e0b400; color: var(--ink); }
.combo-info { margin: 14px 0 0; background: #effaf4; border: 1.5px solid var(--green-400); border-radius: 10px; padding: 10px 12px; font-weight: 700; text-align: center; }

/* ---------- Code combinaison (payer chez un agent) ---------- */
.bet-actions { display: flex; gap: 10px; }
.code-hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.slip #slipCode, .slip #lotoCode { margin-top: 8px; }
.combo-code { margin: 6px 0 14px; padding: 16px; border: 2px dashed var(--green-400); border-radius: 12px; background: #effaf4;
  text-align: center; font: 900 34px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 4px; color: var(--green-800);
  user-select: all; }
.code-buttons { display: flex; gap: 10px; }
.code-buttons .btn { flex: 1; }
.code-summary { margin: 14px 0 6px; font-weight: 600; }
.code-total { margin: 0 0 4px; }
.code-total b { color: var(--green-600); font-size: 18px; }
.code-steps { margin: 12px 0; padding-left: 20px; font-size: 14px; }
.code-steps li { margin: 4px 0; }
.code-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.code-history h3 { margin: 0 0 6px; }
.code-history button { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 6px 0; border: 0;
  border-bottom: 1px dashed var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.code-history button b { font-family: ui-monospace, Menlo, monospace; letter-spacing: 1px; }
.code-history button.is-old { opacity: .5; }
.code-card .small { font-size: 13px; }

/* Sport : Sport → Compétition → Date → Match */
.sp-sport { font-family: var(--font); font-style: italic; font-weight: 900; text-transform: uppercase; color: var(--green-700); font-size: 20px; margin: 8px 0 0; }
.sp-sport:first-child { margin-top: 0; }
.sp-comp { display: flex; flex-direction: column; gap: 8px; }
.sp-comp h3 { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: var(--green-800); display: flex; align-items: center; gap: 8px; }
.sp-comp h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--yellow); }
.sp-date { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.sp-comp .match small { font-weight: 700; color: var(--green-600); font-size: 13px; }

/* Accueil : onglets « En direct » / « À venir » sous la bannière */
.accueil-sport { grid-area: sport; min-width: 0; padding: 18px 30px 30px; background: #fff; }
.as-tabs { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--line); margin-bottom: 4px; }
.as-tabs button { border: 0; background: none; padding: 10px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent;
  font-size: 16px; font-weight: 800; color: var(--muted); display: inline-flex; align-items: center; }
.as-tabs button.is-active { color: var(--green-800); border-bottom-color: var(--green-500); }
.as-tabs button b { margin-left: 7px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--green-700);
  color: #fff; font-size: 12px; }
.as-tabs button b:empty { display: none; }
#asDirect b { background: var(--red); }
.as-tous { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--green-700); white-space: nowrap; }
.accueil-sport .match-list { max-width: 1100px; }
@media (max-width: 900px) { .accueil-loto { padding: 0 16px 24px; } .accueil-panier { padding: 0 16px 24px; } .accueil-sport { padding: 14px 16px 24px; } .as-tabs button { padding: 10px 8px; font-size: 15px; } }

/* Accueil : matchs à venir, par jour puis par heure */
.accueil-matchs { grid-column: 1 / -1; padding: 30px 45px 34px; background: #fff; border-top: 1px solid #dfe5e2; }
.accueil-matchs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.accueil-matchs-head .section-title { margin: 0; }
.accueil-matchs .match-list { max-width: 1100px; }
.accueil-jour { font-size: 14px; color: var(--green-800); border-bottom: 2px solid var(--yellow); padding-bottom: 4px; margin-top: 14px; }
.match small .accueil-heure { display: inline; font-size: 13px; color: var(--green-700); margin: 0; }
@media (max-width: 900px) { .accueil-matchs { padding: 22px 16px 26px; } }

/* Scores en direct : accueil et haut de l'onglet Sport (information, pas de pari) */
.direct-point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--red); margin-right: 9px;
  vertical-align: middle; animation: direct-pouls 1.4s ease-in-out infinite; }
@keyframes direct-pouls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .direct-point { animation: none; } }
.direct-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px; max-width: 1100px; margin-top: 10px; }
.dm { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; border-left: 4px solid var(--red);
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dm-fini, .dm-arrete, .dm-attente { border-left-color: var(--line); }
.dm header { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 4px; }
.dm header small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-temps { flex: none; background: var(--red); color: #fff; font-weight: 800; font-size: 12px; border-radius: 6px; padding: 2px 7px; }
.dm-pause .dm-temps { background: #c28a00; }
.dm-fini .dm-temps, .dm-arrete .dm-temps, .dm-attente .dm-temps { background: #e6ebe9; color: var(--green-800); }
.dm-equipe { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; }
.dm-equipe b:first-child { overflow-wrap: anywhere; }
.dm-but { flex: none; font-size: 20px; min-width: 1.2em; text-align: right; color: var(--green-800); }
.dm-evts { margin: 0 0 2px; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.dm-infos { margin: 4px 0 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sport-direct { margin-bottom: 20px; }
.direct-titre { display: flex; align-items: center; margin: 0; font-size: 16px; font-style: italic; font-weight: 900;
  text-transform: uppercase; color: var(--green-800); }

/* ==========================================================
   PRONOSTICS PMU (accueil)
   ========================================================== */
.pronos { grid-column: 1 / -1; padding: 30px 45px 40px; background: var(--bg-soft); border-top: 1px solid #dfe5e2; }
.pronos-head { margin-bottom: 18px; }
.pronos-head .muted { margin: 6px 0 0; max-width: 760px; font-size: 13.5px; }
.pronos-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.prono { background: #fff; border: 1px solid #dfe5e2; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.prono-head { display: flex; align-items: flex-start; gap: 12px; }
.prono-head b { display: block; font-size: 15px; }
.prono-head small { color: var(--muted); font-size: 12.5px; }
.prono-time { margin-left: auto; font-style: italic; font-weight: 900; color: var(--green-700); white-space: nowrap; }
.prono-horses { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.prono-horses li {
  position: relative; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px;
  background: var(--green-700); color: #fff; font-weight: 800; display: grid; place-items: center;
}
.prono-horses li.is-base { background: #c9a227; }
.prono-horses li i { position: absolute; top: -6px; right: -5px; background: #fff; color: #7a6212; border: 1px solid #c9a227;
  border-radius: 6px; font-size: 10px; font-style: normal; font-weight: 800; padding: 0 3px; }
.prono-comment { margin: 0; font-size: 14px; line-height: 1.5; }
.prono-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.prono-foot small { color: var(--muted); font-size: 12px; flex: 1; }
.prono-closed { font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 900px) { .pronos { padding: 22px 16px 30px; } }

/* Loto : gains annoncés pour la mise choisie */
.loto-prizes { list-style: none; margin: 10px 0 14px; padding: 0; font-size: 13.5px; }
.loto-prizes li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed #e3e8e6; }
.loto-prizes li:last-child { border-bottom: 0; }
.loto-prizes b { font-weight: 800; }
.loto-total { margin: 8px 0 12px; font-size: 14px; }
.loto-total b { font-weight: 800; }
.loto-promo { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #fff3cd; border: 1px solid #f0d78a;
  color: #7a5c00; font-size: 13.5px; }

/* ---------------------------------------------------------------- Images gérées depuis l'administration */
/* Bannière : quand une image est publiée, elle remplace la scène de secours dessinée en CSS. */
.hero-media.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Photo d'accueil : version allégée pour les téléphones (153 Ko au lieu de 430 Ko).
   La connexion mobile se paie au mégaoctet ici : on n'envoie pas une image de 1920 px sur un écran de 375 px. */
@media (max-width: 900px) {
  .hero-media:not(.has-image) {
    background:
      linear-gradient(90deg, rgba(6,26,19,.92) 0%, rgba(6,26,19,.55) 30%, rgba(6,26,19,.05) 65%),
      linear-gradient(0deg, rgba(6,26,19,.95) 0%, rgba(6,26,19,.2) 45%, transparent 70%),
      radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
      url("../assets/hero-mobile.jpg") center / cover no-repeat,
      var(--hero-secours);
  }
}

/* Tant que le site ne sait pas encore quelle bannière afficher, fond uni : l'ancienne photo ne doit jamais
   apparaître une seconde avant la bannière publiée dans l'admin (01/10/2026). */
.hero-media.attente:not(.has-image) { background: var(--green-950); }

/* Bandes d'images : une seule colonne sur téléphone, deux sur tablette, trois sur ordinateur. */
.img-band { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; padding: 26px 45px; background: var(--green-950); }
.img-band-bas { border-top: 1px solid rgba(255, 255, 255, .08); }
.img-item { margin: 0; display: block; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .04); line-height: 0; }
.img-item img { width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; }
a.img-item { transition: transform .15s ease, box-shadow .15s ease; }
a.img-item:hover, a.img-item:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.img-band:has(.img-item:only-child) { grid-template-columns: minmax(0, 1fr); }
/* Une seule image (ex. affiche des trois jeux, 1920 × 768) : elle prend toute la largeur, en entier, sans bandes
   vides sur les côtés — plafonnée à 1400 px de large sur les très grands écrans (01/10/2026). */
.img-band:has(.img-item:only-child) .img-item { justify-self: center; width: 100%; max-width: 1400px; }
.img-band:has(.img-item:only-child) .img-item img { max-height: none; }
@media (max-width: 900px) { .img-band { padding: 20px 16px; gap: 14px; } }
@media (max-width: 560px) { .img-item img { max-height: 240px; } }

/* Recherche d'un match (onglet Sport et accueil) */
.recherche { margin: 0 0 14px; }
.recherche input { width: 100%; max-width: 560px; border: 2px solid var(--green-700); border-radius: 999px; padding: 11px 18px 11px 42px;
  font: inherit; font-size: 15px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%230f4a37' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") 16px center no-repeat; }
.recherche input:focus { outline: none; box-shadow: 0 0 0 3px rgba(43, 182, 115, .25); }
.accueil-sport .recherche { margin: 12px 0 4px; }

/* Coupon en fenêtre (téléphone et tablette) : ouvert par la barre du panier */
.slip-fermer { display: none; margin-left: auto; border: 0; background: var(--bg-soft); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ink); }
.slip-fond { position: fixed; inset: 0; z-index: 55; background: rgba(4, 20, 15, .6); }
.panier-barre.cache { display: none !important; }
@media (max-width: 1199px) {
  .slip.slip-ouvert { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 88vh; overflow: auto;
    border-radius: 18px 18px 0 0; margin: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .slip.slip-ouvert .slip-fermer { display: grid; place-items: center; }
}
/* La barre n'apparaît que sur téléphone : au-delà, le panier est déjà à l'écran (sous le programme, ou à côté des matchs) */
@media (min-width: 901px) { .panier-barre { display: none !important; } }
.slip-continuer { display: none; background: var(--bg-soft); color: var(--green-800); border: 0; font-weight: 700; }
@media (max-width: 1199px) { .slip.slip-ouvert .slip-continuer { display: block; } }

/* Fond de l'en-tête : image publiée dans Admin › Images du site (emplacement « Fond de l'en-tête ») */
.header.has-image { background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Espace publicitaire en haut de l'accueil (04/10/2026) : une publicité visible à la fois, fondu entre deux ;
   hauteur limitée pour que les matchs restent visibles sans faire défiler. Seulement sur l'accueil. */
.pub-haut:not([hidden]) { position: relative; display: block; background: var(--green-950); padding: 10px 45px 14px; }
body[data-vue]:not([data-vue="hippique"]) .pub-haut { display: none; }
.pub-label { position: absolute; top: 12px; right: 51px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 6px; border-radius: 3px; }
.pub-piste { display: grid; max-width: 1400px; margin: 0 auto; }
.pub-item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; display: flex; justify-content: center; }
.pub-item.on { opacity: 1; visibility: visible; }
.pub-item img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: 6px; }
.pub-piste { position: relative; }
/* Points posés sur l'image, en bas au centre (modèle du propriétaire) : cercles blancs, celui de la pub affichée plein */
.pub-points { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.pub-points:empty { display: none; }
.pub-points button { pointer-events: auto; width: 14px; height: 14px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: rgba(0, 0, 0, .15); cursor: pointer; box-shadow: 0 0 3px rgba(0, 0, 0, .5); }
.pub-points button.on { background: #fff; }
@media (max-width: 900px) {
  .pub-haut:not([hidden]) { padding: 8px 16px 10px; }
  .pub-points { bottom: 6px; gap: 8px; }
  .pub-points button { width: 11px; height: 11px; }
  .pub-label { top: 10px; right: 22px; }
  .pub-item img { max-height: 140px; }
}