/* =========================================================
   Public site mobile CSS
   Scope: content only
   Important: no header/menu/nav override
   ========================================================= */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 16px;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  main section,
  main .section,
  main .container,
  main .wrapper,
  main .content,
  main .page,
  main .hero,
  main [class*="container"],
  main [class*="wrapper"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  main .container,
  main .wrapper,
  main .content,
  main .section,
  main .hero,
  main [class*="container"],
  main [class*="wrapper"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  main h1 {
    font-size: clamp(32px, 9vw, 46px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  main h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  main h3 {
    font-size: 21px !important;
    line-height: 1.22 !important;
  }

  main p,
  main li {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  main .grid,
  main .cards,
  main .services-grid,
  main .tariffs-grid,
  main .testimonials-grid,
  main .builder-grid,
  main .columns,
  main [class*="grid"],
  main [class*="columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  main .card,
  main [class*="card"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  main .btn,
  main .button,
  main a[style*="padding:13px"],
  main a[style*="padding:14px"],
  main a[style*="padding:15px"],
  main button,
  main input[type="submit"] {
    max-width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  main .hero .btn,
  main .hero .button,
  main .cta .btn,
  main .cta .button,
  main .hero a[style*="padding"],
  main .cta a[style*="padding"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  main table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  main form,
  main input,
  main select,
  main textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  main input,
  main select,
  main textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  main textarea {
    min-height: 132px !important;
  }

  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns:1fr 1.4fr"],
  main [style*="grid-template-columns: 1fr 1.4fr"],
  main [style*="grid-template-columns:1fr 1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  main [style*="grid-column:span 2"],
  main [style*="grid-column: span 2"] {
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   Contact page mobile fix
   ========================================================= */

@media (max-width: 768px) {
  main .contact-page,
  main .contact-section,
  main .contact-wrapper,
  main .contact-container,
  main .contact-content,
  main .contact-grid,
  main .contact-layout,
  main .contact-columns,
  main [class*="contact"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  main .contact-page,
  main .contact-section,
  main .contact-wrapper,
  main .contact-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  main .contact-grid,
  main .contact-layout,
  main .contact-columns,
  main .contact-content,
  main [class*="contact"][class*="grid"],
  main [class*="contact"][class*="layout"],
  main [class*="contact"][class*="columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
  }

  main .contact-info,
  main .contact-details,
  main .contact-form,
  main .contact-card,
  main .contact-block,
  main .contact-map,
  main [class*="contact-info"],
  main [class*="contact-details"],
  main [class*="contact-form"],
  main [class*="contact-card"],
  main [class*="contact-block"],
  main [class*="contact-map"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  main .contact-card,
  main .contact-form,
  main [class*="contact-card"],
  main [class*="contact-form"] {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  main .contact-info h2,
  main .contact-form h2,
  main [class*="contact"] h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1 !important;
    margin-bottom: 22px !important;
  }

  main .contact-info,
  main .contact-details,
  main [class*="contact-info"],
  main [class*="contact-details"] {
    text-align: left !important;
  }

  main .contact-info p,
  main .contact-details p,
  main [class*="contact-info"] p,
  main [class*="contact-details"] p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  main .contact-form form,
  main form[class*="contact"] {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  main .contact-form form > *,
  main form[class*="contact"] > *,
  main .contact-form .form-row,
  main .contact-form .form-group,
  main [class*="form-row"],
  main [class*="form-group"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    box-sizing: border-box !important;
  }

  main .contact-form label,
  main form[class*="contact"] label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 7px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  main .contact-form input,
  main .contact-form select,
  main .contact-form textarea,
  main form[class*="contact"] input,
  main form[class*="contact"] select,
  main form[class*="contact"] textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  main .contact-form input,
  main .contact-form select,
  main form[class*="contact"] input,
  main form[class*="contact"] select {
    min-height: 52px !important;
  }

  main .contact-form textarea,
  main form[class*="contact"] textarea {
    min-height: 140px !important;
    resize: vertical;
  }

  main .contact-form button,
  main .contact-form .btn,
  main .contact-form .button,
  main form[class*="contact"] button,
  main form[class*="contact"] .btn,
  main form[class*="contact"] .button {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  main .contact-map iframe,
  main [class*="contact-map"] iframe,
  main .contact-map img,
  main [class*="contact-map"] img {
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    border-radius: 18px !important;
    display: block !important;
  }

  main .contact-info a,
  main .contact-details a,
  main [class*="contact-info"] a,
  main [class*="contact-details"] a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  main .availability,
  main .opening,
  main .hours,
  main [class*="availability"],
  main [class*="opening"],
  main [class*="hours"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   Contact page: force mobile vertical layout
   ========================================================= */

@media (max-width: 768px) {
  main .business-contact,
  main .business-contact-grid,
  main .contact-business,
  main .contact-business-grid,
  main .contact-page .business-grid,
  main .contact-page .builder-grid,
  main .contact-page .section-grid,
  main .contact-page [class*="grid"],
  main .contact-section [class*="grid"],
  main section:has(.contact-form),
  main section:has(form) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
  }

  main .contact-info,
  main .contact-details,
  main .business-contact-info,
  main [class*="contact-info"],
  main [class*="contact-details"] {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  main .contact-form,
  main .business-contact-form,
  main form,
  main [class*="contact-form"] {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  main .contact-page form,
  main .contact-section form,
  main section:has(form) form {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   FORCE contact page mobile layout
   Scope: /contact only via body.is-contact-page
   ========================================================= */

@media (max-width: 768px) {
  body.is-contact-page main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.is-contact-page main section,
  body.is-contact-page main div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Le conteneur qui contient le formulaire doit devenir vertical */
  body.is-contact-page main section:has(form),
  body.is-contact-page main div:has(> form),
  body.is-contact-page main div:has(form) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
  }

  /* Tous les blocs enfants du conteneur contact prennent 100% */
  body.is-contact-page main section:has(form) > *,
  body.is-contact-page main div:has(form) > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    grid-column: 1 / -1 !important;
    box-sizing: border-box !important;
  }

  /* Bloc informations en premier */
  body.is-contact-page main [class*="info"],
  body.is-contact-page main [class*="detail"],
  body.is-contact-page main [class*="coord"],
  body.is-contact-page main [class*="business"] {
    order: 1 !important;
  }

  /* Bloc formulaire en dessous */
  body.is-contact-page main form,
  body.is-contact-page main [class*="form"] {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.is-contact-page main form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.is-contact-page main form > *,
  body.is-contact-page main input,
  body.is-contact-page main select,
  body.is-contact-page main textarea,
  body.is-contact-page main button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.is-contact-page main input,
  body.is-contact-page main select {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  body.is-contact-page main textarea {
    min-height: 140px !important;
    font-size: 16px !important;
  }

  body.is-contact-page main button,
  body.is-contact-page main .btn,
  body.is-contact-page main .button {
    min-height: 54px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}