/*
 * Correctifs viewport mobile — toutes les pages (layout application).
 * Honor Magic V3 / pliables : éviter 100vw, min-width rigides et débordement horizontal.
 */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#content,
#global-banner,
main {
  min-width: 0;
  max-width: 100%;
}

/* Turbo Native — plein écran, sans navbar web, charte forcée (WebView) */
html.turbo-native {
  --navbar-height: 0px;
}

.turbo-native-shell {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.turbo-native-shell .feature-info-banner {
  top: env(safe-area-inset-top, 0px) !important;
  background-color: #FFF3F7 !important;
  border-color: #B399D4 !important;
}

.turbo-native-shell .feature-info-banner__icon {
  background-color: #F0EBF6 !important;
  color: #FF8C69 !important;
}

.turbo-native-shell .feature-info-banner__cta {
  background-color: #B399D4 !important;
}

.turbo-native-shell .feature-info-banner__dismiss {
  background-color: #FF8C69 !important;
}

/* Legacy markup (main prod) + WebView : #id !important > inline color-mix sans !important */
#feature_info_banner {
  background-color: #FFF3F7 !important;
  border-color: #B399D4 !important;
}

html.turbo-native #feature_info_banner,
body.turbo-native-shell #feature_info_banner {
  top: env(safe-area-inset-top, 0px) !important;
}

#feature_info_banner .feature-info-banner__icon,
#feature_info_banner span.rounded-full.h-8.w-8 {
  background-color: #F0EBF6 !important;
  color: #FF8C69 !important;
}

#feature_info_banner .feature-info-banner__dismiss,
#feature_info_banner button[data-dismiss-target="#feature_info_banner"] {
  background-color: #FF8C69 !important;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* Tables larges : scroll local, pas sur tout le document */
#content table {
  max-width: 100%;
}

#content .overflow-x-auto,
#content [class*="overflow-x-auto"] {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Grilles type « steps » (cobeauty_theme) */
@media (max-width: 640px) {
  .steps .step {
    min-width: 0;
    flex: 1 1 100%;
  }

  .max-w-screen-xl,
  .max-w-screen-2xl,
  .max-w-screen-lg,
  .max-w-screen-md {
    max-width: 100%;
  }
}