/* ==========================================================================
   ROYAL216 — Sportsbook & Casino  ·  design system (dark, sportsbook style)
   ========================================================================== */
:root{
  /* Palette relevée au pixel sur la maquette de référence (2XBet216) */
  --bg:#102d42; --bg2:#0c2435; --panel:#153852; --panel2:#1a4260;
  --elev:#1a4260; --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.18);
  --accent:#51a1dc; --accent-d:#3a8bc7; --accent-glow:rgba(81,161,220,.35);
  --gold:#f2c743; --gold-d:#d9a800; --red:#e11b22; --blue:#51a1dc;
  --slate:#23323b; --lite:#eeeeee; --lite2:#cecdcd;
  --text:#ffffff; --muted:#9fb3c2; --muted2:#6b8296;
  --odd:#cecdcd; --odd-h:#bdbcbc;
  --radius:12px; --radius-sm:8px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --header-h:60px; --topbar-h:30px;
  --maxw:1440px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font);background:var(--bg);
  color:var(--text);min-height:100vh;font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:0;overflow-x:hidden;max-width:100vw;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.hide{display:none!important}

/* --- Topbar ------------------------------------------------------------- */
.topbar{height:var(--topbar-h);background:#070b16;border-bottom:1px solid var(--border);
  font-size:12px;color:var(--muted)}
.topbar .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar .t-links{display:flex;gap:18px;align-items:center}
.topbar .t-links a:hover{color:var(--text)}
.badge-18{background:var(--red);color:#fff;border-radius:50%;width:18px;height:18px;
  display:inline-grid;place-items:center;font-weight:800;font-size:9px}

/* --- Header ------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:50;height:var(--header-h);
  background:linear-gradient(180deg,#0e1730,#0b1120);border-bottom:1px solid var(--border);
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.header .container{height:100%;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:.5px}
.brand .logo{height:44px;width:auto}
.brand b{color:var(--accent)}
.brand .b216{color:var(--gold)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 14px;border-radius:8px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:7px;font-size:13px;transition:.15s;white-space:nowrap}
.nav a .i{font-size:15px}
.nav a:hover{color:var(--text);background:var(--elev)}
.nav a.active{color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-d));
  box-shadow:0 6px 16px var(--accent-glow)}
.nav a.live-tab .dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px rgba(255,77,85,.25);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.header .spacer{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);
  border-radius:20px;padding:7px 14px;color:var(--muted);min-width:180px}
.search input{background:none;border:none;color:var(--text);outline:none;width:100%;font-size:13px}
.auth-btns{display:flex;gap:8px;align-items:center}
.btn{padding:8px 16px;border-radius:8px;font-weight:800;font-size:13px;transition:.15s;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn-ghost{color:var(--text);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--elev);border-color:var(--accent)}
.btn-primary{background:linear-gradient(180deg,var(--gold),var(--accent));color:#1a1405;
  box-shadow:0 6px 16px var(--accent-glow)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-gold{background:linear-gradient(180deg,#5fcef5,var(--gold));color:#042033}
.btn-gold:hover{filter:brightness(1.05)}
.btn-block{width:100%;justify-content:center;padding:12px}
.wallet{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--border);
  border-radius:10px;padding:5px 6px 5px 14px}
.wallet .bal{font-weight:800;color:var(--gold)}
.wallet .sub{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#7a0f14);
  display:grid;place-items:center;font-weight:900;color:#fff}

/* --- Page grid ---------------------------------------------------------- */
.layout{display:grid;grid-template-columns:260px 1fr 340px;gap:16px;padding:18px 0;align-items:start}
.layout.no-right{grid-template-columns:260px 1fr}
.layout.full{grid-template-columns:1fr}
.col-sticky{position:sticky;top:calc(var(--header-h) + 14px)}

/* --- Panels ------------------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.panel-h{padding:12px 14px;font-weight:800;font-size:13px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);background:var(--panel2)}
.panel-h .i{color:var(--accent)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 12px}
.section-title h2{font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px}
.section-title a{color:var(--accent);font-size:12px;font-weight:700}
.chip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;background:var(--elev);color:var(--muted)}
.chip.live{background:rgba(255,77,85,.15);color:#ff8086}

/* --- Sidebar (sports) --------------------------------------------------- */
.side .item{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--bg2);
  color:var(--muted);font-weight:600;transition:.12s;cursor:pointer}
.side .item:last-child{border-bottom:none}
.side .item:hover{background:var(--elev);color:var(--text)}
.side .item .i{width:22px;text-align:center;font-size:16px}
.side .item .n{flex:1}
.side .item .c{font-size:11px;color:var(--muted2);background:var(--panel2);padding:1px 8px;border-radius:20px}
.side .item.on{color:#fff;background:linear-gradient(90deg,rgba(22,177,107,.18),transparent);
  border-left:3px solid var(--accent)}

/* --- Promo carousel ----------------------------------------------------- */
.promo{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:18px}
.promo .hero{position:relative;border-radius:16px;overflow:hidden;min-height:220px;border:1px solid var(--border)}
.promo .hero img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.promo .hero .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,22,.9),rgba(7,11,22,.1));
  padding:26px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.promo .hero h1{font-size:30px;font-weight:900;max-width:60%;line-height:1.1}
.promo .hero p{color:var(--muted);max-width:55%}
.promo .side-promos{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.promo .mini{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);min-height:103px}
.promo .mini img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.promo .mini .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(7,11,22,.85));
  display:flex;align-items:flex-end;padding:12px;font-weight:800}

/* --- Match rows --------------------------------------------------------- */
.league-h{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--panel2);
  border-bottom:1px solid var(--border);font-weight:800;font-size:12.5px}
.league-h .flag{font-size:15px}
.league-h .cols{margin-left:auto;display:flex;gap:8px}
.league-h .cols span{width:62px;text-align:center;color:var(--muted);font-size:11px}
.event{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bg2);transition:.12s}
.event:last-child{border-bottom:none}
.event:hover{background:var(--panel2)}
.event .time{width:52px;font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.event .time .live{color:var(--red);font-weight:800}
.event .teams{flex:1;min-width:0}
.event .teams .t{display:flex;align-items:center;gap:8px;padding:2px 0;font-weight:600}
.event .teams .t .sc{margin-left:auto;font-weight:800;color:var(--gold)}
.event .odds{display:flex;gap:8px}
.odd{width:62px;height:46px;border-radius:9px;background:var(--odd);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.12s;cursor:pointer}
.odd .lab{font-size:9px;color:var(--muted2);text-transform:uppercase}
.odd .val{font-weight:800;color:var(--text);font-size:14px}
.odd:hover{background:var(--odd-h);border-color:var(--accent);transform:translateY(-1px)}
.odd.sel{background:linear-gradient(180deg,var(--accent),var(--accent-d));border-color:var(--accent)}
.odd.sel .val,.odd.sel .lab{color:#fff}
.event .more{color:var(--muted);font-size:11px;padding-left:4px;white-space:nowrap}
.event .more b{color:var(--accent)}

/* --- Bet slip ----------------------------------------------------------- */
.slip-tabs{display:flex}
.slip-tabs button{flex:1;padding:11px;font-weight:800;font-size:12.5px;color:var(--muted);
  border-bottom:2px solid transparent}
.slip-tabs button.on{color:#fff;border-bottom-color:var(--accent)}
.slip-empty{padding:34px 18px;text-align:center;color:var(--muted)}
.slip-empty .ic{font-size:34px;margin-bottom:10px;opacity:.5}
.slip-list{max-height:40vh;overflow:auto}
.slip-item{padding:12px 14px;border-bottom:1px solid var(--bg2)}
.slip-item .top{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.slip-item .pick{font-weight:800}
.slip-item .match{color:var(--muted);font-size:11px;margin:3px 0}
.slip-item .o{color:var(--gold);font-weight:800}
.slip-item .rm{color:var(--muted2);font-size:16px;line-height:1}
.slip-item .rm:hover{color:var(--red)}
.slip-foot{padding:14px;border-top:1px solid var(--border);background:var(--panel2)}
.stake{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);
  border-radius:9px;padding:8px 12px;margin-bottom:10px}
.stake input{background:none;border:none;color:var(--text);outline:none;width:100%;font-size:16px;font-weight:800}
.stake .cur{color:var(--muted);font-weight:800}
.slip-row{display:flex;justify-content:space-between;margin:6px 0;font-size:13px}
.slip-row.tot{font-size:16px;font-weight:900}
.slip-row.tot .v{color:var(--gold)}
.quickstakes{display:flex;gap:6px;margin-bottom:10px}
.quickstakes button{flex:1;padding:7px;border-radius:7px;background:var(--elev);border:1px solid var(--border);
  font-weight:700;font-size:12px}
.quickstakes button:hover{border-color:var(--accent);color:var(--accent)}

/* --- Casino ------------------------------------------------------------- */
/* (anciennes règles .cat-tabs supprimées : elles forçaient flex-wrap:wrap et
   faisaient passer les onglets catégories à la ligne. Voir la section
   « Casino — maquette de référence » plus bas.) */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.games.games-live{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.games.games-live .game{aspect-ratio:auto;background:var(--panel);padding:8px 8px 0;display:flex;flex-direction:column}
.games.games-live .game img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:10px}
.games.games-live .game:hover img{transform:none}
.games.games-live .game .label{position:static;display:block;opacity:1;background:none;text-align:center;
  padding:11px 8px 13px;font-size:14px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.games.games-live .game:hover .label{opacity:1}
.games.games-live .game .ov{display:none}
.game{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--panel);aspect-ratio:3/4;transition:.18s;cursor:pointer}
.game img{width:100%;height:100%;object-fit:cover;transition:.3s}
.game:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.game:hover img{transform:scale(1.07)}
.game .tag{position:absolute;top:8px;left:8px;background:rgba(7,11,22,.8);color:#fff;font-size:10px;
  font-weight:800;padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px)}
.game .tag.hot{background:var(--red)}
.game .tag.new{background:var(--blue)}
.game .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,11,22,.95));
  opacity:0;transition:.18s;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;gap:9px}
.game:hover .ov{opacity:1}
.game .ov .name{font-weight:800;font-size:13px}
.game .ov .prov{color:var(--muted);font-size:11px}
.game .ov .play{align-self:center;margin-bottom:6px}
.game .label{position:absolute;bottom:0;left:0;right:0;padding:18px 10px 9px;font-size:12px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(7,11,22,.92));pointer-events:none}
.game:hover .label{opacity:0}
/* Badges contrôlés par le ROOT (Game Manager) : 🔥 populaire · NEW nouveau */
.game .g-flame{position:absolute;top:6px;right:6px;z-index:4;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#ff9a00,#ff5a00);display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;box-shadow:0 2px 7px rgba(0,0,0,.5)}
.game .g-new{position:absolute;top:0;left:0;z-index:4;background:var(--red,#e11b22);color:#fff;font-size:10px;
  font-weight:900;letter-spacing:.6px;padding:4px 9px;border-radius:0 0 9px 0;box-shadow:0 2px 5px rgba(0,0,0,.4)}

/* --- Forms / auth ------------------------------------------------------- */
.auth-wrap{max-width:420px;margin:48px auto;padding:0 16px}
.auth-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.auth-card h1{font-size:22px;margin-bottom:6px}
.auth-card .sub{color:var(--muted);margin-bottom:22px;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:9px;
  padding:12px 14px;color:var(--text);outline:none;font-size:16px;-webkit-user-select:text;user-select:text}
.field input:focus{border-color:var(--accent)}
.alert{padding:11px 14px;border-radius:9px;font-size:13px;margin-bottom:14px}
.alert.err{background:rgba(255,77,85,.12);border:1px solid rgba(255,77,85,.4);color:#ff9ba0}
.alert.ok{background:rgba(22,177,107,.12);border:1px solid rgba(22,177,107,.4);color:#6fe0a8}
.form-foot{text-align:center;margin-top:16px;color:var(--muted);font-size:13px}
.form-foot a{color:var(--accent);font-weight:700}

/* --- Account ------------------------------------------------------------ */
.acct-grid{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:18px 0;align-items:start}
.acct-menu a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--bg2);
  color:var(--muted);font-weight:700}
.acct-menu a.on,.acct-menu a:hover{color:#fff;background:var(--elev)}
.balance-card{background:linear-gradient(135deg,#0e3550,#155b82 55%,#0a2234);border:1px solid var(--gold-d);
  border-radius:16px;padding:22px;position:relative;overflow:hidden}
.balance-card::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,192,33,.25),transparent 70%)}
.balance-card .lab{color:#bdeccf;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.balance-card .amt{font-size:38px;font-weight:900;margin:6px 0}
.balance-card .amt small{font-size:18px;color:#bdeccf}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.stat .lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-size:22px;font-weight:900;margin-top:4px}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;padding:11px 14px;color:var(--muted);font-size:11px;text-transform:uppercase;
  border-bottom:1px solid var(--border);background:var(--panel2)}
table.data td{padding:11px 14px;border-bottom:1px solid var(--bg2)}
.pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}
.pill.win{background:rgba(22,177,107,.15);color:#6fe0a8}
.pill.lose{background:rgba(255,77,85,.15);color:#ff9ba0}
.pill.pend{background:rgba(255,192,33,.15);color:#ffd873}

/* --- Game play ---------------------------------------------------------- */
.play-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;padding:18px 0;align-items:start}
.play-stage{background:#06090f;border:1px solid var(--border);border-radius:16px;overflow:hidden;position:relative;min-height:460px;display:grid;place-items:center}
.play-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.4)}
.play-stage .center{position:relative;text-align:center;padding:30px}
.play-stage .center .cover{width:180px;border-radius:14px;margin:0 auto 18px;box-shadow:var(--shadow)}

/* --- Footer ------------------------------------------------------------- */
.footer{border-top:1px solid var(--border);margin-top:30px;background:#070b16}
.footer .container{padding:28px 16px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;margin-bottom:22px}
.foot-grid h4{font-size:13px;margin-bottom:12px}
.foot-grid a{display:block;color:var(--muted);padding:4px 0;font-size:13px}
.foot-grid a:hover{color:var(--text)}
.providers{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--muted);font-weight:800;opacity:.7}
.foot-bottom{border-top:1px solid var(--border);padding-top:18px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--muted2);font-size:12px}

/* --- Mobile bottom nav -------------------------------------------------- */
.mobnav{position:fixed;bottom:0;left:0;right:0;height:60px;background:#0a1120;border-top:1px solid var(--border);
  display:none;z-index:60}
.mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:10px;font-weight:700}
.mobnav a .i{font-size:19px}
.mobnav a.active{color:var(--accent)}
.mobnav a .cnt{position:absolute;top:8px;background:var(--red);color:#fff;border-radius:10px;
  font-size:9px;padding:0 5px;transform:translateX(14px)}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:1180px){
  .layout{grid-template-columns:1fr 330px}
  .side-col{display:none}
}
@media(max-width:900px){
  .nav{display:none}
  .search{display:none}
  .layout,.layout.no-right{grid-template-columns:1fr}
  .right-col{display:none}
  .promo{grid-template-columns:1fr}
  .promo .side-promos{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .acct-grid{grid-template-columns:1fr}
  .play-wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .mobnav{display:flex}
  body{padding-bottom:70px}
}
@media(max-width:560px){
  .container{padding:0 12px}
  .header .container{gap:10px}
  .brand .txt{display:none}
  .topbar .t-links a{display:none}
  .only-desktop{display:none!important}
  .promo .hero h1{font-size:21px;max-width:100%}
  .promo .hero p{max-width:100%;font-size:12px}
  .promo .hero .ov{padding:18px}
  .games{grid-template-columns:repeat(2,1fr);gap:10px}
  .auth-btns{gap:6px}
  .auth-btns .btn{padding:8px 12px;font-size:12px}
  .wallet{padding:4px 8px}
  .wallet .sub{display:none}
  /* Lignes de match compactes */
  .event{gap:7px;padding:10px 11px}
  .event .time{width:38px;font-size:10px}
  .event .teams .t{font-size:12.5px}
  .event .more{display:none}
  .odd{width:47px;height:42px}
  .odd .val{font-size:13px}
  .league-h{padding:10px 11px;font-size:12px}
  .league-h .cols span{width:47px}
  .section-title h2{font-size:15px}
  /* Casino hero plus court */
  .cat-tabs button{padding:8px 13px;font-size:12px}
}
/* --- Slip drawer (mobile) ---------------------------------------------- */
.slip-drawer{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:none;align-items:flex-end}
.slip-drawer.open{display:flex}
.slip-drawer .panel{width:100%;max-height:85vh;overflow:auto;border-radius:16px 16px 0 0}

/* --- Correctifs mobile renforcés (anti-débordement) -------------------- */
@media(max-width:900px){
  body,.container,.layout,main{max-width:100vw}
  .layout,.layout.no-right,.layout.full{display:block!important}
  .layout>main{width:100%}
  .right-col,.side-col{display:none!important}
}
@media(max-width:600px){
  .event{display:grid!important;grid-template-columns:36px minmax(0,1fr) auto;column-gap:8px;align-items:center}
  .event .time{width:auto}
  .event .odds{gap:6px}
  .odd{width:46px;height:42px}
  .event .more{display:none!important}
  .league-h .cols span{width:46px}
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===================== THÈME 2XBet216 — OR / NOIR / BLANC ===================== */
.container{max-width:1200px}

/* En-tête 1 : menu · logo · login */
.site-header{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--bg);border-bottom:1px solid var(--accent)}
.menu-btn{width:46px;height:46px;border-radius:8px;background:var(--panel2);border:none;
  color:#fff;font-size:22px;display:grid;place-items:center;cursor:pointer;transition:.15s;flex:0 0 auto}
.menu-btn:hover{filter:brightness(1.25)}
.site-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex}
.site-logo img{height:38px;width:auto}
.header-right{flex:0 0 auto;margin-left:auto}
.login-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:8px;font-weight:700;font-size:15px;
  background:var(--accent);border:none;color:#fff;cursor:pointer;transition:.15s;white-space:nowrap}
.login-btn:hover{background:var(--accent-d)}
.login-btn svg{width:15px;height:15px;fill:currentColor}

/* Drawer (menu ☰) — liste blanche, en-tête navy, barre langue en bas */
.drawer{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.25s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(100vw,440px);background:#fff;
  transform:translateX(-100%);transition:transform .25s;overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:8px 0 40px rgba(0,0,0,.45)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{position:relative;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg);flex:0 0 auto}
.drawer-head img{height:34px}
.drawer-close{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#fff;font-size:28px;line-height:1;cursor:pointer;background:none;border:none}
.drawer-title{text-align:center;color:var(--accent);font-weight:600;font-size:17px;padding:16px;background:#fff;
  border-bottom:3px solid #d9e6f2}
.drawer-item{display:block;padding:18px 22px;color:#1b1b1b;font-weight:700;font-size:17px;background:#fff;
  border-bottom:1px solid #e6e6e6;transition:.12s}
.drawer-item:hover{background:#f3f7fb}
.drawer-item.active{background:var(--accent);color:#fff}
.drawer-lang{margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:14px 18px;background:var(--bg);color:#fff;font-size:15px;flex:0 0 auto}
.drawer-lang .gift{width:38px;height:38px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.drawer-lang .gift svg{width:20px;height:20px;fill:#1b1b1b}
.drawer-lang .flag{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto}
.drawer-lang .caret{opacity:.85;font-size:11px}
/* Sélecteur de langue (anglais / français) */
.lang-pick{position:relative}
.lang-cur{display:flex;align-items:center;gap:10px;background:none;border:none;color:#fff;
  font-size:15px;font-family:inherit;cursor:pointer;padding:4px 2px}
.lang-menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:190px;background:#fff;
  border-radius:8px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:5}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:13px 15px;color:#1b1b1b;
  font-size:15px;font-weight:600;border-bottom:1px solid #ececec}
.lang-menu a:last-child{border-bottom:none}
.lang-menu a:hover{background:#f2f6fa}
.lang-menu a.on{background:var(--accent);color:#fff}

/* En-tête 2 : slides + vidéo */
.promo-band{background:#0d0d10;border-bottom:1px solid var(--border);padding:16px 0}
.slider{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border2);height:clamp(100px,22vw,170px);background:#000}
.slide{position:absolute;inset:0}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .cap{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),transparent 70%);
  display:flex;flex-direction:column;justify-content:center;padding:6%}
.slide .cap .big{color:var(--gold);font-size:clamp(22px,4vw,44px);font-weight:900}
.slide .cap h2{font-size:clamp(16px,2.5vw,26px);font-weight:800;max-width:60%}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--gold-d);color:var(--gold);font-size:22px;cursor:pointer;z-index:2}
.slider-arrow.left{left:10px}.slider-arrow.right{right:10px}
.slider-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:2}
.slider-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s}
.slider-dots span.on{background:var(--gold);width:22px;border-radius:6px}
.video-box{margin-top:14px;border-radius:14px;border:1px dashed var(--gold-d);background:#0e0e11;aspect-ratio:16/7;display:grid;place-items:center}
.video-ph{text-align:center;color:var(--muted)}
.video-ph .pl{width:60px;height:60px;border-radius:50%;background:rgba(31,166,224,.12);border:1px solid var(--gold-d);
  color:var(--gold);font-size:24px;display:grid;place-items:center;margin:0 auto 12px}

/* Corps (réservé à l'iframe sportsbook) */
.sb-placeholder{min-height:46vh;margin:20px 0;border:2px dashed var(--border2);border-radius:16px;display:grid;place-items:center;
  text-align:center;background:repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 12px,transparent 12px 24px),var(--panel)}
.sb-placeholder .ic{font-size:44px;margin-bottom:12px}
.sb-placeholder h2{font-size:20px}
.sb-placeholder p{color:var(--muted);margin-top:6px}
.sb-placeholder .tag{margin-top:14px;display:inline-block;padding:6px 14px;border-radius:20px;background:rgba(31,166,224,.12);
  border:1px solid var(--gold-d);color:var(--gold);font-weight:700;font-size:12px}

/* Footer — maquette de référence : logo · 2 liens · fournisseurs or · WhatsApp · 18+ */
.site-footer{background:var(--bg);border-top:1px solid var(--border);padding:28px 16px 0;text-align:center;margin-top:0}
.foot-logo img{height:44px;margin:0 auto 24px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 44px;max-width:720px;margin:0 auto 30px}
.foot-links a{color:#c7ced6;font-weight:700;font-size:15px}
.foot-links a:hover{color:#fff}
.foot-providers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 34px;padding:4px 0 26px;margin-bottom:0}
.foot-providers img{height:25px;width:auto;object-fit:contain;opacity:.95}
.foot-providers img[alt="Playson"]{height:22px}
.foot-providers img[alt="Pragmatic Play"]{height:30px}
.foot-providers span{color:var(--gold);font-weight:800;letter-spacing:.6px;font-size:13px;opacity:.95;white-space:nowrap}
.foot-social{display:flex;justify-content:center;gap:14px;margin-bottom:26px}
.foot-social a{width:34px;height:34px;display:grid;place-items:center;color:#25d366}
.foot-social a:hover{filter:brightness(1.2)}
.foot-social svg{width:30px;height:30px;fill:currentColor}
.foot-copy{margin:0 -16px;padding:22px 16px 26px;background:#14364d;color:#9fb3c2;font-size:13px;line-height:1.55}
.foot-copy .b18{display:block;width:86px;height:86px;margin:0 auto 14px}
.foot-copy-l{margin-top:6px;line-height:1.5}
.foot-copy-l b{color:#fff}

@media(max-width:600px){
  .site-logo img{height:34px}
  .login-btn{padding:7px 11px;font-size:12px}
  .slider{height:clamp(90px,26vw,130px)}
  .foot-links{gap:10px 18px}
}

[x-cloak]{display:none!important}

/* Connexion : panneau glissant depuis la droite (maquette de référence) */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:120;display:flex;align-items:stretch;justify-content:flex-end;padding:0}
.modal-card{position:relative;width:min(62vw,440px);min-width:320px;background:var(--bg);border:none;border-radius:0;
  padding:26px 22px;box-shadow:-10px 0 40px rgba(0,0,0,.45);overflow-y:auto}
.modal-top{display:flex;align-items:center;justify-content:flex-end;margin-bottom:10px;min-height:28px}
.modal-top img{display:none}
.modal-top button{color:#fff;font-size:30px;line-height:1;background:none;border:none;cursor:pointer;z-index:2;padding:0 2px}
.modal-card h2{display:none}
.modal-card .field label{color:#fff;font-size:17px;font-weight:400;margin-bottom:8px;text-transform:none}
.modal-card .field label .req{color:var(--gold)}
.modal-card .field input{background:#fff;border:none;border-radius:6px;color:#1b1b1b;font-size:16px;padding:15px 14px 15px 46px;height:54px}
.modal-card .field input::placeholder{color:#9aa3ab}
.modal-card .field{margin-bottom:18px;position:relative}
.modal-card .field .fico{position:absolute;left:14px;bottom:17px;width:20px;height:20px;fill:#5b6670;pointer-events:none}
.modal-card .btn-login{width:100%;background:var(--accent);color:#fff;border:none;border-radius:6px;
  padding:16px;font-size:18px;font-weight:600;cursor:pointer;transition:.15s}
.modal-card .btn-login:hover{background:var(--accent-d)}
.modal-card .btn-register{display:block;width:100%;text-align:center;background:var(--gold);color:#1b1b1b;
  border:none;border-radius:6px;padding:16px;font-size:18px;font-weight:700;cursor:pointer;margin-top:14px;transition:.15s}
.modal-card .btn-register:hover{filter:brightness(1.05)}
/* Premier accès (changement de mot de passe obligatoire) */
.modal-card .fc-intro{color:#c7ced6;font-size:15px;line-height:1.5;margin:0 0 18px}
.modal-card .pw-eye{position:absolute;right:14px;bottom:15px;background:none;border:0;padding:0;cursor:pointer;line-height:0}
.modal-card .pw-eye svg{width:22px;height:22px;fill:#5b6670}
.modal-card .btn-ghost-block{width:100%;margin-top:12px;background:transparent;border:1px solid rgba(255,255,255,.22);
  color:#cfd6dd;border-radius:6px;padding:15px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer}
.modal-card .btn-ghost-block:hover{background:rgba(255,255,255,.06)}
.pwd-hint{display:block;font-size:12.5px;line-height:1.55;margin-top:8px;font-weight:400;
  text-transform:none;letter-spacing:0;color:#c7ced6}
.pwd-hint b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.5px;color:#fff}
.pwd-hint-list{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:4px}

.modal-card .forgot-link{display:inline-block;margin-top:16px;color:#c7ced6;font-size:15px;background:none;border:none;cursor:pointer;padding:0}
.modal-card .forgot-link:hover{color:#fff}
@media(max-width:560px){ .modal-card{width:min(86vw,420px)} }

/* ===== Espace joueur (My account, Change Password, Transactions, …) ===== */
.pa-wrap{max-width:900px;margin:0 auto;padding:26px 14px 40px}
.pa-card{background:#ededed;border-radius:14px;padding:28px 22px 32px;color:#1b1b1b}
.pa-title{font-size:38px;line-height:1.15;font-weight:700;margin:0 0 26px;color:#1b1b1b}
.pa-box{background:#fff;border-radius:10px;padding:20px 18px;margin:0 0 16px}
.pa-field{margin:0 0 18px}
.pa-field:last-child{margin-bottom:0}
.pa-field > label{display:block;font-size:17px;color:#1b1b1b;margin:0 0 7px}
.pa-field .req{color:var(--gold-d)}
.pa-field input,.pa-field select{width:100%;height:50px;padding:0 14px;border:1px solid #cfcfcf;border-radius:4px;
  background:#fff;color:#1b1b1b;font-size:16px;font-family:inherit;outline:none}
.pa-field input:focus{border-color:var(--accent)}
.pa-field input:disabled{background:#f5f5f5;color:#8a8f96}
.pa-inline{display:flex;gap:10px;align-items:stretch}
.pa-inline input{flex:1 1 auto;min-width:0}
.pa-verify{flex:0 0 auto;background:var(--gold);border:none;border-radius:4px;padding:0 22px;
  font-size:16px;font-weight:700;font-family:inherit;color:#1b1b1b;cursor:pointer}
.pa-verify:hover{filter:brightness(1.05)}
.pa-check{display:flex;align-items:flex-start;gap:12px;margin:4px 0 20px;font-size:16px;line-height:1.5;cursor:pointer}
.pa-check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.pa-submit{width:100%;background:var(--gold);color:#1b1b1b;border:none;border-radius:4px;padding:16px;
  font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;transition:.12s}
.pa-submit:hover:not(:disabled){filter:brightness(1.05)}
.pa-submit:disabled{background:#cfcfcf;color:#8a8f96;cursor:default}
.pa-submit.grey{background:#cfcfcf;color:#6b7278}
.pa-submit.grey:not(:disabled){background:var(--gold);color:#1b1b1b}
.pa-msg{margin:4px 0 12px;font-weight:600;font-size:15px}
.pa-msg.ok{color:#15803d}
.pa-msg.err{color:#b91c1c}

/* Mot de passe */
.pa-pw-wrap{position:relative;display:block}
.pa-pw-wrap input{padding-left:46px;padding-right:76px}
.pa-pw-wrap .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:21px;height:21px;fill:#5b6670;pointer-events:none}
.pa-pw-wrap .info{position:absolute;right:46px;top:50%;transform:translateY(-50%);cursor:help;line-height:0}
.pa-pw-wrap .info svg{width:21px;height:21px;fill:#8b9298}
.pa-pw-wrap .eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:0;padding:0;cursor:pointer;line-height:0}
.pa-pw-wrap .eye svg{width:22px;height:22px;fill:#4a5157}
.pa-pw .pwd-hint{color:#5b6670}
.pa-pw .pwd-hint b{color:#1b1b1b}
.pa-pw-actions{display:flex;gap:14px;align-items:center;margin-top:8px}
.pa-pw-actions .pa-submit{flex:1 1 auto}
.pa-reset{flex:0 0 auto;background:#fff;border:1px solid var(--gold);color:var(--gold-d);border-radius:4px;
  padding:16px 30px;font-size:17px;font-weight:700;font-family:inherit;cursor:pointer}
.pa-reset:hover{background:#fffaf0}

/* Onglets (DEPOSIT / WITHDRAWAL · 7 DAYS / 30 DAYS / 12 MONTHS) */
.pa-tabs2{display:grid;grid-template-columns:1fr 1fr;margin:0 0 20px;background:#e0e0e0;border-radius:6px 6px 0 0;overflow:hidden}
.pa-tabs2.three{grid-template-columns:repeat(3,1fr)}
.pa-tabs2 button{background:#e0e0e0;border:none;padding:18px 8px;font-size:15px;font-weight:700;
  font-family:inherit;color:#7b848c;cursor:pointer;letter-spacing:.4px}
.pa-tabs2 button.on{background:#fff;color:#1b1b1b}

/* Filtres date + recherche */
.pa-filters{background:#fff;border-radius:10px;padding:20px 18px;margin:0 0 18px}
.pa-filters > label{display:block;font-size:17px;color:#1b1b1b;margin:0 0 16px}
.pa-filters > label input{display:block;width:100%;height:50px;margin-top:7px;padding:0 14px;
  border:1px solid #cfcfcf;border-radius:4px;font-size:16px;font-family:inherit;outline:none}
.pa-filter-lbl{display:block;font-size:17px;margin:0 0 8px}
.pa-filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pa-filter-row input{flex:1 1 180px;min-width:0;height:48px;padding:0 14px;border:1px solid #cfcfcf;
  border-radius:4px;font-size:16px;font-family:inherit;outline:none}
.pa-filter-row button{flex:0 0 auto;height:48px;padding:0 24px;background:#ededed;border:1px solid #cfcfcf;
  border-radius:4px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;color:#1b1b1b}
.pa-filter-row button:hover{background:#e3e3e3}

/* Tableaux (en-tête or) */
.pa-table-wrap{overflow-x:auto;background:#fff;border-radius:4px}
.pa-table{width:100%;border-collapse:collapse;font-size:15px}
.pa-table th{background:var(--gold);color:#1b1b1b;font-weight:700;text-align:left;padding:16px 14px;
  white-space:nowrap;border-right:1px solid rgba(0,0,0,.18)}
.pa-table th:last-child{border-right:none}
.pa-table td{padding:14px;border-bottom:1px solid #ececec;color:#1b1b1b;white-space:nowrap}
.pa-table td.pos{color:#15803d;font-weight:700}
.pa-table td.neg{color:#b91c1c;font-weight:700}
.pa-empty{text-align:right;color:#7b848c;padding:22px 14px!important;white-space:normal}
.pa-count{margin:14px 2px 0;color:#7b848c;font-size:15px}

/* Interrupteurs « Include bonus » */
.pa-toggle{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:18px;color:#1b1b1b;cursor:pointer}
.pa-toggle input{position:absolute;opacity:0;width:0;height:0}
.pa-toggle .sw{position:relative;flex:0 0 auto;width:46px;height:24px;border-radius:999px;background:#b7bcc1;transition:.18s}
.pa-toggle .sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s}
.pa-toggle input:checked + .sw{background:var(--accent)}
.pa-toggle input:checked + .sw::after{transform:translateX(22px)}

/* Cartes statistiques « My Activity » */
.pa-stat{background:#e3e3e3;border-radius:8px;padding:18px;margin:16px 0}
.pa-stat-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pa-stat-name{font-size:19px;font-weight:700}
.pa-stat-val{font-size:19px;font-weight:700;white-space:nowrap}
.pa-stat-dates{display:flex;flex-direction:column;align-items:flex-end;color:#5b6670;font-size:14px;margin-top:2px}
.pa-stat-pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pa-stat-pills div{background:#fff;border-radius:999px;padding:12px 8px;text-align:center}
.pa-stat-pills b{display:block;font-size:17px;font-weight:700}
.pa-stat-pills span{display:block;color:#7b848c;font-size:14px;margin-top:2px}

@media(max-width:600px){
  .pa-wrap{padding:16px 10px 30px}
  .pa-card{padding:22px 16px 26px;border-radius:12px}
  .pa-title{font-size:30px;margin-bottom:20px}
  .pa-field > label,.pa-filters > label{font-size:16px}
  .pa-pw-actions{flex-direction:column;align-items:stretch}
  .pa-reset{padding:15px}
}

/* ===== Pages légales (Terms & Conditions) ===== */
.legal-wrap{max-width:1000px;margin:0 auto;padding:28px 16px 40px}
.legal-card{background:#fff;color:#1b1b1b;border-radius:3px;padding:44px 34px 48px}
.legal-title{display:flex;align-items:flex-start;gap:18px;font-size:34px;line-height:1.25;font-weight:700;
  color:#1b1b1b;margin:0 0 26px}
.legal-mark{display:inline-flex;gap:7px;flex:0 0 auto;margin-top:4px}
.legal-mark i{display:block;width:13px;height:48px;background:var(--gold);transform:skewX(-13deg)}
.legal-mark i:last-child{width:38px;background:#f7e3a1}
.legal-toc{display:flex;flex-direction:column;gap:11px;margin:0 0 30px}
.legal-toc a{color:#3f72a5;font-size:19px;line-height:1.35}
.legal-toc a:hover{text-decoration:underline}
.legal-card h2{font-size:21px;font-weight:700;margin:30px 0 16px;line-height:1.35;scroll-margin-top:80px}
.legal-card h3{font-size:18px;font-weight:700;margin:24px 0 12px}
.legal-card p{font-size:17px;line-height:1.62;margin:0 0 17px;color:#1b1b1b}
.legal-card ul{margin:0 0 17px;padding-left:20px}
.legal-card li{font-size:17px;line-height:1.62;margin-bottom:9px;list-style:none;position:relative}
.legal-card li::before{content:"-";position:absolute;left:-16px;color:#1b1b1b}
.legal-card b{font-weight:700}
@media(max-width:600px){
  .legal-wrap{padding:18px 12px 30px}
  .legal-card{padding:30px 22px 34px}
  .legal-title{font-size:27px;gap:14px}
  .legal-mark i{height:40px;width:11px}
  .legal-mark i:last-child{width:31px}
  .legal-toc a{font-size:17px}
  .legal-card p,.legal-card li{font-size:16px}
}

/* ===== Inscription (page Register) ===== */
.reg-card{max-width:720px;margin:0 auto}
.reg-note{font-size:17px;color:#1b1b1b;margin:0 0 22px}
.reg-field{margin:0 0 18px}
.reg-field > label{display:block;font-size:17px;color:#1b1b1b;margin:0 0 7px}
.reg-field .req,.reg-check .req{color:var(--gold-d);font-style:normal}
.reg-input{position:relative;display:block}
.reg-input input,.reg-input select{width:100%;height:54px;padding:0 44px 0 48px;border:1px solid #cfcfcf;
  border-radius:4px;background:#fff;color:#1b1b1b;font-size:17px;font-family:inherit;outline:none;appearance:none}
.reg-input input.no-ico,.reg-input select.no-ico{padding-left:16px}
.reg-input input:focus,.reg-input select:focus{border-color:var(--accent)}
.reg-input input::placeholder{color:#9aa3ab}
.reg-input .fico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:21px;height:21px;
  fill:#6b7278;pointer-events:none}
.reg-input .fico.info{left:auto;right:46px;pointer-events:auto;cursor:help;fill:#8b9298}
.reg-input .eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;
  padding:0;line-height:0;cursor:pointer}
.reg-input .eye svg{width:23px;height:23px;fill:#4a5157}
/* Le champ mot de passe porte l'icône (i) à droite : pas d'icône à gauche */
.reg-field .reg-input:has(.fico.info) input{padding-left:16px}
.reg-input select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6670'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-position:calc(100% - 12px) 50%;background-size:24px 24px;background-repeat:no-repeat}
.reg-sep{border:none;border-top:1px solid #e0e0e0;margin:26px 0}
.reg-check{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;font-size:16px;line-height:1.5;color:#1b1b1b;cursor:pointer}
.reg-check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.reg-check a{color:#3f72a5;text-decoration:underline}
.reg-submit{width:100%;margin-top:12px;background:var(--gold);color:#1b1b1b;border:none;border-radius:4px;
  padding:16px;font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;transition:.12s}
.reg-submit:hover{filter:brightness(1.05)}
.reg-submit:disabled{opacity:.65;cursor:default}
@media(max-width:600px){
  .reg-note,.reg-field > label{font-size:16px}
  .reg-input input,.reg-input select{height:50px;font-size:16px}
}

/* ===== Bandeau promo (accueil) : fondu enchaîné + flèches or rondes ===== */
.promo-strip{position:relative;display:block;width:100%;line-height:0;
  border-top:1px solid var(--accent);background:var(--bg)}
.ps-track{position:relative;width:100%;aspect-ratio:1920/250;overflow:hidden}
.ps-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease-in-out;pointer-events:none}
.ps-slide.on{opacity:1}
.ps-arrow{position:absolute;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:50%;
  background:var(--gold);border:none;cursor:pointer;z-index:2;display:grid;place-items:center;padding:0}
.ps-arrow svg{width:26px;height:26px;fill:#111;display:block}
.ps-arrow:hover{filter:brightness(1.07)}
.ps-arrow.left{left:-16px}
.ps-arrow.right{right:-16px}
@media(max-width:600px){
  .ps-arrow{width:46px;height:46px}
  .ps-arrow svg{width:21px;height:21px}
  .ps-arrow.left{left:-12px}
  .ps-arrow.right{right:-12px}
}

/* Emplacement sportsbook laissé libre (iframe retirée) */
.sb-slot{display:block;width:100%;background:var(--bg);padding:26px 14px 40px}
.sb-slot-inner{max-width:900px;margin:0 auto;min-height:46vh;border-radius:12px;background:var(--slate);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px}
.sb-slot-title{color:#fff;font-size:20px;font-weight:700;margin:0}
.sb-slot-text{color:#9fb3c2;font-size:15px;margin:0}

/* ===== Sportsbook iframe (flexrix/Altenar) ===== */
.sb-wrap{width:100%;background:#0b1118}
.sb-frame{display:block;width:100%;height:calc(100vh - 60px);min-height:600px;border:0}

/* App-shell (type mbets216) : le header reste COLLANT en haut (donc toujours
   accessible, et le logo — en position:absolute — garde son header positionné).
   Le bandeau promo défile et DISPARAÎT quand on descend. Le sportsbook est
   collant et remplit le viewport sous le header : le bouton "Betslip" d'Altenar
   (position:fixed DANS l'iframe) se cale alors sur le bas réel de l'écran. */
/* Pages sportsbook (accueil + live) : la PAGE défile normalement.
   Header collant en haut (menu toujours accessible, logo centré), bandeau promo
   qui défile et DISPARAÎT quand on descend, sportsbook en pleine hauteur sous le
   header, puis le FOOTER en bas (atteignable en continuant à défiler). */
body.sb-page .sb-frame{height:calc(100vh - 64px);height:calc(100dvh - 64px);min-height:520px}
body.sb-page .promo-band{padding:10px 0}

/* Mode immersif (pages sportsbook) : en descendant, l'en-tête glisse vers le
   haut et le bandeau promo s'efface — le sportsbook occupe alors tout l'écran.
   En remontant (ou en haut de page), tout revient. */
body.sb-page .site-header{transition:transform .38s ease, opacity .38s ease}
body.sb-page .promo-strip{transition:opacity .38s ease}
body.sb-page .sb-frame{transition:height .38s ease}
body.sb-page.hdr-off .site-header{transform:translateY(-100%);opacity:0;pointer-events:none}
body.sb-page.hdr-off .promo-strip{opacity:0;pointer-events:none}
body.sb-page.hdr-off .sb-frame{height:100vh;height:100dvh}
/* Le fournisseur nous a envoyé sa hauteur : c'est la page qui défile, on ne
   force plus la hauteur du viewport sur l'iframe. */
body.sb-page.sb-autoheight .sb-frame,
body.sb-page.sb-autoheight.hdr-off .sb-frame{height:auto;min-height:0;transition:none}
@media(prefers-reduced-motion:reduce){
  body.sb-page .site-header,body.sb-page .promo-strip,body.sb-page .sb-frame{transition:none}
}

/* ===== Casino — maquette de référence (onglets or/bleu, tri, filtres, grille) ===== */
/* Bandeau pleine largeur (sort des marges du .container, comme la maquette) */
.casino-banner{display:block;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);margin-bottom:16px;height:auto;border-top:1px solid var(--accent)}
.cat-wrap{position:relative;display:flex;align-items:center;gap:4px;margin:0 0 18px;min-width:0}
.cat-arrow{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:#fff;background:none;
  border:none;font-size:24px;line-height:1;cursor:pointer;opacity:.9}
.cat-arrow:hover{opacity:1}
.cat-tabs{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;scroll-behavior:smooth;
  padding:0;margin:0;-webkit-overflow-scrolling:touch}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs{scrollbar-width:none}
.cat-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-width:148px;height:70px;padding:0 20px;border-radius:5px;background:#24557d;border:none;color:#fff;
  font-weight:700;font-size:17px;cursor:pointer;white-space:nowrap;transition:.12s}
.cat-tabs button:hover{filter:brightness(1.12)}
.cat-tabs button .ci{display:inline-flex;align-items:center}
.cat-tabs button svg{width:26px;height:26px;fill:currentColor;display:block}
.cat-tabs button.on{background:var(--gold);color:#1b1b1b}
.order-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin:0 0 18px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.order-row::-webkit-scrollbar{display:none}
.order-lbl{font-size:14px;font-weight:600;letter-spacing:.4px;color:#fff;margin-right:2px;
  flex:0 0 auto;white-space:nowrap}
.order-row button{flex:0 0 auto;white-space:nowrap;padding:11px 22px;border-radius:999px;background:#24557d;border:none;
  color:#fff;font-weight:600;font-size:16px;cursor:pointer;transition:.12s}
.order-row button:hover{filter:brightness(1.12)}
.order-row button.on{background:var(--gold);color:#1b1b1b}
.filter-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;margin:0 0 26px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-lbl{font-size:14px;font-weight:600;letter-spacing:.4px;color:#fff}
.casino-select,.casino-search{width:100%;padding:16px 16px;border:none;border-radius:6px;height:58px;
  background:#fff;color:#1b1b1b;font-size:17px;outline:none;appearance:none;-webkit-user-select:text;user-select:text}
.casino-select::placeholder,.casino-search::placeholder{color:#7b848c}
.casino-select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6670'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-position:calc(100% - 12px) 50%;background-size:26px 26px;background-repeat:no-repeat;padding-right:46px}
.casino-search{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6670'%3E%3Cpath d='M10 2a8 8 0 105.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
  background-position:16px 50%;background-size:24px 24px;background-repeat:no-repeat;padding-left:52px}
@media(max-width:700px){
  /* Le libellé reste à gauche du contrôle (comme la maquette), il ne passe pas au-dessus */
  .filter-grid{grid-template-columns:auto minmax(0,1fr);gap:12px 10px}
  .filter-grid .field{gap:8px}
  .field-lbl{font-size:13px}
  .cat-tabs button{min-width:132px;height:64px;font-size:16px}
  .casino-select,.casino-search{height:54px;font-size:16px;padding:14px}
  .casino-search{padding-left:48px}
}

/* Grille de jeux — cartes claires, titre sous la vignette */
.casino-page .games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.casino-page .games.games-live{grid-template-columns:minmax(0,1fr);gap:18px}
.casino-page .game{position:relative;background:#ededed;border:none;border-radius:10px;padding:9px;
  aspect-ratio:auto;display:flex;flex-direction:column;overflow:visible;transition:.15s}
.casino-page .game:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.casino-page .game img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:7px;transition:none}
.casino-page .games.games-live .game img{aspect-ratio:4/3}
.casino-page .game:hover img{transform:none}
.casino-page .game .label{position:static;opacity:1;background:none;color:#1b1b1b;text-align:center;
  padding:13px 6px 7px;font-size:14px;font-weight:500;letter-spacing:.2px;text-transform:uppercase;line-height:1.3}
.casino-page .game:hover .label{opacity:1}
.casino-page .game .ov{display:none}
.casino-page .game .g-new{top:-6px;right:-6px;left:auto;border-radius:50%;width:48px;height:48px;
  display:grid;place-items:center;background:#e11b22;font-size:11px;font-weight:800;letter-spacing:.4px}
.casino-page .game .g-flame{top:-6px;left:-6px;right:auto}
.game-ov{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column}
.game-ov-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;
  background:#0b0b10;color:#fff;font-weight:800;border-bottom:1px solid var(--border);flex:0 0 auto}
.game-ov-bar button{background:none;border:none;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.game-ov-bar button:hover{color:var(--gold,#e7b22a)}
.game-frame{flex:1 1 auto;width:100%;border:0;background:#000}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--gold,#e7b22a);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
[x-cloak]{display:none!important}

/* ===== Interface joueur (USER connecté) : chip + dropdown + carte drawer ===== */
.user-chip-wrap{position:relative}
.login-btn .caret{font-size:10px;margin-left:2px;opacity:.8}
.user-dd{position:absolute;right:0;top:calc(100% + 8px);background:#15151d;border:1px solid var(--border);border-radius:12px;min-width:200px;box-shadow:var(--shadow);overflow:hidden;z-index:130}
.user-dd a,.user-dd button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:#e7e9ee;padding:13px 15px;font-size:14px;font-weight:600;border-top:1px solid #20202a;cursor:pointer}
.user-dd a:first-child{border-top:none}
.user-dd a:hover,.user-dd button:hover{background:#1d1d27;color:var(--gold)}
.user-dd svg{width:18px;height:18px;flex:0 0 auto;fill:var(--gold)}

/* Carte joueur (drawer) — fond or, comme la maquette */
.user-card{margin:14px;border-radius:10px;background:var(--gold);padding:18px;color:#1b1b1b}
.user-card .uc-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.user-card .uc-av{width:54px;height:54px;border-radius:50%;background:#1b1b1b;display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:22px;flex:0 0 auto}
.uc-name{font-weight:600;color:#1b1b1b;font-size:19px;line-height:1.2}
.uc-role{color:#1b1b1b;font-size:17px;font-weight:400}
.uc-row{display:flex;justify-content:space-between;font-size:17px;padding:11px 0;border-top:1px solid rgba(0,0,0,.25);color:#1b1b1b}
.uc-row b{color:#1b1b1b;font-weight:700}
.uc-row:first-of-type{border-top:none}
.uc-refresh{margin-top:10px;width:100%;background:transparent;border:none;color:#1b1b1b;border-radius:6px;padding:8px;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.uc-refresh svg{width:19px;height:19px;fill:currentColor}
/* Items du User Menu avec icône */
.drawer-item.ic{display:flex;align-items:center;gap:14px}
.drawer-item.ic svg{width:22px;height:22px;fill:#1b1b1b;flex:0 0 auto}
.drawer-item.ic.active svg,.drawer-item.active svg{fill:#fff}
.dtabs{display:flex;border-bottom:2px solid #d9e6f2;margin:0;background:#fff}
.dtabs button{flex:1;background:none;border:none;color:#5b6670;font-weight:700;font-size:15px;padding:14px 4px;border-bottom:3px solid transparent;cursor:pointer;margin-bottom:-2px}
.dtabs button.on{color:var(--accent);border-bottom-color:var(--accent)}