/* Mobile responsive — QuiAppel */
@media (max-width: 767px) {
  /* Header */
  .px-7 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .mr-14 { margin-right: 0 !important; }
  .navbar-burger svg { width: 40px !important; height: 40px !important; }

  /* Kill huge negative margins */
  .-m-8, .-m-16 { margin: 0 !important; }

  /* Reduce paddings */
  .p-8 { padding: 1rem !important; }
  .p-12 { padding: 1rem !important; }
  .p-16 { padding: 1rem !important; }
  .p-11 { padding: 0.75rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Bottom margins */
  .mb-16 { margin-bottom: 1.5rem !important; }
  .mb-20 { margin-bottom: 1.5rem !important; }

  /* Section spacing */
  .py-32 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-24 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-20 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-16 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-12 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

  /* === TYPOGRAPHIE — hierarchie stricte === */
  /* H1 = toujours le plus grand */
  h1, h1.text-8xl, h1.text-7xl, h1.text-6xl, h1.text-5xl, h1.text-4xl, h1.text-3xl, h1.text-2xl, h1.text-xl {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  /* H2 */
  h2, h2.text-8xl, h2.text-7xl, h2.text-6xl, h2.text-5xl, h2.text-4xl, h2.text-3xl, h2.text-2xl {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  /* H3 */
  h3, h3.text-2xl, h3.text-xl {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* H4 */
  h4 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  /* Utility text classes — capped pour ne jamais depasser H1 */
  .text-8xl, .text-7xl, .text-6xl, .text-5xl {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
  }
  .text-4xl { font-size: 1.2rem !important; line-height: 1.25 !important; }
  .text-3xl { font-size: 1.1rem !important; line-height: 1.3 !important; }
  .text-2xl { font-size: 1rem !important; line-height: 1.3 !important; }
  .text-xl { font-size: 0.95rem !important; }
  .text-lg { font-size: 0.9rem !important; }

  /* Images max 100px height (except tiny icons) */
  section img:not([width=12]):not([width=22]):not([width=24]):not([width=56]):not(.w-40) {
    max-height: 100px !important;
    width: auto !important;
    object-fit: contain;
  }
  .w-20 { width: 3rem !important; }
  .h-20 { height: 3rem !important; }
  .w-20 img, .h-20 img { max-height: 24px !important; }

  /* Search form */
  .rounded-3xl { border-radius: 1rem !important; }

  /* Cards */
  .pt-7 { padding-top: 1rem !important; }
  .pb-8 { padding-bottom: 1rem !important; }

  /* How it works image */
  .md\:w-1\/2 img.mx-auto { max-height: 80px !important; }

  /* Container */
  .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 { font-size: 2rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.6rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.3rem !important; line-height: 1.3 !important; }
  .text-8xl, .text-7xl, .text-6xl { font-size: 1.6rem !important; line-height: 1.25 !important; }
  .text-5xl, .text-4xl { font-size: 1.3rem !important; }

  section img:not([width=12]):not([width=22]):not([width=24]):not([width=56]) {
    max-height: 100px !important;
    width: auto !important;
  }

  .py-32 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .mb-20 { margin-bottom: 2rem !important; }
}

/* Hero BG image — only visible on mobile */
@media (min-width: 768px) {
  .relative.z-20.overflow-hidden[style*="background"] {
    background: none !important;
  }
}
@media (max-width: 767px) {
  .relative.z-20.overflow-hidden[style*="background"] > .container {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(2px);
  }
}

/* Centre hero text on mobile */
@media (max-width: 767px) {
  .xl\:max-w-2xl { text-align: center; }
  .xl\:max-w-2xl p { text-align: center; }
  .md\:max-w-md { max-width: 100% !important; }
}