/* ═══════════════════════════════════════════════════════════════════════════
   v90.37.2 — Overrides responsive mobile-first
   Fichier chargé EN DERNIER pour battre la spécificité de
   cinematic-components.css (0,2,1) et style.css (0,1,0).
   Source : RESPONSIVE-AUDIT-v90.37.2.md (22 bugs identifiés)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Anti-overflow global ──────────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
body.has-nav-cinematic { overflow-x: hidden; }
.bg-mesh, .bg-mesh-blob { max-width: 100vw; overflow: hidden; pointer-events: none; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* ─── Bug 1 : Footer-grid sur mobile ─────────────────────────────────────── */
@media (max-width: 1023px) {
  footer.site-footer .footer-grid,
  footer.site-footer .footer-grid:has(> :nth-child(3):last-child),
  footer.site-footer .footer-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  footer.site-footer .footer-grid,
  footer.site-footer .footer-grid:has(> :nth-child(3):last-child),
  footer.site-footer .footer-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px 56px !important;
  }
}

/* ─── Bug 2 : TV ASTRO — DÉPLACÉ vers tv-astro.html inline (v90.37.3)
   La refonte Design C inversé (texte top, vidéo bottom, controls fixés sous nav)
   est gérée directement dans le <style> inline de tv-astro.html avec
   sélecteurs spécifiques et !important. Aucune override nécessaire ici. ─── */

/* ─── Bug 3 : transit-item ne tronque plus le 2e bloc ────────────────────── */
@media (max-width: 720px) {
  .transit-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
  }
  .transit-item b {
    min-width: 0;
    font-size: 0.98rem;
  }
  .transit-item span {
    font-size: 0.82rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ─── Bug 4 : Roue mondiale recentrée + aspect-ratio respecté ─────────────── */
@media (max-width: 768px) {
  #home-live-wheel {
    min-height: 0 !important;
    max-width: min(100%, 360px);
    margin: 0 auto;
  }
  .live-wheel-wrap {
    padding: 30px 8px 20px;
    align-items: center;
  }
  #home-live-wheel svg {
    overflow: visible !important;
    display: block;
    margin: 0 auto;
  }
}
@media (max-width: 1024px) {
  .live-wheel-wrap { padding: 60px clamp(16px, 5vw, 60px) 30px; }
}

/* ─── Bug 5 : sky-card texte coupé ───────────────────────────────────────── */
@media (max-width: 720px) {
  .sky-card { padding: 22px 18px !important; }
  .sky-card .sk-title {
    font-size: 1.25rem !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .sky-card .sk-body {
    font-size: 0.82rem !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .sky-card .sk-kicker { word-break: keep-all; }
}

/* ─── Bug 6 : sec-heading trop grand mobile ──────────────────────────────── */
@media (max-width: 720px) {
  .sec-heading {
    font-size: clamp(1.85rem, 7.5vw, 2.8rem) !important;
    line-height: 1.05 !important;
    max-width: 100%;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
  }
}

/* ─── Bug 7 : cap-card-tags tronqués ────────────────────────────────────── */
@media (max-width: 720px) {
  .cap-card-tags { max-width: 100% !important; justify-content: flex-start; margin-top: 8px; }
  .cap-card-top { flex-wrap: wrap; }
  .cap-card-tag { text-overflow: ellipsis; }
}

/* ─── Bug 8 : zodiac-nav 12 glyphes sur 2 lignes mobile ───────────────────── */
@media (max-width: 480px) {
  .zodiac-nav {
    flex-wrap: wrap !important;
    gap: 0.3rem 0.4rem !important;
    padding: 0.6rem 0.4rem 1rem !important;
  }
  .zodiac-nav-glyph {
    flex: 0 0 calc(16.66% - 0.4rem) !important;
    font-size: 1.7rem !important;
    padding: 0.45rem 0.2rem !important;
    min-height: 44px;
  }
}

/* ─── Bug 10 : figures-stats gap réduit + colonne ─────────────────────────── */
@media (max-width: 720px) {
  .figures-stats { gap: 24px !important; flex-direction: column; align-items: center; }
  .figures-card { padding: 24px 20px !important; }
}

/* ─── Bug 12 : footer-bottom force column avec spec forte ─────────────────── */
@media (max-width: 720px) {
  footer.site-footer .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    text-align: left;
  }
}

/* ─── Bug 13 : cn-form-double palier tablette ────────────────────────────── */
@media (min-width: 768px) and (max-width: 960px) {
  .cn-form-double { grid-template-columns: 1fr !important; max-width: 540px; margin: 0 auto; }
}

/* ─── Bug 14 : syn-amp masqué sur mobile ──────────────────────────────────── */
@media (max-width: 720px) {
  .syn-amp { display: none !important; }
  .syn-person-card { margin-bottom: 16px; }
}

/* ─── Bug 15 : pa-aspects-list en colonne ─────────────────────────────────── */
@media (max-width: 480px) {
  .pa-aspects-list li {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px 0 !important;
  }
}

/* ─── Bug 16 : bsm-chapter palier petit écran ─────────────────────────────── */
@media (max-width: 420px) {
  .bsm-chapter { padding: 1.4rem 1rem !important; }
  .bsm-chapter-title { font-size: 1.05rem !important; }
  .bsm-upsell-card { padding: 1.8rem 1.1rem !important; }
}

/* ─── Bug 17 : ra-card CTA full width mobile ──────────────────────────────── */
@media (max-width: 480px) {
  .ra-card { padding: 1.4rem 1rem !important; }
  .ra-mantra { padding: 1.5rem 1rem !important; }
  .ra-actions { flex-direction: column !important; align-items: stretch !important; }
  .ra-actions .btn { width: 100% !important; }
}

/* ─── Bug 18 : grimoire-cards palier tablette 2 cols ──────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .grimoire-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Bug 21 : celebs-sign glyphe + nom paliers ──────────────────────────── */
@media (min-width: 541px) and (max-width: 720px) {
  .celebs-sign-glyph-big { font-size: 3.2rem !important; }
  .celebs-sign-name { font-size: 1.4rem !important; }
  .celebs-sign-header { padding: 1.1rem 1.2rem !important; gap: 1rem !important; }
}

/* ─── Bug 22 : sg-push-actions zone tactile WCAG ──────────────────────────── */
@media (max-width: 480px) {
  .sg-push-actions { flex-direction: column !important; gap: 8px !important; }
  .sg-push-actions button { padding: 13px 18px !important; min-height: 44px !important; }
}

/* ─── Recommandations globales : word-break tous les titres mobile ────────── */
@media (max-width: 720px) {
  h1, h2, h3, h4,
  .sec-heading, .sk-title, .cap-card-title,
  .syn-title, .pr-hero-title, .voyage-title,
  .theme-hero-title, .palazzo-title {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}