/* Mobile readability overrides v5 — adds horizontal breathing room */
html { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }

@media (max-width: 767px) {
  html body { font-size: 18px !important; line-height: 1.6 !important; }

  /* Horizontal breathing room only for the long intro H1 */
  html body #section3 h1 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body p,
  html body li,
  html body span,
  html body a,
  html body label,
  html body div,
  html body td,
  html body .lead {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  html body h1, html body .h1 { font-size: 2.1rem  !important; line-height: 1.2  !important; }
  html body h2, html body .h2 { font-size: 1.7rem  !important; line-height: 1.25 !important; }
  html body h3, html body .h3 { font-size: 1.4rem  !important; line-height: 1.3  !important; }
  html body h4, html body .h4 { font-size: 1.25rem !important; line-height: 1.35 !important; }
  html body h5, html body .h5 { font-size: 1.15rem !important; line-height: 1.4  !important; }
  html body h6, html body .h6 { font-size: 1.05rem !important; }

  /* Carousel captions were sized in vw — tiny on small screens */
  html body .carousel-caption h5 { font-size: 7vw !important;  line-height: 1.2 !important; }
  html body .carousel-caption p  { font-size: 4.2vw !important; line-height: 1.4 !important; }

  /* Slogan / langue block */
  html body #slogan p         { font-size: 1.3rem  !important; }
  html body #slogan .langue p { font-size: 1rem    !important; }

  /* Footer */
  html body footer h2 { font-size: 1.2rem  !important; }
  html body footer p  { font-size: 1rem    !important; line-height: 1.55 !important; }

  /* Buttons tap-friendly */
  html body .button,
  html body button.button,
  html body a.button,
  html body .btn {
    font-size: 1.05rem !important;
    padding: 0.85rem 1.4rem !important;
    line-height: 1.3 !important;
  }

  /* iOS auto-zooms inputs when font < 16px → keep at 16px+ */
  html body .form-control,
  html body input,
  html body textarea,
  html body select {
    font-size: 16px !important;
  }
  html body label { font-weight: 500 !important; }
}

/* Extra tightening on very small screens */
@media (max-width: 380px) {
  html body { font-size: 17px !important; }
  html body p, html body li, html body span, html body a, html body div { font-size: 17px !important; }
  html body h1, html body .h1 { font-size: 1.85rem !important; }
  html body h2, html body .h2 { font-size: 1.5rem  !important; }
}