/* ══════════════════════════════════════════════════════════════════
   PALAMA-TV — MODE IPAD / TABLETTE (html.device-ipad)
   Layout horizontal · Touch targets agrandis · Qualité 720p auto
   NE PAS modifier — n'affecte PAS le mode PC (style.css intact)
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   LAYOUT — horizontal comme PC, mais adapté tactile
   ───────────────────────────────────────────── */
html.device-ipad .app-wrapper {
  height: 100dvh;
}

/* Sidebar toujours élargie (pas de mode collapsed par défaut) */
html.device-ipad .sidebar {
  width: 260px;
  min-width: 260px;
}

html.device-ipad .sidebar.collapsed {
  width: 72px;
  min-width: 72px;
}

/* Masquer le hamburger (sidebar toujours visible) */
html.device-ipad .mobile-menu-btn {
  display: none;
}

/* ─────────────────────────────────────────────
   TOPBAR — légèrement agrandi pour les doigts
   ───────────────────────────────────────────── */
html.device-ipad .topbar {
  height: 52px;
  padding: 0 18px;
  gap: 12px;
}

html.device-ipad .mode-btn {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
}

html.device-ipad .mode-icon {
  width: 16px;
  height: 16px;
}

/* ─────────────────────────────────────────────
   TOUCH TARGETS — min 44px (Apple HIG)
   ───────────────────────────────────────────── */
html.device-ipad .channel-item {
  min-height: 52px;
  padding: 0 14px;
}

html.device-ipad .channel-fav-btn {
  width: 38px;
  height: 38px;
}

html.device-ipad .cat-btn {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
}

html.device-ipad .filter-pill {
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
}

html.device-ipad .btn-icon,
html.device-ipad .btn-quality,
html.device-ipad .btn-release,
html.device-ipad .btn-reset-menu {
  min-height: 38px;
}

html.device-ipad .source-btn {
  min-height: 38px;
  padding: 0 12px;
  font-size: 12px;
}

/* ─────────────────────────────────────────────
   PLAYER — légèrement plus petit que PC pour la bande passante
   ───────────────────────────────────────────── */
html.device-ipad .player-container {
  /* Laisse le flex gérer la hauteur normalement */
}

/* ─────────────────────────────────────────────
   VOD GRID — 3 colonnes (moins que PC, confort tactile)
   ───────────────────────────────────────────── */
html.device-ipad .vod-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ─────────────────────────────────────────────
   DROPDOWN / MENUS — plus larges pour les doigts
   ───────────────────────────────────────────── */
html.device-ipad .quality-dropdown {
  min-width: 240px;
}

html.device-ipad .quality-opt {
  min-height: 44px;
  padding: 10px 14px;
}

html.device-ipad .sleep-opt {
  min-height: 40px;
  padding: 8px 14px;
}

/* ─────────────────────────────────────────────
   SIDEBAR — textes toujours visibles
   ───────────────────────────────────────────── */
html.device-ipad .sidebar .channel-name {
  font-size: 13px;
}

html.device-ipad .sidebar .channel-meta {
  font-size: 11px;
}

/* Logo channel image légèrement plus grande */
html.device-ipad .channel-logo {
  width: 34px;
  height: 34px;
}

/* ─────────────────────────────────────────────
   YOUTUBE / WEB VIEW — 3 colonnes
   ───────────────────────────────────────────── */
html.device-ipad .yt-results {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px;
}

/* ─────────────────────────────────────────────
   LANDING — centré, cards plus grandes
   ───────────────────────────────────────────── */
html.device-ipad .device-card {
  width: 200px;
  padding: 32px 24px 26px;
}

html.device-ipad .device-card-svg {
  width: 100px;
  height: 84px;
}

/* ─────────────────────────────────────────────
   TEXTES — légèrement agrandis pour la lisibilité
   ───────────────────────────────────────────── */
html.device-ipad body {
  font-size: 14px;
}

html.device-ipad .channel-name {
  font-size: 13px;
}

/* ─────────────────────────────────────────────
   SAFE AREAS (si iPad plein écran)
   ───────────────────────────────────────────── */
html.device-ipad .sidebar {
  padding-bottom: env(safe-area-inset-bottom);
}

html.device-ipad .topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(52px + env(safe-area-inset-top));
}

/* ─────────────────────────────────────────────
   BADGE DEVICE dans le topbar
   ───────────────────────────────────────────── */
.device-badge {
  display: none;
}

html.device-ipad .device-badge,
html.device-mobile .device-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(124,106,255,0.15);
  border: 1px solid rgba(124,106,255,0.25);
  border-radius: 20px;
  color: rgba(124,106,255,0.9);
  cursor: pointer;
  letter-spacing: .03em;
  flex-shrink: 0;
  transition: all 0.15s;
}

html.device-ipad .device-badge:hover,
html.device-mobile .device-badge:hover {
  background: rgba(124,106,255,0.25);
  border-color: rgba(124,106,255,0.45);
}