/* ══════════════════════════════════════════
   SUREBET — responsive.css
   Media queries — grande tablette → petit mobile
══════════════════════════════════════════ */

/* ── Grande tablette (≤ 1024px) ── */
@media (max-width: 1024px) {
  .cards-grid { max-width: 720px; padding: 16px 40px 48px; gap: 18px; }
  .footer-cards { max-width: 680px; }
}

/* ── Tablette (≤ 900px) ── */
@media (max-width: 900px) {
  .cards-grid { padding: 16px 24px 40px; gap: 16px; }
  .footer-section { padding: 40px 24px 16px; }
  .footer-cards { grid-template-columns: repeat(3, 1fr); }
  .calc-card { padding: 28px 24px; }
  .calc-results-card { padding: 24px 22px; }
  .admin-card { padding: 24px 22px; }
}

/* ── Tablette portrait / grand mobile (≤ 700px) ── */
@media (max-width: 700px) {
  header, #app-header { padding: 14px 20px; }
  .logo { font-size: 1.9rem; letter-spacing: 3px; }
  .lang-trigger-name { display: none; }
  .lang-trigger { padding: 8px 10px; gap: 4px; }
  .lang-dropdown { min-width: 180px; }
  .logout-text { display: none; }
  .logout-btn { padding: 8px 10px; }

  .hero { padding: 44px 16px 32px; }
  .hero h1 { font-size: 3rem; letter-spacing: 5px; }
  .hero-desc-pill { padding: 9px 18px; max-width: 95%; gap: 8px; }
  .hero-desc { font-size: 0.78rem; text-transform: none !important; color: #FFFFFF; text-align: left; }

  .cards-grid { grid-template-columns: 1fr; padding: 14px 16px; gap: 14px; }
  .card { padding: 26px 22px 22px; }
  .card-name { font-size: 1.7rem; }

  .footer-cards { grid-template-columns: 1fr; gap: 12px; }
  .footer-section { padding: 32px 16px 16px; }
  .footer-card p { text-align: left; hyphens: none; }
  .footer-card { padding: 22px 18px; }

  .platform-page { padding: 28px 14px 44px; }
  .platform-header { margin-bottom: 28px; }
  .platform-header h2 { font-size: 2.2rem; letter-spacing: 3px; }
  .plat-icon { width: 68px; height: 68px; }
  .back-link { margin-bottom: 22px; }
  .login-card { padding: 28px 22px; max-width: 100%; }
  .promo-card { padding: 18px 16px 14px; }

  .dashboard-page { padding: 36px 16px 48px; }
  .dash-username { font-size: 2.2rem; }
  .tip-card { padding: 22px 20px; }
  .match-name { font-size: 1.25rem; }
  .bet-row { padding: 12px 14px; }

  .calculator-page { padding: 32px 16px 48px; }
  .calc-card { padding: 26px 20px; max-width: 100%; }
  .calc-title { font-size: 1.8rem; letter-spacing: 3px; }
  .calc-results-card { max-width: 100%; padding: 22px 18px; }
  .calc-result-value { font-size: 1.2rem; }
  .calc-bet-row { flex-direction: column; gap: 10px; }
  .calc-platform-select { flex: none; width: 100%; }
  .calc-currency-pills { flex-wrap: wrap; }

  /* Admin */
  .admin-page { padding: 32px 16px 48px; }
  .admin-card { padding: 22px 18px; max-width: 100%; }
  .admin-title { font-size: 1.7rem; letter-spacing: 3px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-triple { grid-template-columns: 1fr; }
  .admin-toast { right: 16px; left: 16px; }

  /* Section Comment ça marche */
  .hw-dual-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hw-card { padding: 8px 6px; }
  .hw-card-title { font-size: 0.95rem; margin-bottom: 6px; }
  .hw-step { padding: 20px 12px; border-radius: 18px; }
  .how-it-works-btn.striking-btn { padding: 14px 22px; font-size: 0.98rem; letter-spacing: 0.8px; gap: 8px; }
  .pointing-arrow { font-size: 1.2rem; }
  .header-how-btn { padding: 6px 12px; font-size: 0.76rem; }
  .hw-title { font-size: 1.05rem; line-height: 1.45; }
  .hw-profit-box { padding: 18px 12px; }
  .hw-profit-line { font-size: 0.95rem; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .logo { font-size: 1.7rem; letter-spacing: 2px; }

  .hero h1 { font-size: 2.8rem; letter-spacing: 4px; }
  .hero-desc-pill { padding: 8px 14px; max-width: 100%; border-radius: 24px; gap: 6px; }
  .pill-icon { font-size: 0.95rem; }
  .hero-desc { font-size: 0.72rem; text-transform: none !important; color: #FFFFFF; line-height: 1.4; text-align: left; }
  .card { padding: 22px 18px 18px; border-radius: var(--radius-lg); }
  .card-name { font-size: 1.5rem; }

  .login-card { padding: 22px 16px; border-radius: var(--radius-lg); }
  .promo-card { padding: 16px 12px 12px; gap: 8px; }
  .promo-code-label { font-size: 1.4rem; letter-spacing: 3px; }
  .connexion-title { font-size: 1.2rem; letter-spacing: 4px; }
  .login-btn { padding: 13px; font-size: 0.9rem; }

  .dash-username { font-size: 1.9rem; }
  .tip-card { padding: 18px 16px; }
  .bet-handicap { font-size: 0.95rem; padding: 3px 8px; }
  .bet-odds-value { font-size: 1.3rem; }

  .calc-card { padding: 22px 16px; border-radius: var(--radius-lg); }
  .calc-title { font-size: 1.6rem; }
  .calc-icon-wrap { width: 52px; height: 52px; font-size: 1.4rem; }
  .calc-btn { font-size: 0.9rem; padding: 14px; }
  .calc-result-value { font-size: 1.1rem; }
  .calc-result-row { padding: 11px 12px; }
  .currency-pill { font-size: 0.75rem; padding: 8px 6px; }

  .admin-card { padding: 18px 14px; border-radius: var(--radius-lg); }
  .admin-title { font-size: 1.5rem; }
  .admin-save-btn { font-size: 0.9rem; padding: 14px; }
}

/* ── Très petit mobile (≤ 360px) ── */
@media (max-width: 360px) {
  header, #app-header { padding: 12px 14px; }
  .logo { font-size: 1.5rem; }
  .hero h1 { font-size: 2.7rem; letter-spacing: 3px; }
  .login-card { padding: 18px 12px; }
  .login-btn { letter-spacing: 1.5px; }
  .dash-username { font-size: 1.6rem; }
  .dash-cta-btn { font-size: 0.85rem; padding: 14px; }
  .calc-card { padding: 18px 12px; }
  .calc-title { font-size: 1.4rem; }
  .calc-results-card { padding: 18px 14px; }

  .admin-card { padding: 16px 12px; }
  .admin-title { font-size: 1.3rem; }
}

@media (max-width: 700px) {
  .users-content { flex-direction: column; text-align: center; gap: 12px; }
  .users-text-group { text-align: center; }
  .users-count-title { justify-content: center; }
  .count-num { font-size: 2.2rem; }
  .count-label { font-size: 1.1rem; }
  .active-users-card { padding: 24px 16px; margin: 20px 12px; }
}