:root {
  /* Charte bleu / blanc / noir */
  --blue: #0B5CD7;
  --blue-dark: #073E96;
  --black: #12151B;
  --white: #FFFFFF;

  --bg-page: #F2F4F8;
  --bg-card: #FFFFFF;
  --bg-elevated: #F7F8FB;
  --bg-elevated-hover: #EBEFF5;
  --border-subtle: #E1E5EC;

  --accent-live: #D93B3B;
  --accent-win: #0B5CD7;
  --win: #1C8A5A;
  --gold: #D9A441;
  --live: #D93B3B;

  --text-primary: #12151B;
  --text-secondary: #5B6472;
  --text-muted: #8992A3;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.shell-page { height: 100vh; overflow: hidden; }
a { color: inherit; }
button { font-family: inherit; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Barre supérieure (bleue) ---- */
.app-header {
  display: flex; align-items: center; gap: 28px;
  padding: 12px 28px; background: linear-gradient(180deg, var(--blue), var(--blue-dark));
  position: sticky; top: 0; z-index: 20; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(7,62,150,0.15);
}
.brand { text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 0.5px; color: var(--white); }
.brand-mark--accent { color: var(--black); background: var(--white); padding: 0 4px; border-radius: 3px; }
.header-nav { display: flex; gap: 4px; flex: 1; }
.header-nav a { text-decoration: none; color: rgba(255,255,255,0.85); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: var(--radius-sm); transition: background .15s, color .15s; }
.header-nav a:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.header-account { display: flex; align-items: center; gap: 10px; }
.wallet-pill { display: flex; flex-direction: column; align-items: flex-end; padding: 4px 14px; background: rgba(255,255,255,0.12); border-radius: var(--radius-md); line-height: 1.2; white-space: nowrap; flex-shrink: 0; }
.header-recharge-btn {
  background: var(--white); color: var(--blue); border: none; border-radius: 16px;
  padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; font-family: inherit;
}
.header-recharge-btn:hover { background: var(--bg-elevated-hover); }
.wallet-label { font-size: 11px; color: rgba(255,255,255,0.7); white-space: nowrap; }
.wallet-amount { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--white); white-space: nowrap; }

.btn { border: none; border-radius: var(--radius-sm); padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s, opacity .15s; text-decoration: none; display: inline-block; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--white); border: 1px solid rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.18); }
/* Sur fond clair (pages auth/admin/mes-paris), le ghost redevient sombre */
.auth-page .btn-ghost, .admin-dashboard .btn-ghost, .my-bets .btn-ghost {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.auth-page .btn-ghost:hover, .admin-dashboard .btn-ghost:hover, .my-bets .btn-ghost:hover { color: var(--text-primary); border-color: var(--text-muted); }
.btn-block { width: 100%; margin-top: 8px; }
.btn-small { padding: 5px 10px; font-size: 12px; }

/* ---- Barre de filtres rapides (ligues) ---- */
.quick-filters { position: sticky; top: 60px; z-index: 19; display: flex; gap: 8px; padding: 10px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); overflow-x: auto; flex-shrink: 0; }
.quick-filters a { flex-shrink: 0; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-elevated); padding: 7px 14px; border-radius: 20px; white-space: nowrap; }
.quick-filters a:hover { background: var(--bg-elevated-hover); color: var(--text-primary); }
.quick-filters a.active { background: var(--blue); color: var(--white); }

/* ---- Grille de page ---- */
.page-layout { display: grid; grid-template-columns: 240px 1fr 320px; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
/* v14 : sur l'accueil, la colonne de droite regroupe liste + coupon (.page-body) ET le pied de page en dessous */
.page-layout > .page-right { grid-column: 2 / -1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.page-right > .page-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.page-body > .match-list { min-width: 0; min-height: 0; }
@media (max-width: 1080px) { .page-right > .page-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .page-layout > .page-right { grid-column: auto; display: block; } .page-right > .page-body { display: block; } }
.page-layout--single { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; width: 100%; }
@media (max-width: 1080px) {
  .page-layout { grid-template-columns: 210px 1fr; }
}
@media (min-width: 1081px) {
  .slip-drawer-close, .slip-fab, .slip-backdrop { display: none !important; }
}
@media (max-width: 900px) {
  .app-header { gap: 10px; padding: 12px 14px; }
  .header-nav { gap: 8px; }
  .header-nav a { font-size: 13px; white-space: nowrap; padding: 6px 1px; }
  .wallet-pill { padding: 4px 10px; }
  .header-account .btn { padding: 9px 12px; }
  .header-recharge-btn { padding: 6px 9px; font-size: 11px; }
}
.burger { display: none; background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 4px 8px; flex-shrink: 0; }

@media (max-width: 760px) {
  .page-layout { grid-template-columns: 1fr; }
  .burger { display: block; }
  .app-header { gap: 6px; padding: 10px 10px; }
  .header-nav { display: none; }
  .wallet-pill { padding: 3px 6px; }
  .wallet-label { font-size: 8px; }
  .wallet-amount { font-size: 13px; }
  .header-recharge-btn { padding: 5px 7px; font-size: 10px; }
  .header-account { gap: 5px; }
  .header-account .btn { padding: 7px 8px; font-size: 11px; }
  .theme-toggle { width: 28px; height: 28px; font-size: 13px; }
  .slip-fab { display: none !important; }
  body { padding-bottom: 62px; }
  .site-footer { margin-bottom: 62px; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 82vw;
    z-index: 601; transform: translateX(-100%); transition: transform .3s ease;
    overflow-y: auto; display: block; box-shadow: 6px 0 24px rgba(0,0,0,0.18);
  }
  .sidebar.open { transform: translateX(0); }
}

/* ---- Sidebar ---- */
.sidebar { background: var(--bg-card); border-right: 1px solid var(--border-subtle); padding: 12px 8px; }
@media (min-width: 761px) {
  .sidebar { height: 100%; overflow-y: auto; }
}
.sidebar-section { margin-bottom: 14px; }
.sidebar-section h3 { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 0 0 5px 8px; }
.sidebar-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar-section a { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-primary); padding: 5px 8px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.sidebar-section a:hover { background: var(--bg-elevated); }
.sidebar-section a.active { background: rgba(11,92,215,0.1); color: var(--blue); font-weight: 700; }
.sidebar-count { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.sidebar-country { font-size: 10px; color: var(--text-muted); }

/* ---- États génériques ---- */
.state-message { padding: 40px 0; text-align: center; color: var(--text-muted); }
.state-message--error { color: var(--accent-live); }
.section-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 20px 24px 10px; color: var(--text-primary); }
.odds-source-banner { margin: 16px 24px 0; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; background: var(--bg-elevated); color: var(--text-muted); border-left: 3px solid var(--text-muted); }
.odds-source-banner--live { border-left-color: var(--accent-win); color: var(--accent-win); }

/* ---- Matchs en vedette (cartes horizontales) ---- */
.featured-row { display: flex; gap: 12px; padding: 16px 24px; overflow-x: auto; }
.featured-card {
  flex: 0 0 220px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.featured-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.featured-league { color: var(--blue); font-weight: 600; }
.featured-teams { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; flex-direction: column; gap: 4px; }
.featured-teams div { display: flex; align-items: center; }
.odds-group--featured { display: flex; gap: 6px; }
.odds-group--featured .odds-btn { flex: 1; min-width: 0; }

/* ---- Onglets de marché ---- */
.market-tabs { display: flex; gap: 4px; padding: 0 24px 12px; border-bottom: 1px solid var(--border-subtle); }
.market-tab {
  background: transparent; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer;
}
.market-tab:hover { background: var(--bg-elevated); color: var(--text-primary); }
.market-tab.active { background: var(--blue); color: var(--white); }

/* ---- Matchs ---- */
.match-list {
  background: var(--bg-page); min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.match-list-fixed-top { flex-shrink: 0; }
.match-list-scroll-area { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 60px; }
.match-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 18px; padding: 14px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); position: relative; }
.match-row:hover { background: var(--bg-elevated); }
.match-row--live { background: #FFF7F5; }
.match-row--live:hover { background: #FCEEEA; }
.match-meta { display: flex; flex-direction: column; gap: 4px; }
.match-time { font-size: 13px; color: var(--text-secondary); }
.match-league { font-size: 11px; color: var(--text-muted); }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; color: var(--accent-live); font-size: 15px; width: fit-content; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-live); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.match-teams { display: flex; flex-direction: column; gap: 4px; }
.team-line { display: flex; align-items: center; gap: 10px; }
.team-name { font-size: 15px; color: var(--text-primary); }
.jersey-icon { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; }
.featured-teams .jersey-icon { width: 12px; height: 12px; margin-right: 3px; }
.team-score { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--blue); margin-left: auto; min-width: 20px; text-align: right; }
.odds-group { display: flex; gap: 8px; }
.odds-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 7px 10px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, border-color .12s; }
.odds-btn--wide { min-width: 130px; }
.odds-btn:hover { background: var(--bg-elevated-hover); border-color: var(--text-muted); }
.odds-btn--active { border-color: var(--blue); background: var(--blue); }
.odds-label { font-size: 11px; color: var(--text-muted); }
.odds-price { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-primary); }
.odds-btn--active .odds-label, .odds-btn--active .odds-price { color: var(--white); }
@media (max-width: 700px) {
  .match-row { grid-template-columns: 1fr; gap: 10px; }
  .odds-group { flex-wrap: wrap; }
}

/* ---- Coupon de pari ("Bulletin de jeu") — resserré (variante A) ---- */
.betting-slip { background: var(--bg-card); border-left: 1px solid var(--border-subtle); padding: 16px; height: 100%; overflow-y: auto; }
.betting-slip h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--text-primary); }
.slip-empty { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.slip-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.slip-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; background: var(--bg-elevated); padding: 7px 10px; border-radius: var(--radius-sm); }
.slip-match { font-size: 10px; color: var(--text-muted); margin: 0 0 1px; }
.slip-selection { font-size: 12px; color: var(--text-primary); margin: 0; }
.slip-item-right { display: flex; align-items: center; gap: 8px; }
.slip-price { font-family: var(--font-display); font-weight: 700; color: var(--blue); }
.slip-remove { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; }
.slip-remove:hover { color: var(--accent-live); }
.slip-stake-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.slip-stake-row label { font-size: 11px; color: var(--text-muted); }
.slip-stake-row input { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text-primary); font-size: 13px; width: 100%; }
.slip-summary { border-top: 1px dashed var(--border-subtle); padding-top: 6px; margin-bottom: 4px; }
.slip-summary-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); padding: 1px 0; }
.slip-summary-row--highlight { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--blue); }
.slip-status { font-size: 12px; padding: 6px 9px; border-radius: var(--radius-sm); margin: 6px 0 0; }
.slip-status--success { background: rgba(11,92,215,0.1); color: var(--blue); }
.slip-status--error { background: rgba(217,59,59,0.1); color: var(--accent-live); }

/* ---- Chips de mise rapide ---- */
.stake-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: -2px 0 8px; }
.stake-chip { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
.stake-chip:hover { border-color: var(--blue); color: var(--blue); }
.stake-chip.active { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ---- Double confirmation (grosses mises) ---- */
.confirm-box { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; margin: 8px 0; animation: slipFadeIn .2s ease; }
.confirm-box p { font-size: 13px; margin: 0 0 10px; color: var(--text-primary); }
.confirm-actions { display: flex; gap: 8px; }
.confirm-actions .btn { flex: 1; padding: 9px; font-size: 13px; }

/* ---- Recharge inline dans le coupon ---- */
.recharge-inline { animation: slipFadeIn .25s ease; margin: 8px 0; }
@keyframes slipFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.recharge-alert { background: rgba(217,59,59,0.08); border-left: 3px solid var(--accent-live); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--accent-live); font-weight: 600; margin: 0 0 10px; }
.recharge-networks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.btn-blue { background: var(--blue); color: var(--white); }

/* ---- Barre de progression (attente Mobile Money) ---- */
.progress-wait { margin: 8px 0; animation: slipFadeIn .2s ease; }
.progress-text { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; font-weight: 600; animation: pulseText 1.6s ease-in-out infinite; }
@keyframes pulseText { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.progress-track { height: 6px; background: var(--bg-elevated-hover); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--blue); border-radius: 4px; transition: width .4s ease; }

/* ---- Badge de solde animé ---- */
.wallet-amount--pulse { animation: walletPulse .6s ease; }
@keyframes walletPulse { 0% { transform: scale(1); } 30% { transform: scale(1.12); color: var(--white); } 100% { transform: scale(1); } }

/* ---- Ticket de confirmation ---- */
.ticket-wrap.show { animation: ticketPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes ticketPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.ticket { background: var(--bg-elevated); border-radius: var(--radius-md); padding: 22px 18px; text-align: center; }
.check-circle { width: 56px; height: 56px; border-radius: 50%; background: #1C8A5A; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.check-circle svg { width: 28px; height: 28px; }
.check-circle path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: checkDraw .4s .15s ease forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.ticket h4 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.ticket .ref { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.ticket-detail { border-top: 1px dashed var(--border-subtle); padding-top: 12px; text-align: left; }
.ticket-detail .row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--text-secondary); }
.ticket-detail .row b { color: var(--text-primary); }
.ticket-detail .win-row { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #1C8A5A; display: flex; justify-content: space-between; margin-top: 8px; }
.ticket-wrap .btn-ghost { width: 100%; margin-top: 10px; }

/* ---- Confettis (succès pari / recharge) ---- */
.confetti-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 999; }
.confetti-layer span { position: absolute; top: -10px; width: 8px; height: 8px; opacity: 0.9; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(360deg); opacity: 0.3; } }

/* ---- Widget "Recharger mon portefeuille" (toujours visible dans le bulletin) ---- */
.recharge-card { margin-top: 6px; border-top: 2px dashed var(--border-subtle); padding-top: 10px; }
.recharge-card-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.recharge-card-title .flag { font-size: 14px; }
.recharge-accordion-header {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--text-secondary); padding: 2px 0 8px;
}
.recharge-accordion-header .flag { font-size: 14px; margin-right: 4px; }
.recharge-arrow { transition: transform .2s ease; color: var(--text-muted); }
.recharge-accordion-header.open .recharge-arrow { transform: rotate(180deg); }
.recharge-accordion-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.recharge-accordion-body.open { max-height: 420px; overflow-y: auto; }
.recharge-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.recharge-mini-btn { display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 2px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 6px; cursor: pointer; height: 40px; }
.recharge-mini-btn.active { border-color: var(--blue); background: rgba(11,92,215,0.06); }
.recharge-mini-btn img { max-height: 22px; max-width: 100%; object-fit: contain; }
.recharge-amount-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.recharge-amount-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-elevated); font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
.recharge-amounts { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.recharge-amounts .stake-chip { font-size: 11px; padding: 4px 9px; }
.btn-recharge { width: 100%; background: var(--blue); color: var(--white); border: none; border-radius: var(--radius-sm); padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-recharge:disabled { opacity: .5; cursor: not-allowed; }
.recharge-hint { font-size: 10px; color: var(--text-muted); margin-top: 6px; text-align: center; }

/* ---- Tiroir "Bulletin de jeu" sur tablette/mobile ---- */
.slip-drawer-close { position: absolute; top: 14px; right: 14px; background: var(--bg-elevated); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--text-secondary); cursor: pointer; z-index: 2; }
.slip-backdrop { position: fixed; inset: 0; background: rgba(18,21,27,0.5); z-index: 500; display: none; }
.slip-backdrop.show { display: block; animation: modalOverlayFade .2s ease; }
.slip-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 502;
  width: 58px; height: 58px; border-radius: 50%; background: var(--blue); color: white;
  border: none; font-size: 24px; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(11,92,215,0.4); cursor: pointer;
}
.slip-fab-badge {
  position: absolute; top: -4px; right: -4px; background: var(--accent-live); color: white;
  font-size: 11px; font-weight: 700; font-family: var(--font-display); min-width: 20px; height: 20px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---- Modale de confirmation de pari ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(18,21,27,0.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-overlay.show { display: flex; animation: modalOverlayFade .2s ease; }
@keyframes modalOverlayFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background: var(--bg-card); border-radius: var(--radius-md); width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 24px 22px; position: relative; animation: modalCardPop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalCardPop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-close { position: absolute; top: 14px; right: 14px; background: var(--bg-elevated); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--text-secondary); cursor: pointer; line-height: 1; }
.modal-close:hover { background: var(--bg-elevated-hover); color: var(--text-primary); }
.modal-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 16px; padding-right: 30px; }
#modal-recap { margin-bottom: 4px; }
.modal-selections { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
.modal-selections li { background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 10px 12px; }
.modal-selections .m-match { font-size: 11px; color: var(--text-muted); margin: 0 0 2px; }
.modal-selections .m-sel { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.modal-selections .m-sel span:last-child { color: var(--blue); font-family: var(--font-display); }
@media (max-width: 520px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card { max-width: 100%; border-radius: var(--radius-md) var(--radius-md) 0 0; max-height: 90vh; animation: modalSheetUp .25s ease; }
  @keyframes modalSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ---- Auth ---- */
.auth-page { display: flex; justify-content: center; padding: 60px 20px; background: var(--bg-page); min-height: calc(100vh - 65px); }
.auth-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px 30px; width: 100%; max-width: 380px; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(18,21,27,0.06); }
.auth-card h1 { font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; color: var(--text-primary); }
.auth-subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.auth-card label { font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; font-weight: 600; }
.auth-card input { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text-primary); font-size: 15px; margin-bottom: 16px; width: 100%; }
.auth-card input:focus { border-color: var(--blue); }
.auth-error, .auth-success { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.auth-error { background: rgba(217,59,59,0.1); color: var(--accent-live); }
.auth-success { background: rgba(11,92,215,0.1); color: var(--blue); }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.auth-switch a { color: var(--blue); text-decoration: none; font-weight: 700; }

/* ---- Mes paris ---- */
.my-bets { padding: 30px 24px 60px; background: var(--bg-page); min-height: calc(100vh - 65px); }
.my-bets h1 { font-family: var(--font-display); font-size: 28px; color: var(--text-primary); }
.bet-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 14px; }
.bet-card-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.bet-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.bet-status--pending { background: rgba(11,92,215,0.1); color: var(--blue); }
.bet-status--won { background: rgba(11,92,215,0.1); color: var(--blue); }
.bet-status--lost { background: rgba(217,59,59,0.1); color: var(--accent-live); }
.bet-date { font-size: 12px; color: var(--text-muted); }
.bet-selections { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bet-selections li { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.bet-card-footer { display: flex; gap: 18px; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); padding-top: 10px; flex-wrap: wrap; }

/* ---- Admin ---- */
.admin-dashboard { padding: 30px 28px 80px; max-width: 1200px; margin: 0 auto; background: var(--bg-page); min-height: calc(100vh - 65px); }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.admin-header h1 { font-family: var(--font-display); font-size: 28px; color: var(--text-primary); }
.admin-form { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px; margin-bottom: 28px; }
.admin-form h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 14px; color: var(--text-primary); }
.admin-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.admin-form-grid select, .admin-form-grid input { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-primary); font-size: 14px; }
@media (max-width: 900px) { .admin-form-grid { grid-template-columns: repeat(2, 1fr); } }
.admin-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.admin-table th { text-align: left; font-size: 12px; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.admin-match-name { font-size: 14px; color: var(--text-primary); font-weight: 600; }
.admin-match-league { font-size: 11px; color: var(--text-muted); }
.admin-score-cell, .admin-odds-cell, .admin-actions-cell { display: flex; align-items: center; gap: 6px; }
.admin-score-cell input { width: 48px; }
.admin-odds-cell input { width: 58px; color: var(--blue); font-weight: 700; }
.admin-score-cell input, .admin-odds-cell input { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 5px 6px; text-align: center; }
select { color-scheme: light; }
form.inline { display: inline; }
.admin-form-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.admin-form-hint code { background: var(--bg-elevated-hover); padding: 1px 5px; border-radius: 4px; }
/* ---- Gestion des réseaux de paiement (admin) — design élégant avec logos + interrupteurs ---- */
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .toggle-track { position: absolute; inset: 0; background: #CBD2DE; border-radius: 20px; transition: background .15s; cursor: pointer; }
.toggle-switch .toggle-track::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-track { background: var(--blue); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-track { background: #E1E5EC; cursor: not-allowed; }

.master-toggles { display: flex; gap: 16px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.master-toggle-item { display: flex; align-items: center; gap: 12px; background: var(--bg-elevated); padding: 12px 16px; border-radius: var(--radius-sm); flex: 1; min-width: 200px; }
.master-toggle-item .label { font-size: 13px; font-weight: 700; display: block; }
.master-toggle-item .sub { font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px; }
.master-toggle-item > div:first-child { flex: 1; }

.country-block { margin-bottom: 20px; }
.country-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.country-header .flag { font-size: 20px; }
.country-header h3 { font-family: var(--font-display); font-size: 16px; margin: 0; }
.country-header .count { font-size: 10.5px; color: var(--text-muted); background: var(--bg-elevated); padding: 2px 9px; border-radius: 10px; }

.network-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.network-card {
  display: flex; align-items: center; gap: 11px; background: var(--bg-elevated);
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.network-card.on { border-color: var(--blue); background: rgba(11,92,215,0.045); }
.network-card.disabled-card { opacity: 0.5; cursor: not-allowed; }
.network-logo-wrap { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: white; border: 1px solid var(--border-subtle); }
.network-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.network-dot-big { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.network-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.network-card-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.network-card-tag { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.network-card-tag .method-push { color: #1C8A5A; }
.network-card-tag .method-web { color: var(--blue); }
.network-card-tag .method-card { color: #7B2D8E; }
.admin-inline-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.admin-inline-label input, .admin-inline-label select { font-weight: 400; }

/* ---- Portefeuille ---- */
.wallet-page { padding: 30px 24px 60px; }
.wallet-page h1 { font-family: var(--font-display); font-size: 28px; margin: 0 0 20px; }
.wallet-balance-card { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.wallet-balance-label { font-size: 12px; color: rgba(255,255,255,0.8); }
.wallet-balance-amount { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--white); }
.wallet-notice { background: var(--bg-elevated); border-left: 3px solid var(--text-muted); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.wallet-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
@media (max-width: 640px) { .wallet-forms { grid-template-columns: 1fr; } }
.wallet-form { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; }
.wallet-form h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 12px; }
.wallet-form label { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 5px; display: block; }
.wallet-form input[type="text"], .wallet-form input[type="tel"], .wallet-form input:not([type="radio"]) {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 9px 12px; color: var(--text-primary); font-size: 14px; width: 100%; margin-bottom: 12px;
}
.wallet-country-group { margin-bottom: 16px; }
.wallet-country-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.wallet-network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.wallet-network-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--bg-elevated); border: 2px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit;
}
.wallet-network-btn:hover { border-color: var(--text-muted); }
.wallet-network-btn.active { border-color: var(--blue); background: rgba(11,92,215,0.06); }
.wallet-network-logo { height: 20px; width: auto; max-width: 70px; object-fit: contain; border-radius: 3px; }
.wallet-network-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.wallet-network-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.wallet-network-badge--push { background: rgba(28,138,90,0.12); color: #1C8A5A; }
.wallet-network-badge--web { background: rgba(11,92,215,0.1); color: var(--blue); }
.wallet-network-badge--sim { background: var(--bg-elevated-hover); color: var(--text-muted); }
.wallet-network-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.wallet-phone-row { border-top: 1px solid var(--border-subtle); padding-top: 14px; margin-top: 4px; }
.wallet-phone-row label { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 5px; display: block; }
.wallet-phone-input { display: flex; align-items: center; gap: 0; margin-bottom: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.wallet-phone-prefix { background: var(--bg-elevated-hover); padding: 9px 12px; font-size: 14px; font-weight: 700; color: var(--text-secondary); border-right: 1px solid var(--border-subtle); }
.wallet-phone-input input { border: none; padding: 9px 12px; font-size: 15px; flex: 1; background: var(--bg-elevated); color: var(--text-primary); }
.wallet-phone-input input:focus { outline: none; }
.wallet-phone-row > input[type="number"] { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text-primary); font-size: 14px; width: 100%; margin-bottom: 12px; }
.wallet-history-title { font-family: var(--font-display); font-size: 20px; margin: 0 0 12px; }
.wallet-history { display: flex; flex-direction: column; gap: 8px; }
.wallet-tx-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 16px; }
.wallet-tx-type { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-right: 8px; }
.wallet-tx-type--deposit { background: rgba(28,138,90,0.12); color: #1C8A5A; }
.wallet-tx-type--withdrawal { background: rgba(217,59,59,0.1); color: var(--accent-live); }
.wallet-tx-operator { font-size: 13px; font-weight: 600; }
.wallet-tx-ref { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.wallet-tx-amount { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.wallet-tx-amount--deposit { color: #1C8A5A; }
.wallet-tx-amount--withdrawal { color: var(--accent-live); }

.wallet-notice--live { border-left-color: var(--blue); background: rgba(11,92,215,0.06); color: var(--blue); }
.wallet-notice code { background: var(--bg-elevated-hover); padding: 1px 5px; border-radius: 4px; }
.wallet-tx-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-right: 6px; }
.wallet-tx-status--pending { background: rgba(224,164,41,0.15); color: #B07A1A; }
.wallet-tx-status--completed { background: rgba(28,138,90,0.12); color: #1C8A5A; }
.wallet-tx-status--failed { background: rgba(217,59,59,0.1); color: var(--accent-live); }

.wallet-pending { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 16px; }
.wallet-pending-spinner { width: 24px; height: 24px; border: 3px solid var(--border-subtle); border-top-color: var(--blue); border-radius: 50%; animation: wallet-spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes wallet-spin { to { transform: rotate(360deg); } }
.wallet-pending-message { font-weight: 600; margin: 0 0 3px; font-size: 14px; }
.wallet-pending-sub { font-size: 12px; color: var(--text-muted); margin: 0; }
.wallet-pending--success .wallet-pending-spinner { border-top-color: #1C8A5A; }
.wallet-pending--failed .wallet-pending-spinner { border-top-color: var(--accent-live); }

/* ============================================================
 * Bloc placé en toute fin de fichier À DESSEIN : garantit que ces
 * règles gagnent sur .betting-slip / .slip-fab / .slip-drawer-close
 * définies plus haut, quelle que soit la cascade (même spécificité,
 * donc c'est l'ordre d'apparition qui tranche en CSS).
 * ============================================================ */
@media (max-width: 1080px) {
  .betting-slip {
    position: fixed !important; top: 0; right: 0; height: 100vh; width: 340px; max-width: 88vw;
    z-index: 501; transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -6px 0 24px rgba(18,21,27,0.18); overflow-y: auto; border-left: none;
  }
  .betting-slip.open { transform: translateX(0); }
  body.slip-open .slip-fab { display: none; }
  .slip-drawer-close { display: block; }
  .slip-fab { display: flex; }
}

/* ============================================================
 * Enrichissement sportif animé (bannière héro, icônes, cartes live,
 * états vides illustrés) — illustrations SVG originales.
 * ============================================================ */

/* ---- 1. Bannière héro rotative ---- */
.hero-banner { position: relative; height: 180px; overflow: hidden; border-radius: var(--radius-md); margin-bottom: 16px; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 32px; opacity: 0; transition: opacity .6s ease; color: white; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide.slide-1 { background: linear-gradient(120deg, var(--blue-dark), var(--blue)); }
.hero-slide.slide-2 { background: linear-gradient(120deg, #1C8A5A, #22B36F); }
.hero-slide.slide-3 { background: linear-gradient(120deg, #7A2E8C, #A63FBF); }
.hero-text h2 { font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; }
.hero-text p { margin: 0 0 10px; opacity: .9; font-size: 13px; }
.hero-cta { background: white; color: var(--black); border: none; padding: 8px 18px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
.hero-icon { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; opacity: .95; }
.hero-dots { position: absolute; bottom: 12px; left: 32px; display: flex; gap: 6px; z-index: 2; }
.hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: background .2s; }
.hero-dots span.active { background: white; }
.ball-roll { animation: rollBall 3s ease-in-out infinite; }
@keyframes rollBall { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(180deg); } }
.ball-bounce { animation: bounceBall 1.4s cubic-bezier(.5,0,.5,1.5) infinite; transform-origin: bottom center; }
@keyframes bounceBall { 0%,100% { transform: translateY(0) scaleY(1); } 45% { transform: translateY(-22px) scaleY(1.05); } 50% { transform: translateY(-22px) scaleY(.9); } 55% { transform: translateY(-22px) scaleY(1.05); } }
.trophy-glow { animation: glowTrophy 2s ease-in-out infinite; }
@keyframes glowTrophy { 0%,100% { filter: drop-shadow(0 0 0px gold); } 50% { filter: drop-shadow(0 0 10px gold); } }
@media (max-width: 760px) { .hero-banner { height: 150px; } .hero-icon { width: 64px; height: 64px; right: 14px; } .hero-text h2 { font-size: 20px; } .hero-text p { font-size: 11px; } }

/* ---- 2. Icônes de sport animées (barre latérale) ---- */
.sport-icon-svg { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; margin-right: 6px; }
.sidebar-link-main { display: flex; align-items: center; min-width: 0; }
.sidebar-section li a:hover .sport-icon-svg { animation: wiggleIcon .4s ease; }
@keyframes wiggleIcon { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.sidebar-section li a.active .sport-icon-svg { animation: breatheIcon 2.4s ease-in-out infinite; }
@keyframes breatheIcon { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ---- 3. Cartes de match en direct : ballon traversant + flash de score ---- */
.match-row--live { position: relative; overflow: hidden; }
.match-row-ball { position: absolute; top: 14px; left: -20px; width: 14px; height: 14px; opacity: 0; animation: crossRow 7s linear infinite; animation-delay: 1.5s; pointer-events: none; }
@keyframes crossRow { 0% { transform: translateX(0) rotate(0deg); opacity: 0; } 4% { opacity: .8; } 46% { opacity: .8; } 50% { transform: translateX(160px) rotate(360deg); opacity: 0; } 100% { transform: translateX(160px) rotate(360deg); opacity: 0; } }
.team-score.score-flash { animation: scoreFlash .9s ease; border-radius: 4px; }
@keyframes scoreFlash { 0% { background: rgba(28,138,90,.4); box-shadow: 0 0 0 4px rgba(28,138,90,.4); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }

/* ---- 4. États vides illustrés ---- */
.empty-state-illust { text-align: center; padding: 30px 20px; }
.empty-state-illust svg { width: 72px; height: 72px; margin: 0 auto 12px; display: block; }
.empty-state-illust p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.whistle-shake { animation: shakeWhistle 2.5s ease-in-out infinite; }
@keyframes shakeWhistle { 0%,85%,100% { transform: rotate(0); } 87% { transform: rotate(-8deg); } 89% { transform: rotate(8deg); } 91% { transform: rotate(-6deg); } 93% { transform: rotate(0); } }
.float-ball { animation: floatBall 3s ease-in-out infinite; }
@keyframes floatBall { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-shadow { animation: floatShadow 3s ease-in-out infinite; transform-origin: center; }
@keyframes floatShadow { 0%,100% { transform: scaleX(1); opacity: .2; } 50% { transform: scaleX(.7); opacity: .1; } }

/* ============================================================
 * Fonctionnalités "vrai site pro" (v2) : cote boostée, preuve
 * sociale, flèches de mouvement de cote, toasts, squelettes de
 * chargement, pari du jour, pied de page de confiance.
 * ============================================================ */

/* ---- 1. Cote boostée + preuve sociale + flèches de mouvement ---- */
.match-row--boosted { border: 1.5px solid var(--gold); background: linear-gradient(90deg, rgba(217,164,65,0.06), var(--bg-card) 20%); padding-top: 28px; }
.boost-badge { position: absolute; top: 4px; left: 4px; background: linear-gradient(90deg, var(--gold), #F2C572); color: var(--black); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 8px; z-index: 2; }
.social-proof { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.odds-move-arrow { font-size: 9px; font-weight: 800; margin-left: 4px; }
.odds-move-arrow.up { color: #1C8A5A; }
.odds-move-arrow.down { color: #D93B3B; }
.odds-btn.odds-changed { animation: oddsChangedPulse 1.2s ease; }
@keyframes oddsChangedPulse { 0% { box-shadow: 0 0 0 3px rgba(11,92,215,0.25); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- 2. Notifications "toast" ---- */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 520px) { .toast-container { left: 12px; right: 12px; bottom: 12px; } }
.toast-item {
  background: var(--black); color: white; padding: 12px 16px; border-radius: 10px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transform: translateX(140%); transition: transform .4s cubic-bezier(.34,1.56,.64,1); max-width: 340px;
}
@media (max-width: 520px) { .toast-item { transform: translateY(140%); max-width: none; } .toast-item.show { transform: translateY(0) !important; } }
.toast-item.show { transform: translateX(0); }
.toast-item .toast-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.toast-item.toast-success .toast-icon { background: #1C8A5A; }
.toast-item.toast-error .toast-icon { background: #D93B3B; }
.toast-item .toast-body b { display: block; font-size: 13px; }
.toast-item .toast-body span { font-size: 11px; opacity: .75; }

/* ---- 3. Squelettes de chargement ---- */
.skeleton-row { display: flex; align-items: center; gap: 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; }
.skeleton-box { background: linear-gradient(90deg, #E1E5EC 25%, #EDF0F5 50%, #E1E5EC 75%); background-size: 200% 100%; animation: skeletonShimmer 1.4s infinite; border-radius: 6px; }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- 4. Bloc "Pari du jour" ---- */
.bet-of-day { background: linear-gradient(120deg, #1a1f2e, #2d3548); border-radius: var(--radius-md); padding: 16px 20px; color: white; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.bet-of-day h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 3px; display: flex; align-items: center; gap: 7px; }
.bet-of-day p { margin: 0; font-size: 12px; opacity: .85; }
.bet-of-day-cta { background: var(--gold); color: var(--black); border: none; padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; flex-shrink: 0; }

/* ---- 5. Pied de page de confiance ---- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.7); padding: 30px 26px; margin-top: 30px; flex-shrink: 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-badge { background: rgba(255,255,255,0.08); border-radius: 6px; padding: 6px 12px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.footer-payment-logos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.footer-payment-logos img { height: 20px; background: white; border-radius: 4px; padding: 3px 6px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-bottom: 20px; }
.footer-col h5 { color: white; font-family: var(--font-display); font-size: 14px; margin: 0 0 10px; letter-spacing: .3px; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); font-size: 12px; text-decoration: none; margin-bottom: 7px; }
.footer-col a:hover { color: white; }
.footer-responsible { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; font-size: 11px; line-height: 1.6; }
.footer-responsible b { color: var(--gold); }
.footer-copy { margin-top: 14px; font-size: 10px; opacity: .5; }
/* Pied de page allégé : 4 colonnes à gauche, logos des réseaux à droite sur deux lignes (3 + 2) */
.footer-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.footer-row .footer-grid { flex: 1 1 auto; margin-bottom: 0; }
.footer-row .footer-payment-logos { flex: 0 0 auto; margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 8px; justify-items: start; }
@media (max-width: 760px) { .footer-row { flex-direction: column; gap: 16px; } .footer-row .footer-payment-logos { display: flex; flex-wrap: wrap; } }

/* ============================================================
 * Thème sombre (optionnel) — activé via le bouton 🌙 dans l'en-tête,
 * mémorisé par navigateur (localStorage). Thème bleu/blanc conservé
 * par défaut ; ceci ne s'applique que si <html data-theme="dark">.
 * Palette inspirée d'une variante testée séparément du projet.
 * ============================================================ */
[data-theme="dark"] {
  --blue: #17C964;
  --blue-dark: #0EA75A;
  --bg-page: #0A1119;
  --bg-card: #131E2E;
  --bg-elevated: #182538;
  --bg-elevated-hover: #1E2D43;
  --border-subtle: #24354D;
  --text-primary: #EAF1FB;
  --text-secondary: #9DB0C9;
  --text-muted: #6D829D;
  --accent-live: #FF4D4F;
  --accent-win: #17C964;
  --win: #17C964;
  --gold: #FFC53D;
  --live: #FF4D4F;
}
[data-theme="dark"] body { background: var(--bg-page); }
[data-theme="dark"] .app-header { background: linear-gradient(180deg, #10243A, #0A1119); }
[data-theme="dark"] .btn-primary { background: var(--blue); color: #06210F; }
[data-theme="dark"] .btn-primary:hover { background: var(--blue-dark); }
[data-theme="dark"] .btn-black, [data-theme="dark"] .black-btn { background: var(--blue); color: #06210F; }
[data-theme="dark"] .match-row--live { background: rgba(255,77,79,0.07); }
[data-theme="dark"] .match-row--live:hover { background: rgba(255,77,79,0.12); }
[data-theme="dark"] .odds-btn--active { background: var(--blue); color: #06210F; border-color: var(--blue); }
[data-theme="dark"] .market-tab.active { background: var(--blue); color: #06210F; }
[data-theme="dark"] .sidebar-section a.active { background: rgba(23,201,100,0.14); color: var(--blue); }
[data-theme="dark"] .wallet-pill, [data-theme="dark"] .header-recharge-btn { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .header-recharge-btn { color: var(--blue); }
[data-theme="dark"] .wallet-balance-card { background: linear-gradient(120deg, #10243A, #14304D); }
[data-theme="dark"] .ticket, [data-theme="dark"] .modal-card { background: var(--bg-card); }
[data-theme="dark"] .quick-filters a.active { background: var(--blue); color: #06210F; }
[data-theme="dark"] .site-footer { background: #060a10; }
[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }

/* ---- Bouton de bascule de thème ---- */
.theme-toggle {
  background: rgba(255,255,255,0.12); border: none; color: white; width: 34px; height: 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.22); }
.theme-toggle .theme-icon-dark { display: none; }

/* ============================================================
 * Navigation mobile : tiroir latéral (sports/compétitions) +
 * barre de navigation fixe en bas d'écran, façon application native.
 * Placé en fin de fichier à dessein (voir note plus haut sur la cascade).
 * ============================================================ */
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(18,21,27,0.5); z-index: 600; }
.drawer-backdrop.show { display: block; animation: modalOverlayFade .2s ease; }

.mobile-tabbar { display: none; }
@media (max-width: 760px) {
  .mobile-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: var(--bg-card); border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-tab-link {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--text-muted); text-decoration: none;
    font-size: 10px; font-weight: 600; padding: 4px 2px; position: relative; font-family: inherit; cursor: pointer;
  }
  .mobile-tab-link .icon { font-size: 18px; }
  .mobile-tab-link.active { color: var(--blue); }
  .mobile-tab-badge {
    position: absolute; top: -2px; right: 22%; background: var(--accent-live); color: white;
    font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
  }
}

/* ---- Suggestion "autres matchs" (contenu minimal) ---- */
.empty-suggest {
  background: var(--bg-elevated); border: 1px dashed var(--border-subtle); border-radius: var(--radius-md);
  padding: 18px 20px; text-align: center; margin: 16px 24px;
}
.empty-suggest b { display: block; color: var(--text-primary); font-size: 14px; margin-bottom: 4px; }
.empty-suggest p { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* ============================================================
 * v2 — Accueil "app shell" (façon Spotify / YouTube Music)
 * Bloc volontairement placé en fin de fichier : ces règles doivent
 * gagner sur celles définies plus haut (même spécificité → l'ordre
 * tranche). Elles ne s'appliquent QU'À la page d'accueil
 * (body.shell-page) : portefeuille, mes paris, infos… restent des
 * pages normales qui défilent entièrement.
 *
 * Principe : en-tête + filtres rapides + colonne de gauche + coupon
 * de droite + (bannière, matchs en vedette, onglets de marché) sont
 * figés à l'écran ; SEULE .match-list-scroll-area défile, et le pied
 * de page vit à la fin de cette zone-là.
 * ============================================================ */
@media (min-width: 761px) {
  /* Rien ne dépasse l'écran : la page ne défile jamais globalement. */
  body.shell-page { height: 100dvh; overflow: hidden; }

  /* Zone figée compactée pour laisser un maximum de place à la liste.  */
  body.shell-page .hero-banner { height: 110px; margin-bottom: 8px; }
  body.shell-page .hero-text h2 { font-size: 22px; }
  body.shell-page .hero-text p { margin-bottom: 8px; font-size: 12.5px; }
  body.shell-page .featured-row { padding: 10px 24px; }
  body.shell-page .odds-source-banner { margin-top: 8px; padding: 6px 14px; font-size: 12px; }
  body.shell-page .market-tabs { padding: 0 24px 8px; }

  /* Colonne centrale : pile verticale strictement contrainte a l'ecran. */
  body.shell-page .match-list {
    display: flex; flex-direction: column; height: 100%;
    min-height: 0; overflow: hidden;
  }

  /* Zone figee : compressible (defilement interne) au lieu de pousser le
     pied de page hors de l'ecran quand le contenu charge par JS arrive. */
  body.shell-page .match-list-fixed-top {
    flex: 0 1 auto; min-height: 0; max-height: 50vh; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }

  /* La liste des matchs est la seule vraie zone de defilement. */
  body.shell-page .match-list-scroll-area {
    flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 0; scrollbar-width: thin;
  }

  /* Le pied de page reste visible dans l'écran d'accueil, sans défilement. */
  body.shell-page .site-footer {
    flex: 0 0 auto; margin-top: 0; padding: 14px 26px 12px;
  }
  body.shell-page .footer-badges { margin-bottom: 8px; }
  body.shell-page .footer-payment-logos { margin-bottom: 9px; }
  body.shell-page .footer-grid { gap: 12px; margin-bottom: 8px; }
  body.shell-page .footer-col h5 { margin-bottom: 4px; }
  body.shell-page .footer-col a { margin-bottom: 3px; }
  body.shell-page .footer-responsible { padding-top: 7px; line-height: 1.35; }
  body.shell-page .footer-copy { margin-top: 5px; }

  /* Colonnes latérales figées, défilement interne si nécessaire. */
  body.shell-page .sidebar,
  body.shell-page .betting-slip { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}

/* Sur mobile, on garde une page classique qui défile normalement. */
@media (max-width: 760px) {
  body.shell-page { height: auto; overflow: visible; }
  body.shell-page .match-list,
  body.shell-page .page-layout { height: auto; }
  body.shell-page .match-list-fixed-top,
  body.shell-page .match-list-scroll-area { overflow: visible; max-height: none; }
}

/* =====================================================================
   v5 — Ligue virtuelle PULSE : badges, cotes verrouillées, Centre de match,
   plein écran « regarder et parier », mini-lecteur flottant
   ===================================================================== */
.virtual-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.6px; padding:2px 6px; border-radius:4px; background:var(--black); color:#fff; margin-left:6px; vertical-align:middle; }
[data-theme="dark"] .virtual-badge { background:#2a3550; }
.odds-btn--locked { opacity:.55; cursor:not-allowed; }
.odds-btn.odds-up { animation: pmx-up .9s ease; }
.odds-btn.odds-down { animation: pmx-down .9s ease; }
@keyframes pmx-up { 0%{ background:rgba(28,138,90,.35);} 100%{ background:transparent;} }
@keyframes pmx-down { 0%{ background:rgba(217,59,59,.3);} 100%{ background:transparent;} }
.odds-changes { margin:8px 0 12px; padding-left:18px; font-size:14px; }
.match-watch { display:flex; flex-direction:column; gap:4px; align-items:flex-end; justify-content:center; min-width:96px; }
.watch3d-btn { border:0; background:var(--blue); color:#fff; font-weight:700; font-size:12px; padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer; }
.watch3d-btn:hover { background:var(--blue-dark); }
.watch3d-link { font-size:12px; color:var(--blue); text-decoration:none; font-weight:600; white-space:nowrap; }
.watch3d-link:hover { text-decoration:underline; }

/* ---- Centre de match ---- */
body.mc-page { min-height:100vh; }
.mc-layout { display:grid; grid-template-columns: minmax(0,1fr) 330px; gap:0; flex:1; min-height:0; }
.mc-main { padding:16px 22px 90px; min-width:0; max-width:1100px; width:100%; margin:0 auto; }
.mc-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.mc-back { text-decoration:none; color:var(--blue); font-weight:600; font-size:14px; }
.mc-title { font-family:var(--font-display); font-weight:700; font-size:26px; }
.mc-title .mc-teams i { font-style:normal; color:var(--text-muted); font-weight:500; font-size:18px; }
.mc-next { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; font-size:13px; }
.mc-next-label { color:var(--text-muted); }
.mc-next-chip { text-decoration:none; background:var(--bg-card); border:1px solid var(--border-subtle); padding:4px 10px; border-radius:999px; color:var(--text-primary); font-weight:600; }
.mc-next-chip:hover { border-color:var(--blue); }
.mc-next-chip--done { color:var(--text-secondary); font-weight:500; }
.mc-live { color:var(--live); }
.mc-stage { position:relative; background:#000; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/9; width:100%; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.mc-frame, .mc-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.mc-overlay { position:absolute; left:10px; top:10px; display:none !important; gap:8px; align-items:center; z-index:3; pointer-events:none; }
.mc-chip { background:rgba(0,0,0,.65); color:#fff; font-weight:700; font-size:12px; padding:3px 8px; border-radius:6px; }
.mc-chip--live { background:var(--live); }
.mc-score { background:rgba(0,0,0,.65); color:#fff; font-weight:700; font-size:14px; padding:3px 10px; border-radius:6px; }
.mc-tools { position:absolute; right:10px; bottom:10px; display:flex; gap:6px; z-index:4; }
.mc-tool { background:rgba(10,14,22,.78); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:8px; font-size:13px; font-weight:600; padding:7px 11px; cursor:pointer; backdrop-filter:blur(4px); }
.mc-tool:hover { background:rgba(11,92,215,.9); }
.mc-tool--exit { display:none; }
.mc-rotate-hint { display:none; }
.mc-banner { margin:10px 0; padding:10px 14px; border-radius:var(--radius-md); font-size:14px; background:var(--bg-elevated); border:1px solid var(--border-subtle); }
.mc-banner--open { background:rgba(28,138,90,.1); border-color:rgba(28,138,90,.4); }
.mc-banner--suspended { background:rgba(217,164,65,.15); border-color:rgba(217,164,65,.6); font-weight:600; }
.mc-banner--info { background:rgba(11,92,215,.08); border-color:rgba(11,92,215,.35); }
.mc-banner--warn { background:rgba(217,59,59,.1); border-color:rgba(217,59,59,.4); }
.mc-next-cta { margin-top:8px; display:inline-block; text-decoration:none; }
.mc-markets { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.mc-market { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:10px 12px; }
.mc-market h4 { margin:0 0 8px; font-family:var(--font-display); font-size:16px; }
.mc-market-odds { display:flex; gap:6px; }
.mc-market-odds .odds-btn { flex:1; min-width:0; }
.mc-market-odds .odds-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.mc-coupon-btn { display:none; }
.mc-fair { margin-top:14px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 14px; font-size:13px; color:var(--text-secondary); }
.mc-fair h4 { margin:0 0 6px; font-family:var(--font-display); font-size:16px; color:var(--text-primary); }
.mc-fair code { font-size:11px; word-break:break-all; }
.mc-fair-line { margin:6px 0; } .mc-ok { color:var(--win); } .mc-bad { color:var(--live); font-weight:700; }

/* Plein écran « regarder et parier » (paysage) : le terrain prend tout l'écran, les cotes passent en barre du bas */
body.mc-fs { overflow:hidden; }
body.mc-fs .app-header, body.mc-fs .mobile-tabbar, body.mc-fs .mc-top, body.mc-fs .mc-next, body.mc-fs .mc-banner, body.mc-fs .mc-fair { display:none !important; }
body.mc-fs .mc-stage { position:fixed; inset:0; z-index:900; border-radius:0; aspect-ratio:auto; width:100vw; height:100vh; height:100dvh; }
body.mc-fs .mc-overlay { display:none !important; top:max(10px,env(safe-area-inset-top)); left:max(10px,env(safe-area-inset-left)); }
body.mc-fs .mc-tool--exit { display:block; }
body.mc-fs #mc-fs-btn { display:none; }
body.mc-fs .mc-tools { top:max(10px,env(safe-area-inset-top)); bottom:auto; right:max(10px,env(safe-area-inset-right)); }
body.mc-fs .mc-markets { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; gap:8px; overflow-x:auto; padding:8px max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82) 40%); }
body.mc-fs .mc-market { flex:0 0 auto; background:rgba(12,16,26,.82); border-color:rgba(255,255,255,.18); color:#fff; padding:6px 8px; }
body.mc-fs .mc-market h4 { color:#fff; font-size:12px; margin-bottom:4px; }
body.mc-fs .mc-market-odds .odds-btn { min-width:62px; padding:4px 8px; }
body.mc-fs .mc-coupon-btn { display:block; flex:0 0 auto; background:var(--gold); color:#12151B; border:0; font-weight:700; border-radius:8px; padding:0 14px; }
body.mc-fs .slip-fab { display:none !important; }
body.mc-fs .betting-slip { z-index:1200; }
body.mc-fs .slip-backdrop { z-index:1150; }
body.mc-fs .modal-overlay { z-index:1300; }
/* Téléphone resté droit : on tourne tout le terrain de 90° */
body.mc-fs.mc-force-land .mc-stage { inset:auto; top:0; left:100vw; width:100vh; width:100dvh; height:100vw; height:100dvw; transform-origin:top left; transform:rotate(90deg); }

/* ---- Mini-lecteur flottant ---- */
.mini-player { position:fixed; left:14px; bottom:14px; width:300px; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 10px 34px rgba(0,0,0,.4); z-index:600; border:1px solid rgba(255,255,255,.15); }
.mini-head { display:flex; align-items:center; gap:8px; background:#0e1320; color:#fff; padding:5px 8px; font-size:12px; }
.mini-clock { background:var(--live); border-radius:4px; padding:1px 6px; font-weight:700; }
.mini-title { flex:1; opacity:.75; }
.mini-open, .mini-close { color:#fff; background:transparent; border:0; text-decoration:none; font-size:14px; cursor:pointer; padding:0 4px; }
.mini-frame { position:relative; aspect-ratio:16/9; }
.mini-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.header-nav a.active { background:rgba(255,255,255,.16); color:#fff; }

@media (max-width: 900px) {
  .mc-layout { display:block; }
  .mc-main { padding:10px 12px 90px; }
  .mc-tool span { display:none; }
  .mc-title { font-size:21px; }
  body.mc-fs .mc-tool span { display:none; }
  .mini-player { width:220px; bottom:78px; left:10px; }
  .mc-coupon-btn { display:block; grid-column:1/-1; background:var(--blue); color:#fff; border:0; font-weight:700; border-radius:var(--radius-md); padding:12px; }
}
@media (min-width: 901px) { .mc-tool span { display:inline; } }

/* =====================================================================
   v7 — « ARÈNE » avec la charte ParimaX officielle (bleu / blanc / noir, thème clair par défaut,
   thème sombre officiel en option). Aucune couleur propre : uniquement les variables du site.
   La 3D en vedette, la barre de cotes sous le terrain, les prochains matchs à droite, le coupon en tiroir.
   ===================================================================== */
body.ar { min-height:100vh; }
.ar-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; padding:16px 20px 40px; max-width:1560px; margin:0 auto; width:100%; }
.ar-main { padding:0 !important; max-width:none !important; margin:0 !important; min-width:0; }
.ar-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.ar-head .mc-title { font-size:28px; }
.ar-pill { margin:0 0 0 auto !important; border-radius:999px !important; padding:6px 14px !important; font-size:13px !important; font-weight:700; max-width:100%; }
.ar-stage { border-radius:var(--radius-md) var(--radius-md) 0 0; box-shadow:none; border:1px solid var(--border-subtle); border-bottom:0; }
.ar-bar { display:flex !important; gap:10px; overflow-x:auto; align-items:stretch; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border-subtle); border-top:0; border-radius:0 0 var(--radius-md) var(--radius-md); }
.ar-bar .mc-market { background:none; border:0; padding:0; flex:0 0 auto; }
.ar-bar .mc-market h4 { display:none; }
.ar-bar .mc-market-odds { gap:8px; }
.ar-bar .mc-market-odds .odds-btn { flex:0 0 auto; min-width:88px; }
.ar-bar .mc-coupon-btn { display:block !important; margin-left:auto; flex:0 0 auto; background:var(--blue); color:#fff; border:0; border-radius:var(--radius-md); padding:0 18px; font-weight:700; cursor:pointer; grid-column:auto; }
.ar-rail { display:flex; flex-direction:column; gap:10px; min-width:0; }
.ar-rail h3 { margin:0 0 2px; font-family:var(--font-display); font-size:18px; letter-spacing:.6px; color:var(--text-primary); }
.ar-card { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:10px 12px; background:var(--bg-card); }
.ar-card--here { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
.ar-card-st { font-size:12px; font-weight:700; color:var(--text-secondary); }
.ar-card-st.is-live { color:var(--live); }
.ar-card-title { display:block; color:var(--text-primary); font-weight:700; text-decoration:none; margin:4px 0 8px; }
.ar-card-odds { display:flex; gap:6px; }
.ar-card-odds .odds-btn { flex:1; min-width:0; }
.ar-sub { margin:10px 0 2px; font-size:12px; color:var(--text-muted); font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.ar-done { display:block; font-size:13px; color:var(--text-secondary); text-decoration:none; padding:5px 0; }
.ar-done:hover { color:var(--text-primary); }
.ar-foot { font-size:12px; color:var(--text-muted); margin:6px 0 0; }
/* Le coupon est un tiroir flottant partout (la barre de cotes a son bouton « Coupon ») */
body.ar .betting-slip { position:fixed !important; top:0; right:0; height:100vh; width:340px; max-width:92vw; z-index:1201; transform:translateX(100%); transition:transform .3s ease; box-shadow:-6px 0 24px rgba(18,21,27,.18); border-left:none; overflow-y:auto; }
body.ar .betting-slip.open { transform:translateX(0); }
body.ar .slip-drawer-close { display:block !important; }
body.ar .slip-fab { z-index:1100; }
body.ar.slip-open .slip-fab { display:none !important; }
@media (min-width: 901px) { body.ar .slip-fab { display:none !important; } }
body.mc-fs.ar .ar-head, body.mc-fs.ar .ar-rail { display:none !important; }
body.mc-fs.ar .ar-bar { border:0; border-radius:0; background:transparent; }
@media (max-width: 900px) {
  .ar-grid { grid-template-columns:1fr; padding:8px 10px 90px; }
  .ar-head .mc-title { font-size:21px; }
  .ar-pill { margin:0 !important; }
  body.ar .ar-stage { aspect-ratio:4/3; }
}
/* Le fond assombri du tiroir existe aussi sur grand écran (clic à l'extérieur = fermer) */
body.ar .slip-backdrop.show { display:block !important; z-index:1200; }

.bet-status--refunded { background:rgba(11,92,215,.12); color:var(--blue); }

/* v19 — zone sous le coupon vide : carte Arène 3D + « Comment parier ? » */
.slip-filler { margin-top: 6px; }
.slip-filler.is-hidden { display: none; }
.sf-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px; background: var(--bg-card); margin-top: 14px; font-size: 13px; }
.sf-card h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 17px; }
.sf-badge { display: inline-block; background: var(--live); color: #fff; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.sf-teams { font-weight: 700; font-size: 15px; margin: 4px 0; }
.sf-mut { color: var(--text-secondary); margin: 0; }
.sf-btn { display: block; text-align: center; background: var(--blue); color: #fff; font-weight: 700; border-radius: var(--radius-sm); padding: 10px; margin-top: 10px; text-decoration: none; }
.sf-btn:hover { background: var(--blue-dark); }
.sf-step { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0; }
.sf-step > b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* =====================================================================
   v21 — Back-office enrichi : menu latéral (ordinateur) / tuiles (téléphone)
   ===================================================================== */
body.adm-body { background: var(--bg-page); }
.adm-top { height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(180deg, var(--blue), var(--blue-dark)); color: #fff; position: sticky; top: 0; z-index: 50; }
.adm-brand { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #fff; text-decoration: none; }
.adm-x { background: #fff; color: var(--black); padding: 0 4px; border-radius: 3px; margin-left: 1px; }
.adm-sub { opacity: .85; font-size: 14px; }
.adm-top-r { margin-left: auto; display: flex; gap: 8px; }
.adm-pill { background: rgba(255,255,255,.16); color: #fff; padding: 6px 12px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; }
.adm-shell { display: flex; min-height: calc(100vh - 54px); }
.adm-side { width: 230px; flex: none; background: var(--bg-card); border-right: 1px solid var(--border-subtle); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.adm-side h6 { margin: 12px 8px 4px; font-size: 10px; letter-spacing: 1px; color: var(--text-muted); }
.adm-side a { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-size: 14px; }
.adm-side a:hover { background: var(--bg-elevated); }
.adm-side a.on { background: rgba(11,92,215,.12); color: var(--blue); font-weight: 700; }
.adm-side em { font-style: normal; background: var(--live); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.admin-dashboard.adm-main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 18px 22px 80px; min-height: 0; }
.adm-title { font-family: var(--font-display); font-size: 26px; margin: 0 0 12px; }
.adm-back { display: none; color: var(--blue); font-weight: 600; text-decoration: none; margin-bottom: 6px; }
.adm-note { background: rgba(11,92,215,.08); border: 1px solid rgba(11,92,215,.3); border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px; }
.adm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 10px 0 14px; }
.adm-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.adm-k { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 14px; color: var(--text-primary); text-decoration: none; display: block; }
a.adm-k:hover { border-color: var(--blue); }
.adm-k small { display: block; color: var(--text-muted); font-size: 12px; }
.adm-k b { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.adm-k u { text-decoration: none; font-size: 12px; color: var(--win); }
.adm-k u.r { color: var(--live); }
.adm-tiles { display: none; }
.adm-grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.adm-grid2--players { grid-template-columns: 1.1fr 1fr; }
.adm-compact td, .adm-compact th { padding: 8px 8px; font-size: 13px; }
.adm-bars { display: flex; gap: 8px; align-items: flex-end; height: 130px; }
.adm-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.adm-bars span { width: 100%; background: var(--blue); border-radius: 5px 5px 0 0; display: block; }
.adm-bars small { font-size: 11px; color: var(--text-muted); }
.adm-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-search input, .adm-search select, .adm-inline-form input { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; color: var(--text-primary); }
.adm-search input { flex: 1; min-width: 200px; }
.adm-inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.adm-inline-form label { font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.adm-actions { margin: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.adm-warn { background: rgba(217,164,65,.15); border: 1px solid rgba(217,164,65,.6); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; }
.adm-ok { color: var(--win); font-weight: 700; } .adm-bad { color: var(--live); font-weight: 700; }
.adm-row-on { background: rgba(11,92,215,.08); }

@media (max-width: 900px) { .adm-grid2, .adm-grid2--players { grid-template-columns: 1fr; } .adm-kpis, .adm-kpis--4 { grid-template-columns: repeat(2, 1fr); } }
/* Téléphone : plus de menu latéral, des grosses tuiles (variante V3) et un lien « Menu » en haut des pages */
@media (max-width: 760px) {
  .adm-side { display: none; }
  .adm-top { padding: 0 12px; } .adm-sub { display: none; }
  .admin-dashboard.adm-main { padding: 12px 12px 60px; }
  .adm-back { display: inline-block; }
  .adm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
  .adm-tile { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; text-decoration: none; color: var(--text-primary); display: flex; flex-direction: column; gap: 2px; }
  .adm-tile span { font-size: 22px; } .adm-tile b { font-family: var(--font-display); font-size: 18px; } .adm-tile small { color: var(--text-muted); font-size: 12px; }
  .adm-main .admin-table { display: block; overflow-x: auto; }
  .adm-title { font-size: 22px; }
}

/* v23 — vue « Direct » de l'admin */
.adm-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--win); margin-right:7px; box-shadow:0 0 0 3px rgba(28,138,90,.25); animation: adm-pulse 1.6s infinite; }
@keyframes adm-pulse { 50% { box-shadow:0 0 0 6px rgba(28,138,90,.05); } }
.adm-live { float:right; font-size:12px; font-weight:700; color:var(--win); font-family:var(--font-body); }
.adm-live-tag { background:var(--win) !important; }
.adm-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.adm-chip { border:0; background:var(--bg-elevated); color:var(--text-primary); border-radius:999px; padding:5px 13px; font:600 12px var(--font-body); cursor:pointer; }
.adm-chip.on { background:var(--blue); color:#fff; }
.adm-feed { display:flex; flex-direction:column; max-height:60vh; overflow-y:auto; }
.adm-ev { display:flex; gap:10px; align-items:center; padding:9px 4px; border-top:1px solid var(--border-subtle); font-size:13px; }
.adm-ev.is-new { animation: adm-new 2.2s ease; }
@keyframes adm-new { 0% { background:rgba(11,92,215,.18); } 100% { background:transparent; } }
.adm-ev-t { width:78px; flex:none; color:var(--text-muted); font-size:12px; }
.adm-ev-i { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--bg-elevated); }
.adm-ev-i.i2 { background:rgba(28,138,90,.14); } .adm-ev-i.i3 { background:rgba(217,164,65,.2); } .adm-ev-i.i4 { background:rgba(217,59,59,.14); }
.adm-ev-x { flex:1; min-width:0; } .adm-ev-a { flex:none; text-align:right; }
.adm-mut { color:var(--text-muted); }
@media (max-width: 760px) { .adm-ev-t { width:58px; } .adm-ev { flex-wrap:wrap; } }
.adm-steps { margin: 6px 0 0 18px; padding: 0; line-height: 1.7; font-size: 14px; }
.adm-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.adm-limits label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.adm-limits input { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; color: var(--text-primary); }
.adm-limits small { font-weight: 400; color: var(--text-muted); }
.wallet-hint { display:block; color: var(--text-muted); font-size: 12px; margin: 2px 0 6px; }


/* v29 — rapports */
.adm-rep-card { background: var(--bg-card); border: 1px solid var(--blue); border-radius: var(--radius-md); padding: 14px 16px; margin: 4px 0 14px; }
.adm-rep-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-rep-card h3 .btn { margin-left: auto; }
.adm-rep-card .adm-kpis { margin: 0; }
.adm-report-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.adm-report-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.adm-report-title { font-family: var(--font-display); font-size: 22px; margin: 6px 0; } .adm-report-title small { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); font-weight: 400; }
.adm-alerts { margin: 4px 0 0 18px; padding: 0; line-height: 1.7; }
@media (max-width: 900px) { .adm-report-grid { grid-template-columns: 1fr; } }
@media print { .adm-top, .adm-side, .adm-back, .no-print { display: none !important; } .admin-dashboard.adm-main { padding: 0 !important; } body.adm-body { background: #fff; } .adm-report-grid { display: block; } }
.adm-rep-card p { font-size: 13px; }