/* ==========================================================================
   Observatoire Travicy — Mobile responsive fix
   Chargé sur les pages : /observatoire-ia-hotels-2026, /resultats, /score-ia-hotel

   Contexte : les pages ont été générées depuis un design desktop (Claude Design)
   avec styles inline hardcodés. Aucune media query prévue pour mobile.
   Ce fichier override en cascade tous les grids 2-col et paddings excessifs.
   ========================================================================== */

/* ==========================================================================
   PROTECTION GLOBALE
   ========================================================================== */
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* ==========================================================================
   MOBILE (≤ 768px) — priorité au 1 colonne + padding réduit
   ========================================================================== */
@media (max-width: 768px) {

  /* Toutes les grilles inline (2-col ou plus) → 1 col */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Padding sections lourdes (80-150px) → 40-56px */
  [style*="padding:80px"],
  [style*="padding: 80px"],
  [style*="padding:90px"],
  [style*="padding: 90px"],
  [style*="padding:100px"],
  [style*="padding: 100px"],
  [style*="padding:120px"],
  [style*="padding: 120px"] {
    padding: 56px 20px !important;
  }
  [style*="padding:150px"],
  [style*="padding: 150px"] {
    padding: 64px 20px !important;
  }

  /* Padding horizontal 32px → 20px */
  section[style*="padding"],
  div[style*="padding: 60px 32px"],
  div[style*="padding:60px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Titres H1 très gros → font-size mobile */
  h1 { font-size: clamp(28px, 8vw, 40px) !important; letter-spacing: -1px !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 6vw, 32px) !important; letter-spacing: -0.8px !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(18px, 5vw, 24px) !important; }

  /* Font-size clamp inline (34-52px) → réduit */
  [style*="clamp(34px"],
  [style*="clamp(38px"],
  [style*="clamp(44px"] {
    font-size: clamp(24px, 6vw, 34px) !important;
  }

  /* Nav header padding */
  .tv-nav-bar { padding: 14px 20px !important; gap: 14px !important; }

  /* Cartes larges hero → stack propre */
  .hero-grid,
  [class*="hero-grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Podium top 10 stacké */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Data pack : villes 2-col → 1 col */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tableaux 100 hôtels annexe : scroll horizontal si dépassement */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }
  table th, table td { padding: 8px 6px !important; }

  /* Modals cal.com plein écran */
  [style*="max-width:900px"],
  [style*="max-width: 900px"],
  [style*="max-width:800px"],
  [style*="max-width: 800px"] {
    max-width: 100vw !important;
    width: 100vw !important;
  }

  /* Boutons pleine largeur pour ergonomie tactile */
  a[style*="border-radius:100px"],
  a[style*="border-radius: 100px"],
  button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Formulaires : inputs full-width */
  input, select, textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* CTA duo (deux boutons côte à côte) → colonne */
  [style*="display:flex; gap:14px; flex-wrap:wrap"],
  [style*="display: flex; gap: 14px; flex-wrap: wrap"] {
    flex-direction: column !important;
  }
  [style*="display:flex; gap:14px; flex-wrap:wrap"] > a,
  [style*="display: flex; gap: 14px; flex-wrap: wrap"] > a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Barres progression scroll (fixed top) */
  [style*="position:fixed; top:0"],
  [style*="position: fixed; top: 0"] {
    max-width: 100vw !important;
  }
}

/* ==========================================================================
   TRÈS PETIT MOBILE (≤ 380px) — ajustements iPhone SE et similaires
   ========================================================================== */
@media (max-width: 380px) {
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
  [style*="clamp(34px"],
  [style*="clamp(38px"],
  [style*="clamp(44px"] {
    font-size: 24px !important;
  }
  section { padding: 40px 16px !important; }
}