/*
 * responsive.css — Mobile-first improvements pour SecretStory.live
 * Inclus dans toutes les pages publiques via <link>
 * Breakpoints : 480px (small mobile), 640px (mobile), 768px (tablet), 1024px (laptop)
 */

/* ════════════════════════════════════════
   GLOBALS
   ════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Évite le zoom iOS sur les inputs */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* empêche le zoom iOS */
  }
}

/* Tap targets min 44px */
@media (max-width: 768px) {
  button, .btn, .nav-link, .cta-btn, a.btn {
    min-height: 44px;
  }
  /* Débordements horizontal */
  body { overflow-x: hidden; }
  img  { max-width: 100%; height: auto; }
}

/* ════════════════════════════════════════
   INDEX.PHP — NAVIGATION
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header {
    padding: 0 16px;
    height: 56px;
  }
  .logo { font-size: .85rem; }

  /* Hamburger button */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .25s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav mobile — drawer */
  .header-nav {
    display: none !important;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: rgba(7,9,26,.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-direction: column !important;
    padding: 16px;
    gap: 10px !important;
    z-index: 999;
    flex-wrap: nowrap !important;
  }
  .header-nav.open {
    display: flex !important;
  }
  .header-nav .nav-link,
  .header-nav .user-pill {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    font-size: .9rem;
    border-radius: 12px;
  }
}

/* On desktop, jamais de hamburger */
@media (min-width: 769px) {
  .hamburger { display: none !important; }
}

/* ════════════════════════════════════════
   INDEX.PHP — HERO & SECTIONS
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero { padding: 70px 16px 40px; gap: 14px; }
  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.8rem); letter-spacing: -1px; }
  .hero-sub { font-size: .9rem; line-height: 1.6; }
  .hero-date { font-size: .78rem; padding: 8px 14px; text-align: center; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .cta-btn { text-align: center; padding: 14px; font-size: .9rem; }

  .countdown { gap: 8px; }
  .time-box  { padding: 10px 12px; min-width: 64px; }
  .time-number { font-size: 1.6rem; }
  .time-label  { font-size: .62rem; }

  /* Features grid */
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .feat-card { padding: 16px 12px; }
  .feat-icon { font-size: 1.5rem; }
  .feat-card h3 { font-size: .82rem; }
  .feat-card p  { font-size: .72rem; }

  .section-wrap { padding: 40px 0; }
  .section-head h2 { font-size: 1.3rem; }
  .wrap { padding: 0 12px; }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════
   INDEX.PHP — CHAT
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  .chat-section { padding: 0 8px 20px; }
  .chat-header  { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .chat-mod-bar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .chat-mod-quick { padding: 6px 10px; font-size: .75rem; }
  .chat-input-row input { font-size: 16px !important; }
}

/* ════════════════════════════════════════
   LECTEUR VIDÉO — contrôles natifs
   On masque les boutons natifs Cast / téléchargement qui s'empilent tout
   à droite (et le gros bouton Cast en overlay coin haut-droit sur Chrome
   mobile). AirPlay est CONSERVÉ (natif Safari/iOS) — on n'y touche pas.
   ════════════════════════════════════════ */
video::-webkit-media-controls-overlay-cast-button { display: none !important; }
video::-internal-media-controls-overlay-cast-button { display: none !important; }
video::-webkit-media-controls-cast-button { display: none !important; }
video::-webkit-media-controls-download-button { display: none !important; }

/* ════════════════════════════════════════
   LIVE.PHP — HEADER & LAYOUT
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  .live-header { padding: 10px 12px; gap: 8px; }
  .live-header h1 { font-size: .9rem; }
  .live-header-badges { gap: 4px; flex-wrap: wrap; }
  .live-header-actions { gap: 6px; }
  .live-header-actions .btn { padding: 7px 12px; font-size: .75rem; }

  /* Barre de contrôles maison : passe à la ligne au lieu de déborder
     à droite, et chaque bouton reste atteignable au pouce. */
  .player-controls {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    justify-content: flex-start;
  }
  .player-controls .vol-range { flex: 1 1 90px; max-width: none; }
  .player-controls .ctrl-label { display: none; } /* libellé « Volume » superflu sur mobile */
  .player-controls .quality-select,
  .player-controls .ctrl-btn { min-height: 40px; }

  /* DVR : idem, pas de débordement horizontal */
  .dvr-controls { flex-wrap: wrap; gap: 8px; }
  .dvr-controls .dvr-seek { flex: 1 1 100%; order: 5; }
}

@media (max-width: 640px) {
  /* Sur mobile : tabs Vidéo / Chat */
  .live-body { position: relative; }

  .live-tab-bar {
    display: flex !important;
    background: rgba(13,18,37,.95);
    border-top: 1px solid rgba(255,255,255,.08);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    height: 54px;
  }
  .live-tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: color .2s;
    font-family: inherit;
  }
  .live-tab-btn.active { color: #00d8ff; }
  .live-tab-btn .tab-icon { font-size: 1.1rem; }

  /* player-zone prend tout quand actif */
  .player-zone {
    min-height: calc(100vw * 9 / 16);
    max-height: 55vh;
  }
  /* switchLiveTab() (live.php) pose la classe sur le PARENT de #playerZone
     (.player-wrap), pas sur .player-zone lui-même — le sélecteur doit matcher
     ça, sinon la règle ne s'applique jamais (constaté : dormant, invisible car
     recouvert par le chat plein écran, mais le lecteur restait actif/décodait
     en arrière-plan sur l'onglet Chat). */
  .player-wrap.tab-hidden { display: none; }

  /* Bannières promo/statut (Finale, Essai VIP, Accès Admin…) masquées quand l'onglet
     Chat est actif : elles vivent au-dessus de .live-body et gonflent --ss-live-fixedtop
     (mesuré en JS) d'autant — avec plusieurs bannières actives à la fois, le chat plein
     écran ne recevait plus que quelques dizaines de pixels de hauteur (zone de saisie
     hors écran, injoignable). Elles n'ont pas leur place sur l'onglet Chat de toute façon
     (l'utilisateur y est venu pour discuter, pas pour voir une promo). */
  body.chat-open .live-promos { display: none; }

  /* chat sidebar plein écran quand actif */
  .chat-sidebar {
    position: fixed !important;
    /* --ss-live-fixedtop = vraie hauteur mesurée en JS (header + bannières promo/finale/
       admin, variable selon la page) ; 56px n'est qu'un secours si le JS n'a pas tourné.
       Avant : la valeur fixe recouvrait le bas du header (boutons Accueil/Chat/⛶/bug)
       dès qu'une bannière s'ajoutait au-dessus. */
    inset: var(--ss-live-fixedtop, 56px) 0 54px 0 !important; /* sous header, au-dessus de la tab bar */
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-top: none !important;
    z-index: 100;
    transition: transform .25s ease;
  }
  .chat-sidebar.tab-hidden {
    transform: translateX(100%);
    pointer-events: none;
  }

  /* Poll widget sur mobile */
  .poll-widget { bottom: 62px !important; left: 8px; width: calc(100vw - 16px) !important; }

  /* Emoji picker */
  .emoji-picker-live { left: 0; right: 0; width: auto; max-width: 100%; border-radius: 10px 10px 0 0; bottom: 56px; }

  /* Marges body pour la tab bar fixe */
  body.live-page { padding-bottom: 54px; }
}

/* Desktop : tab bar invisible */
@media (min-width: 641px) {
  .live-tab-bar { display: none !important; }
}

/* ════════════════════════════════════════
   WAIT.PHP
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  .wait-hero { padding: 80px 16px 40px; }
  .wait-hero h1 { font-size: 2rem; }
  .wait-cta { flex-direction: column; align-items: stretch; }
  .wait-cta a, .wait-cta button { text-align: center; }
  .partner-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
}

/* ════════════════════════════════════════
   REPLAYS.PHP
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  .replays-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .replay-card { padding: 14px; }
}
@media (max-width: 480px) {
  .replays-grid { grid-template-columns: 1fr !important; }
  .replays-filters { flex-direction: column; }
  .replays-filters select, .replays-filters input { width: 100%; }
}

/* ════════════════════════════════════════
   FORMS — LOGIN, REGISTER
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  .card { padding: 24px 18px !important; border-radius: 16px !important; margin-top: 50px; }
  .top-bar { padding: 12px 16px; }
}

/* ════════════════════════════════════════
   ACCOUNT PAGES
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .share-grid { grid-template-columns: 1fr 1fr !important; }
  table { font-size: .75rem; }
  th, td { padding: 7px 8px; }
}

/* ════════════════════════════════════════
   LANCEMENT.PHP
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero { padding: 90px 16px 50px; }
  .links-grid { grid-template-columns: 1fr 1fr !important; padding: 0 12px; gap: 10px; }
  .link-card { padding: 16px; }
  .link-card .icon { font-size: 1.7rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .cta-big { text-align: center; padding: 14px; }
}
@media (max-width: 400px) {
  .links-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════
   ADMIN PAGES — basique
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  .wrap { padding: 16px 12px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filters { flex-direction: column; }
  .filters input, .filters select { width: 100%; }
  .topbar { padding: 10px 14px; }
}

/* ════════════════════════════════════════
   UTILITAIRES GLOBAUX MOBILE
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Cartes pleines largeur */
  .card { border-radius: 14px; }

  /* Texte plus lisible sur petit écran */
  p { line-height: 1.65; }

  /* Scroll smooth */
  html { scroll-behavior: smooth; }

  /* Badges lisibles */
  .badge, .pill { font-size: .68rem; padding: 2px 7px; }
}