/**
 * Responsive global — à charger en dernier (après chauffure-styles et les <style> inline).
 * Fluidifie typos, espacements et éléments qui restaient trop grands sur mobile.
 * + Verrouillage layout : pas de défilement horizontal (complété par la meta viewport).
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overscroll-behavior-x: none;
  touch-action: manipulation;
  position: relative;
}

.page-wrapper {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

.content-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Section métriques : z-index:1 + margin-bottom:-100px (thème Webflow) fait remonter
   la section « À propos » en dessous dans l’empilement → le haut du h2 était masqué. */
.section.home-about-section {
  position: relative;
  z-index: 2;
}

/* Formulaire réservation (hero) : évite le débordement à droite sur mobile / tablette
   (grille 3 colonnes + min-width:auto des enfants flex empêchent le rétrécissement) */
.booking-form-wrapper {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.booking-form {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.left-side-fields,
.right-side-fields,
.booking-form-label-field,
.booking-button-wrapper {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.booking-form .booking-form-field.w-input,
.booking-form .booking-form-field.w-select,
.booking-form input.booking-form-field,
.booking-form select.booking-form-field {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.booking-form .booking-form-button,
.booking-form .booking-form-button.home-booking-form,
.booking-form-button.home-booking-form.w-button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  height: auto !important;
  min-height: 48px !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: clamp(10px, 3vw, 22px) !important;
  padding-right: clamp(10px, 3vw, 22px) !important;
  text-align: center !important;
}

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

@media screen and (max-width: 991px) {
  .hero-content-wrapper {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .left-side-fields,
  .right-side-fields {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .section {
    padding-top: clamp(48px, 8vw, 88px) !important;
    padding-bottom: clamp(48px, 8vw, 88px) !important;
  }

  .section.home-hero-section,
  .home-hero-section {
    padding-top: clamp(56px, 14vw, 100px) !important;
    padding-bottom: clamp(40px, 8vw, 72px) !important;
  }

  .home-hero-section h1,
  .hero-heading-wrapper h1 {
    font-size: clamp(1.75rem, 4.2vw + 1rem, 2.75rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(1.5rem, 3.2vw + 0.85rem, 2.25rem) !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .home-about-section .about-heading h2 {
    line-height: 1.38 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  h3 {
    font-size: clamp(1.15rem, 2vw + 0.65rem, 1.65rem) !important;
  }

  .primary-button,
  .secondary-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: clamp(18px, 5vw, 36px) !important;
    padding-right: clamp(18px, 5vw, 36px) !important;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem) !important;
  }

  /* Bouton « Réserver » du hero : texte un peu plus petit que les autres CTA */
  .home-hero-section .hero-button-right .booking-button,
  .home-hero-section .hero-button-right .booking-button .button-text {
    font-size: clamp(0.7rem, 1.25vw, 0.8rem) !important;
    letter-spacing: 0.05em !important;
  }

  .hero-text-details p {
    font-size: clamp(0.95rem, 1.8vw + 0.75rem, 1.15rem) !important;
    margin-bottom: 1.25rem !important;
  }

  .metric-number {
    font-size: clamp(1.75rem, 5vw + 1rem, 2.75rem) !important;
  }

  .vehicule-title {
    font-size: clamp(1.5rem, 3vw + 1rem, 2rem) !important;
  }

  .vehicule-name {
    font-size: clamp(1.15rem, 2vw + 0.75rem, 1.45rem) !important;
  }

  .vehicule-description,
  .vehicule-text {
    font-size: clamp(0.9rem, 1.5vw + 0.65rem, 1rem) !important;
  }
}

@media screen and (max-width: 767px) {
  .section.steps-section {
    padding-top: clamp(100px, 24vw, 140px) !important;
  }

  .section.contact-section,
  .section.internal-page-hero,
  .section.collection-details-section {
    padding-top: clamp(100px, 22vw, 130px) !important;
  }

  .home-hero-section h1,
  .hero-heading-wrapper h1 {
    font-size: clamp(1.45rem, 5vw + 0.65rem, 2.25rem) !important;
  }

  h2 {
    font-size: clamp(1.3rem, 4vw + 0.55rem, 1.85rem) !important;
    line-height: 1.38 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
  }

  .home-about-section .about-heading,
  .home-about-section .home-about-text-wrapper {
    overflow: visible !important;
    min-width: 0 !important;
  }

  .home-about-section .about-heading h2 {
    font-size: clamp(1.05rem, 3.6vw + 0.42rem, 1.5rem) !important;
    line-height: 1.42 !important;
    letter-spacing: normal !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    margin-bottom: 1rem !important;
  }

  #hero-image-booking {
    transform: scale(1.06) !important;
  }

  .testimonial-stars {
    font-size: clamp(1rem, 4vw, 1.35rem) !important;
    letter-spacing: 2px !important;
  }

  .whatsapp-bubble {
    width: clamp(52px, 15vw, 60px) !important;
    height: clamp(52px, 15vw, 60px) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .whatsapp-bubble img {
    width: clamp(22px, 5.5vw, 28px) !important;
    height: clamp(22px, 5.5vw, 28px) !important;
  }

  .slide-left-arow,
  .w-slider-arrow-left {
    margin-left: 0 !important;
  }

  .slide-right-arow,
  .w-slider-arrow-right {
    margin-left: 0 !important;
  }

  .testimonial-item {
    min-height: 0 !important;
    padding: clamp(24px, 6vw, 36px) clamp(16px, 4vw, 22px) !important;
  }

  .booking-modal-title {
    font-size: clamp(1.15rem, 4vw, 1.5rem) !important;
  }

  /* Bannière marketing : cartes centrées, pas de min 280px > largeur utile */
  .marketing-section .home-banner-wrapper .banner {
    padding: clamp(32px, 8vw, 60px) clamp(16px, 5vw, 40px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .marketing-section .home-banner-wrapper .banner .banner-values-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .marketing-section .home-banner-wrapper .banner .banner-value-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .marketing-section .home-banner-wrapper .banner-heading-wrapper .banner-heading {
    font-size: clamp(1.35rem, 5vw, 2.5rem) !important;
  }

  /* Sous-titres hero + section services : plus lisibles sur mobile */
  .home-hero-section .subheadline,
  .home-hero-section .hero-text-details .subheadline {
    font-size: clamp(0.88rem, 3.7vw, 1.06rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.35 !important;
  }

  .home-hero-section .subheadline-line {
    height: 4px !important;
    min-width: 48px !important;
  }

  .home-hero-section .subheadline-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  #services .services-subheadline,
  .services-section .services-subheadline {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #services .subheadline-wrapper,
  .services-section .subheadline-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  #services .subheadline,
  .services-section .subheadline {
    font-size: clamp(0.86rem, 3.5vw, 1.02rem) !important;
    letter-spacing: 0.11em !important;
    line-height: 1.35 !important;
  }

  #services .subheadline-line,
  .services-section .subheadline-line {
    height: 4px !important;
  }
}

@media screen and (max-width: 479px) {
  .home-hero-section h1,
  .hero-heading-wrapper h1 {
    font-size: clamp(1.25rem, 6.2vw + 0.35rem, 1.75rem) !important;
    margin-bottom: 1rem !important;
  }

  h2 {
    font-size: clamp(1.2rem, 4.5vw + 0.45rem, 1.55rem) !important;
    line-height: 1.38 !important;
  }

  .home-about-section .about-heading h2 {
    font-size: clamp(1rem, 3.5vw + 0.35rem, 1.4rem) !important;
    line-height: 1.45 !important;
  }

  .hero-buttons-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero-buttons-wrapper .primary-button,
  .hero-buttons-wrapper .secondary-button,
  .hero-buttons-wrapper .booking-button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .subheadline {
    letter-spacing: 0.1em !important;
    font-size: clamp(0.78rem, 3.2vw, 0.92rem) !important;
  }

  .home-hero-section .subheadline,
  .home-hero-section .hero-text-details .subheadline {
    font-size: clamp(0.92rem, 4.2vw, 1.12rem) !important;
    letter-spacing: 0.09em !important;
    line-height: 1.38 !important;
  }

  .home-hero-section .subheadline-line {
    height: 4px !important;
    max-width: 72px !important;
  }

  #services .subheadline,
  .services-section .subheadline {
    font-size: clamp(0.9rem, 4vw, 1.08rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.38 !important;
  }

  #services .subheadline-line,
  .services-section .subheadline-line {
    height: 4px !important;
    max-width: 72px !important;
  }

  .booking-form-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .not-found-hero {
    font-size: clamp(4rem, 22vw, 8rem) !important;
  }

  .vehicule-card {
    padding-left: clamp(16px, 4vw, 20px) !important;
    padding-right: clamp(16px, 4vw, 20px) !important;
  }
}

/* Gabarit Fortress / pages novas-dapper : logo header */
.brand__asset {
  max-width: min(180px, 58vw);
  height: auto;
}

@media screen and (max-width: 479px) {
  .site-preloader__logo {
    max-width: min(82vw, 260px) !important;
    max-height: min(36vh, 150px) !important;
  }
}