/* =================================================================
   OTT Premium — Mobile Responsive Supplement
   Loaded after Bootstrap + main.min.css via head.php
   Targets all custom components across every page
   ================================================================= */


/* ── 1. TYPOGRAPHY ───────────────────────────────────────────────── */

@media (max-width: 576px) {
  /* Inline h1 font-sizes (pages use style="font-size: 2.4rem") */
  h1 { font-size: clamp(2.8rem, 10vw, 3.5rem) !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important; }
  .section-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; letter-spacing: -1px !important; }
}


/* ── 2. NAVBAR & HEADER ─────────────────────────────────────────── */

/* Hide logo text on very small phones to avoid overflow */
@media (max-width: 360px) {
  .logo-text { font-size: 1.05rem; }
}

/* Prevent nav overlay from leaving a gap on the right on old iOS */
#nav { -webkit-overflow-scrolling: touch; overflow-y: auto; }


/* ── 3. WHATSAPP FLOATING BUTTON ────────────────────────────────── */

@media (max-width: 576px) {
  .position-fixed img[alt="WhatsApp"] {
    width: 54px !important;
    height: 54px !important;
  }
}


/* ── 4. BREADCRUMB ─────────────────────────────────────────────── */

@media (max-width: 400px) {
  .breadcrumb-link { font-size: 0.78rem; }
}


/* ── 5. HERO STAT PILLS (all pages) ─────────────────────────────── */

@media (max-width: 480px) {
  /* Stat pill rows use inline flex; ensure proper wrapping */
  .stat-pill .val  { font-size: 1.1rem; }
  .stat-pill .lbl  { font-size: 0.6rem; }
}


/* ── 6. TELECHARGEMENT.PHP ───────────────────────────────────────── */

/* Category filter tabs: smaller on mobile */
@media (max-width: 480px) {
  .cat-tab { padding: 7px 13px; font-size: 0.73rem; }
}

/* App cards */
@media (max-width: 480px) {
  .app-card  { padding: 16px; }
  .app-icon  { width: 44px; height: 44px; font-size: 1.4rem; margin-bottom: 10px; }
  .app-name  { font-size: 0.9rem; }
  .app-desc  { font-size: 0.8rem; }
  .dl-btn,
  .dl-btn-outline { padding: 10px 14px; font-size: 0.8rem; }
}

/* Recommended ribbon: don't clip text */
@media (max-width: 576px) {
  .recommended-ribbon { font-size: 0.55rem; padding: 3px 10px; }
}

/* Guide/installation banner at bottom of telechargement */
@media (max-width: 576px) {
  .guide-banner { padding: 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Category section header */
@media (max-width: 480px) {
  .cat-header { padding: 12px 16px; }
  .cat-header-icon { font-size: 1.3rem; }
  .cat-header-title { font-size: 0.9rem; }
  .cat-header-sub   { font-size: 0.72rem; }
}


/* ── 7. STATUT-SERVEURS.PHP ─────────────────────────────────────── */

/* Plan cards */
@media (max-width: 576px) {
  .plan-card { padding: 20px 16px; }
  .service-row { font-size: 0.82rem; gap: 6px; }
  .service-name { flex: 1; min-width: 0; }
}

/* Uptime bar: reduce block height on tiny screens */
@media (max-width: 400px) {
  .uptime-block { height: 18px; }
  .uptime-bar-wrap { gap: 2px; }
}

/* Status badges: allow text wrap */
@media (max-width: 400px) {
  .badge-operational,
  .badge-degraded,
  .badge-incident { font-size: 0.68rem; padding: 4px 10px; }
}

/* Infrastructure comparison table: horizontal scroll */
.infra-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
}
.infra-table-scroll > div {
  /* Remove border/radius from inner container since parent handles it */
  border: none !important;
  border-radius: 0 !important;
  min-width: 520px;
}

/* Incident items */
@media (max-width: 576px) {
  .incident-item { padding: 16px 16px; }
  .incident-title { font-size: 0.88rem; }
}

/* Stat pills grid (col-6 col-md-3 already handles 2-column) ✓ */


/* ── 8. CHANGER-DNS-ANDROID-TV.PHP ──────────────────────────────── */

/* Platform tabs: smaller text on mobile */
@media (max-width: 480px) {
  .platform-tab { padding: 7px 13px; font-size: 0.73rem; }
}

/* Step cards */
@media (max-width: 576px) {
  .step-card { padding: 20px 16px; }
  .step-title { font-size: 0.92rem; }
  .step-desc  { font-size: 0.82rem; }
}

/* Code pills: prevent long IPs from overflowing */
.code-pill { word-break: break-all; }
@media (max-width: 400px) {
  .code-pill { font-size: 0.72rem !important; padding: 2px 7px !important; }
}

/* DNS comparison table */
@media (max-width: 576px) {
  .dns-table th,
  .dns-table td { padding: 10px 10px; font-size: 0.76rem; }
  .dns-table .dns-name { font-size: 0.82rem; }
}

/* Tip / warning / info boxes: stack icon and text on tiny screens */
@media (max-width: 400px) {
  .tip-box,
  .warning-box,
  .info-box { padding: 12px 14px; gap: 8px; }
  .tip-icon { font-size: 1rem; }
  .tip-text  { font-size: 0.8rem; }
}

/* Related links grid (col-lg-4 col-md-6 handles most, but nav-anchor needs care) */
@media (max-width: 576px) {
  .nav-anchor { padding: 7px 12px; font-size: 0.8rem; }
}


/* ── 9. MEILLEUR-DNS-POUR-IPTV.PHP ──────────────────────────────── */

/* DNS cards */
@media (max-width: 576px) {
  .dns-card    { padding: 20px 16px; }
  .dns-name-big{ font-size: 1rem; }
  .dns-ip-row  { font-size: 0.8rem; word-break: break-all; }
  .dns-desc    { font-size: 0.82rem; }
  .dns-badge   { font-size: 0.62rem; }
}

/* Pros / cons: stack vertically on small phones */
@media (max-width: 500px) {
  .pros-cons { flex-direction: column; }
  .pros, .cons { flex: none; }
}

/* Verdict ribbon: don't clip */
@media (max-width: 576px) {
  .verdict-ribbon { font-size: 0.55rem; padding: 3px 10px; right: 0; }
}

/* Metric rows */
@media (max-width: 400px) {
  .metric-row  { font-size: 0.75rem; }
  .metric-label { flex: 1; min-width: 0; }
}

/* Score bars */
@media (max-width: 400px) {
  .score-bar-label span { font-size: 0.68rem; }
}

/* Use-case cards */
@media (max-width: 576px) {
  .use-card { padding: 16px; }
  .use-card-title { font-size: 0.88rem; }
  .use-card-dns   { font-size: 0.82rem; word-break: break-all; }
  .use-card-why   { font-size: 0.76rem; }
}

/* App DNS table: inline badge wrapping */
@media (max-width: 576px) {
  .pro-item,
  .con-item { font-size: 0.74rem; }
}


/* ── 10. FAQ ACCORDIONS (all pages) ──────────────────────────────── */

@media (max-width: 576px) {
  .faq-q   { font-size: 0.88rem; padding: 16px 16px; }
  .faq-a   { font-size: 0.82rem; }
  .faq-item.open .faq-a { padding: 0 16px 16px; }
  /* faq-item from statut-serveurs / other pages that use .tradition-card */
}


/* ── 11. CTA SECTIONS (all pages) ────────────────────────────────── */

/* CTA inner divs have inline padding: 50px 40px — override for mobile */
@media (max-width: 576px) {
  /* Target the CTA inner container by its common style pattern */
  [style*="padding: 50px 40px"] { padding: 30px 20px !important; }
  [style*="padding: 50px"] { padding: 30px 20px !important; }
}

/* CTA buttons: ensure they don't overflow */
@media (max-width: 400px) {
  [style*="padding: 14px 32px"] { padding: 12px 20px !important; font-size: 0.85rem !important; }
}


/* ── 12. FOOTER ─────────────────────────────────────────────────── */

/* Social links: allow wrap */
@media (max-width: 576px) {
  .footer-social { flex-wrap: wrap; }
}


/* ── 13. SECTION HEADER (global .section-title / .section-subtitle) */

@media (max-width: 576px) {
  .section-header { margin-bottom: 40px; }
  .section-subtitle { font-size: 0.92rem; }
}


/* ── 14. GRADIENT CLASS ─────────────────────────────────────────── */
/* Already defined in main.min.css — ensure it works on all spans */
.gradient {
  background: linear-gradient(135deg, var(--accent-red), var(--accent-gold), var(--accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 15. INDEX.PHP — TRADITIONS GRID ──────────────────────────── */

/* The inline minmax(400px,1fr) overrides the class-level media query.
   Force single column below 480px to prevent horizontal overflow. */
@media (max-width: 480px) {
  .traditions-grid[style] {
    grid-template-columns: 1fr !important;
  }
}


/* ── 16. GENERAL OVERFLOW GUARD ─────────────────────────────────── */

/* Prevent ANY element from causing horizontal page scroll */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* Tables that don't have Bootstrap .table-responsive: make scrollable */
  table:not([class]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Ensure images never exceed their container */
img { max-width: 100%; height: auto; }