/* Auth / welcome / onboarding Twitch — tablette + mobile
   Lié après le <style> inline de la page, avant site-shared-responsive.css */

html,
body.auth-flow-page {
  width: 100%;
  max-width: 100%;
}

/* ── Tablette (768–1024) ── */
@media (max-width: 1024px) {
  body.auth-flow-page .activation-wrap {
    max-width: 520px;
  }

  body.auth-flow-page h1 {
    font-size: clamp(1.4rem, 4.5vw, 1.85rem);
  }

  body.auth-flow-page p.lead {
    font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  }
}

@media (max-width: 900px) {
  body.auth-flow-page .logo {
    width: min(104px, 28vw);
  }
}

/* ── Mobile ── */
@media (max-width: 720px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body.auth-flow-page {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100dvh;
    height: auto;
    justify-content: flex-start;
    padding:
      max(16px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  body.auth-flow-page .logo {
    width: min(96px, 28vw);
    margin-bottom: 18px;
  }

  body.auth-flow-page h1 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    word-break: break-word;
  }

  body.auth-flow-page p.lead {
    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
    margin-bottom: 20px;
    padding: 0 10px;
  }

  body.auth-flow-page a.btn,
  body.auth-flow-page button.btn {
    font-size: 0.875rem;
    min-height: 44px;
  }

  body.auth-flow-page .activation-wrap {
    font-size: 0.9rem;
    padding: 16px 14px;
    margin-top: 20px;
  }

  body.auth-flow-page .instruction {
    font-size: clamp(0.9rem, 3.5vw, 0.95rem);
  }

  body.auth-flow-page .command-wrap {
    font-size: 0.875rem;
  }

  body.auth-flow-page .command-wrap code {
    font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    word-break: break-all;
  }

  body.auth-flow-page .chat-link,
  body.auth-flow-page .copy-btn {
    font-size: 0.75rem;
    min-height: 44px;
  }

  body.auth-flow-page .sub {
    font-size: 0.9rem;
    padding: 0 12px;
  }

  body.auth-flow-page .hint {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  body.auth-flow-page h1 {
    font-size: clamp(1.25rem, 7vw, 1.55rem);
  }

  body.auth-flow-page .command-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  body.auth-flow-page {
    padding-top: 8px;
    padding-bottom: 12px;
  }

  body.auth-flow-page .logo {
    width: min(120px, 22vh);
    margin-bottom: 8px;
  }

  body.auth-flow-page h1 {
    font-size: clamp(1.25rem, 5vh, 2rem);
    margin-bottom: 8px;
  }

  body.auth-flow-page p.lead {
    margin-bottom: 12px;
    font-size: 0.95rem;
  }

  body.auth-flow-page .activation-wrap {
    margin-top: 12px;
  }
}

/* ── twitch-link-result (carte centrée) ── */
@media (max-width: 600px) {
  body.auth-card-page {
    padding:
      max(16px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    align-items: flex-start;
    padding-top: max(24px, env(safe-area-inset-top));
  }

  body.auth-card-page .card {
    padding: 28px 20px;
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
  }

  body.auth-card-page .icon {
    font-size: 3rem;
    margin-bottom: 14px;
  }

  body.auth-card-page h1 {
    font-size: 1.25rem;
  }

  body.auth-card-page .roles-info {
    padding: 12px 14px;
  }
}

@media (max-width: 480px) {
  body.auth-card-page .card-actions,
  body.auth-card-page .btn-row {
    flex-direction: column;
    width: 100%;
  }

  body.auth-card-page .btn,
  body.auth-card-page a.btn {
    width: 100%;
    text-align: center;
  }
}