/* ══════════════════════════════════════════════════════════════════
   styles-mobile.css — Responsive overrides for inline JS styles
   !important is required to override inline style="" attributes
══════════════════════════════════════════════════════════════════ */

/* ── Section padding (reduces the 40px horizontal gutters) ───── */
.vav-section {
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .vav-section {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }

  /* ── Full-bleed sections : le padding horizontal est géré
     par va-section-inner, pas par la section elle-même ─── */
  .va-full-bleed {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
  .va-section-inner {
    width:         100% !important;
    padding-left:  20px !important;
    padding-right: 20px !important;
    box-sizing:    border-box !important;
  }

  .auth-layout { grid-template-columns: 1fr; }
  .auth-aside-col { display: none; }
  .auth-form-col { padding: 40px 24px; }
  .auth-form-col .auth-hero-title {
    font-size: 72px !important;
    line-height: .9 !important;
    margin-bottom: 10px !important;
  }
  .auth-form-col .auth-hero-title .gb-italic {
    font-size: 78px !important;
  }
  .auth-form-col .auth-hero-lead {
    max-width: none !important;
    font-size: 18px !important;
    margin-bottom: 28px !important;
  }
  .auth-form-col .auth-form {
    max-width: none !important;
  }
  .auth-form-col .auth-links-row {
    max-width: none !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .auth-form-col .auth-links-row > * {
    width: 100% !important;
  }
  .auth-form-col .auth-links-row .gb-link {
    width: auto !important;
  }
  .auth-form-col .auth-consent-row {
    align-items: flex-start !important;
  }
  .va-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── Home page: palmares 5-col → 3-col (hide spec/acc) ──── */
  .va-palmares {
    grid-template-columns: 60px 1fr 1fr !important;
  }

  /* ── Home page full-bleed section padding ───────────────── */
  .va-full-bleed {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }

  /* ── Horizontal rule margins ─────────────────────────────── */
  .vav-rule-margin {
    margin-left:  20px !important;
    margin-right: 20px !important;
  }

  /* ── Dashboard: greeting 2-col → 1-col ──────────────────── */
  .vav-dash-greeting {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Dashboard: actions bar ──────────────────────────────── */
  .vav-dash-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }
  .vav-dash-actions .btn { width: 100% !important; }

  /* ── Dashboard: shortcuts → petits boutons compacts ─────── */
  .vav-shortcuts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .vav-shortcut-btn {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .vav-shortcut-icon {
    font-size: 16px !important;
  }
  .vav-shortcut-label {
    font-size: 13px !important;
  }
  .vav-shortcut-sub {
    display: none !important;
  }

  /* ── 3-col rooms grid → 1-col ───────────────────────────── */
  .vav-rooms-3col {
    grid-template-columns: 1fr !important;
  }
  .vav-rooms-3col > * {
    border-right: none !important;
    border-bottom: 1.5px solid var(--rule) !important;
  }

  /* ── Generic 2-col → 1-col ──────────────────────────────── */
  .vav-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── Room detail body: 2-col → 1-col ────────────────────── */
  .vav-rd-body {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .room-detail-body {
    gap: 28px !important;
  }
  .room-detail-body > div,
  .room-detail-body > aside {
    min-width: 0 !important;
  }
  .room-sidebar-col {
    gap: 24px !important;
  }
  .room-carnet-col {
    min-width: 0 !important;
  }

  /* ── Room tabs: grille 2×2 sur mobile ───────────────────── */
  .vav-room-tabs {
    overflow-x:  unset !important;
    flex-wrap:   wrap !important;
    border-bottom: none !important;
  }
  .vav-room-tabs::-webkit-scrollbar { display: none; }
  .vav-room-tab {
    flex:        1 1 50% !important;
    font-size:   13px !important;
    padding:     13px 8px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    border-right:   1.5px solid var(--rule) !important;
    border-bottom:  1.5px solid var(--rule) !important;
  }
  .vav-room-tab:nth-child(even) {
    border-right: none !important;
  }
  .vav-room-tab:nth-child(n+3) {
    border-bottom: none !important;
  }
  .room-tabs-scroll {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  #pronostics-feed {
    border-right: 1.5px solid var(--rule) !important;
    overflow: hidden !important;
  }
  .room-leaderboard-list {
    min-width: 0 !important;
    overflow-x: auto !important;
  }
  .room-chat-list {
    max-height: 240px !important;
  }
  .room-chat-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .room-chat-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .room-chat-form .btn {
    width: 100% !important;
  }
  .room-invite-panel {
    padding: 18px !important;
  }
  .room-invite-panel .gb-h {
    font-size: 28px !important;
    word-break: break-all !important;
    line-height: 1 !important;
  }
  .room-invite-panel .btn {
    width: 100% !important;
  }
  .room-polls-list .option-bet-row,
  .room-polls-list .poll-row,
  .room-polls-list [class*="poll"],
  .room-polls-list [class*="option-bet-row"] {
    min-width: 0 !important;
  }

  /* ── Create-pronostic: 2-col → 1-col ────────────────────── */
  .vav-cp-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── Bet layout: 2-col → 1-col ──────────────────────────── */
  .vav-bet-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── 5-col pronostic row → stacked ──────────────────────── */
  .vav-prono-cols {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .vav-prono-cols > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .vav-prono-cols > div:last-child > * {
    flex: 1 1 100% !important;
  }

  /* ── In-room live betting summary → stacked ─────────────── */
  .vav-bet-live-bar {
    flex-direction: column !important;
    height: auto !important;
  }
  .vav-bet-live-bar > div {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--rule) !important;
    justify-content: space-between !important;
  }
  .vav-bet-live-bar > div:last-child {
    border-bottom: none !important;
  }

  /* ── Bet pronostic: YES/NO cards + amount controls ─────── */
  .vav-bet-sides {
    grid-template-columns: 1fr !important;
  }
  .vav-bet-sides > button {
    border-right: none !important;
    border-bottom: 1.5px solid var(--rule) !important;
    text-align: center !important;
    padding: 24px 18px !important;
  }
  .vav-bet-sides > button:last-child {
    border-bottom: none !important;
  }
  .vav-bet-amount-panel {
    padding: 18px !important;
  }
  .vav-bet-amount-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .vav-bet-amount-wrap {
    width: 100% !important;
  }
  .vav-bet-input {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 48px !important;
  }
  .vav-bet-quick-actions button {
    flex: 1 1 calc(50% - 6px) !important;
  }
  .vav-bet-recent-top {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ── Create pronostic: names and CTA row ────────────────── */
  .vav-cp-name-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .vav-cp-name-row > span {
    justify-self: center !important;
    font-size: 30px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  .vav-cp-days {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .vav-cp-days button {
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
  .vav-cp-actions {
    flex-direction: column !important;
  }
  .vav-cp-actions .btn {
    width: 100% !important;
  }
  .room-detail-body .gb-mono,
  .room-detail-body .gb-italic {
    word-break: break-word !important;
  }

  /* ── Profile header: 3-col → 1-col ──────────────────────── */
  .vav-profile-header {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Bet odds values (80px → 48px) ──────────────────────── */
  .vav-odds-val {
    font-size: 48px !important;
  }

  /* ── Bet amount input (80px → 48px) ─────────────────────── */
  .vav-bet-input {
    font-size: 48px !important;
    width: 180px !important;
  }

  /* ── Paper cards: reduce padding when full-width ────────── */
  .vav-bet-paper {
    padding: 24px !important;
  }

  /* ── Home: hide sommaire + mascotte in hero grid ─────────── */
  .va-hero-sommaire,
  .va-hero-mascotte { display: none !important; }

  /* ── Home: hide Couples sous tension + Oracles ───────────── */
  #va-tendances { display: none !important; }
  #va-palmares  { display: none !important; }

  /* ── Home: drama section — smaller heading + padding ─────── */
  #va-drama {
    padding-top:    60px !important;
    padding-bottom: 60px !important;
  }
  #va-drama h2.gb-h {
    font-size:     clamp(28px, 8vw, 52px) !important;
    margin-bottom: 20px !important;
  }
  #va-drama .va-4col {
    grid-template-columns: 1fr 1fr !important;
  }
  #va-drama .va-4col > div {
    padding:      20px 14px !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--rule) !important;
  }
  #va-drama .va-4col > div:nth-child(odd) {
    border-right: 1.5px solid var(--rule) !important;
  }
  #va-drama .va-4col > div:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  #va-drama .va-stats-num {
    font-size: clamp(26px, 6vw, 44px) !important;
  }

  /* ── Home: mode d'emploi — compact numbered list ────────── */
  #va-mode-emploi {
    padding-top:    32px !important;
    padding-bottom: 32px !important;
  }
  #va-mode-emploi h2.gb-h {
    font-size:     clamp(24px, 6vw, 40px) !important;
    margin-bottom: 6px !important;
  }
  #va-mode-emploi > .va-section-inner > p.gb-italic {
    font-size:     13px !important;
    margin-bottom: 16px !important;
  }
  #va-mode-emploi .va-3col {
    grid-template-columns: 1fr !important;
  }
  #va-mode-emploi .va-3col > div {
    padding:       12px 16px !important;
    border-right:  none !important;
    border-bottom: 1.5px solid var(--rule) !important;
  }
  #va-mode-emploi .va-3col > div:last-child {
    border-bottom: none !important;
  }
  /* step number row: remove bottom margin, hide the hr */
  #va-mode-emploi .va-3col > div > div {
    margin-bottom: 4px !important;
  }
  #va-mode-emploi .va-3col > div > div > hr {
    display: none !important;
  }
  /* hide only crude italic quotes, keep body text */
  #va-mode-emploi .va-3col > div > p.gb-italic {
    display: none !important;
  }
  #va-mode-emploi .va-3col h3.gb-h {
    font-size: 15px !important;
    margin:    0 !important;
  }
  .va-step-num {
    font-size:   28px !important;
    line-height: 1 !important;
  }
}

/* ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── Tighter section padding ─────────────────────────────── */
  .vav-section {
    padding-left:   16px !important;
    padding-right:  16px !important;
    padding-top:    24px !important;
    padding-bottom: 24px !important;
  }

  .va-section-inner {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }

  .vav-rule-margin {
    margin-left:  16px !important;
    margin-right: 16px !important;
  }

  /* ── Room detail: section 1 / sidebar tighten-up ────────── */
  .room-detail-body {
    gap: 20px !important;
  }
  .room-sidebar-col {
    gap: 18px !important;
  }
  .room-chat-list {
    max-height: 200px !important;
  }
  .room-chat-form .btn,
  .room-chat-form input {
    width: 100% !important;
  }
  .room-leaderboard-list {
    overflow-x: auto !important;
  }
  .room-invite-panel {
    padding: 14px !important;
  }
  .room-invite-panel .gb-h {
    font-size: 22px !important;
    line-height: 1 !important;
    word-break: break-all !important;
  }
  .room-polls-list,
  .room-chat-list,
  .room-badges-list {
    min-width: 0 !important;
  }

  /* ── Auth pages: smaller titles and tighter spacing ─────── */
  .auth-form-col .auth-hero-title {
    font-size: 52px !important;
    line-height: .95 !important;
  }
  .auth-form-col .auth-hero-title .gb-italic {
    font-size: 56px !important;
  }
  .auth-form-col .auth-hero-lead {
    font-size: 15px !important;
    margin-bottom: 24px !important;
  }
  .auth-form-col .auth-links-row {
    font-size: 12px !important;
  }
  .auth-aside-col .auth-aside-title {
    font-size: 36px !important;
  }

  /* ── Shortcuts → 2-col compact on small phones ──────────── */
  .vav-shortcuts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Smaller odds values ─────────────────────────────────── */
  .vav-odds-val {
    font-size: 36px !important;
  }

  /* ── Smaller bet input ───────────────────────────────────── */
  .vav-bet-input {
    font-size: 36px !important;
    width: 150px !important;
  }

  /* ── Pronostic preview names (in create-pronostic) ───────── */
  #cp-preview-names {
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
  }

  /* ── Paper cards (bet/create-pronostic) ─────────────────── */
  .vav-bet-paper {
    padding: 20px !important;
  }

  /* ── Profile avatar sizing ───────────────────────────────── */
  .vav-profile-avatar {
    width:  140px !important;
    height: 140px !important;
    margin: 0 auto !important;
  }
  .vav-profile-avatar .gb-h {
    font-size: 80px !important;
  }

  /* ── Room detail header h1 ───────────────────────────────── */
  .vav-room-title {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  /* ── Bet pronostic couple names ──────────────────────────── */
  .vav-bet-couple {
    font-size: clamp(32px, 10vw, 80px) !important;
    line-height: .9 !important;
  }

  .vav-bet-quick-actions button {
    flex: 1 1 100% !important;
  }

  .vav-cp-days {
    grid-template-columns: 1fr 1fr !important;
  }

  .vav-cp-days button {
    font-size: 14px !important;
    padding: 11px 12px !important;
  }

  /* ── Payout gain amount ──────────────────────────────────── */
  .vav-payout-amount {
    font-size: 40px !important;
  }

  /* ── Multi+ pages ──────────────────────────────────────────── */
  .vav-multi-section {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }
  .vav-multi-title {
    font-size: clamp(28px, 8vw, 60px) !important;
  }
  .vav-multi-opt {
    padding: 14px 16px !important;
  }
  /* Bet row sur mobile : pile verticalement */
  .vav-multi-bet-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .vav-multi-amount-input {
    width: 100% !important;
  }
  .vav-multi-bet-btn {
    width: 100% !important;
    text-align: center !important;
  }
  /* Feed card multi : collapse 2-col → 1-col */
  .vav-multi-feed-card {
    grid-template-columns: 1fr !important;
  }
  .vav-multi-feed-card > div:last-child {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* ── Floating chat bubble: fullscreen on mobile ─────────────── */
  #room-chat-bubble {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
  }
  #room-chat-bubble > * {
    pointer-events: auto !important;
  }
  #room-chat-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-top: 1.5px solid var(--rule) !important;
  }
  #room-chat-panel.chat-open {
    display: flex !important;
  }
  #room-chat-list {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 72px !important;
  }
  #room-typing-indicator {
    margin-bottom: 72px !important;
  }
  #room-chat-form {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    background: var(--bg) !important;
    border-top: 1.5px solid var(--rule) !important;
    flex-shrink: 0 !important;
  }
  #room-chat-panel.chat-open ~ #room-chat-toggle {
    display: none !important;
  }
  #room-chat-toggle {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
  }
  /* Réactions : pas d'overflow horizontal */
  #room-chat-list .chat-message {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #room-chat-list .chat-bubble {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #room-chat-list [style*="display:flex;gap:2px"] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}

/* ── Party One-Shot banner (mobile only) ───────────────────── */
.va-party-banner { display: none; }

@media (max-width: 900px) {
  .va-party-banner {
    display: block;
    margin-top: 28px;
    padding: 18px 20px;
    border: 1.5px solid var(--accent);
    background: rgba(255, 62, 127, 0.06);
  }

  .va-party-banner-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 10px;
  }

  .va-party-banner-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 10px;
  }

  .va-party-banner-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mute);
    margin: 0 0 16px;
  }

  .va-party-banner .btn {
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: block;
  }
}