/* File: public/css/custom/mobile.css | Managed for production maintainability. */
/* Mobile layout spacing (no impact on desktop) */
@media (max-width: 767px) {
  :root {
    --mobile-page-inset: 12px;
    --mobile-container-pad: 1rem;
  }

  .legal-content {
    text-align: left;
  }

  /* Give the whole page a small horizontal breathing room on mobile */
  body > div > .bg-transparent {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Keep fixed header aligned with new mobile margins */
  body > div > .bg-transparent > nav.fixed.top-0.left-0.w-full.z-50 {
    left: 12px;
    right: 12px;
    width: auto;
    border-radius: 12px;
    overflow: hidden;
  }

  /* Preserve spacing under fixed header after inset */
  body > div > .bg-transparent > div[style*="height:75px"] {
    height: 90px !important;
  }

  /* Neutralize negative row gutters that visually remove mobile margins */
  body > div > .bg-transparent .flex.flex-wrap.-mx-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Dark mode: fully remove visible lines around mobile header/menu panel */
  html.dark body > div > .bg-transparent > nav.fixed.top-0.left-0.w-full.z-50 {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html.dark body > div > .bg-transparent > div.navbar-menu > div.fixed.top-0.left-0.bottom-0.w-full.w-4\/6.max-w-xs {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Pricing cards: horizontal swipe slider on mobile only */
  #offres,
  #offres .container {
    overflow: visible !important;
  }

  #offres .pricing-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * (var(--mobile-page-inset) + var(--mobile-container-pad))) !important;
    margin-right: 0 !important;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 28px;
    padding-left: calc((100% - 90%) / 2);
    scroll-padding-left: calc((100% - 90%) / 2 + var(--mobile-page-inset) + var(--mobile-container-pad));
    scroll-padding-right: 0;
    margin-right: calc(-1 * (var(--mobile-page-inset) + var(--mobile-container-pad))) !important;
  }

  #offres .pricing-slider .pricing-slide {
    flex: 0 0 90%;
    max-width: 90%;
    width: 90%;
    padding: 6px !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  #offres .pricing-slider .pricing-slide > div {
    height: 100%;
    transform: scale(0.96);
    transition: transform 280ms ease;
  }

  #offres .pricing-slider .pricing-slide:hover > div {
    transform: scale(0.96) !important;
  }

  #offres .pricing-slider .pricing-slide.is-active > div {
    transform: scale(1) !important;
  }

  /* Testimonials: horizontal swipe slider on mobile only */
  #avis,
  #avis .container {
    overflow: visible !important;
  }

  #avis .testimonials-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * (var(--mobile-page-inset) + var(--mobile-container-pad))) !important;
    margin-right: 0 !important;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 28px;
    padding-left: calc((100% - 90%) / 2);
    scroll-padding-left: calc((100% - 90%) / 2 + var(--mobile-page-inset) + var(--mobile-container-pad));
    scroll-padding-right: 0;
    margin-right: calc(-1 * (var(--mobile-page-inset) + var(--mobile-container-pad))) !important;
  }

  /* Apply the same "no right border" behavior on mobile sliders outside index */
  .pricing-slider,
  .testimonials-slider {
    --mobile-slide-width: 84vw;
    margin-left: calc(-1 * (var(--mobile-page-inset) + var(--mobile-container-pad))) !important;
    margin-right: calc(-1 * (var(--mobile-page-inset) + var(--mobile-container-pad))) !important;
    padding-left: calc((100vw - var(--mobile-slide-width)) / 2) !important;
    padding-right: calc((100vw - var(--mobile-slide-width)) / 2) !important;
    scroll-padding-left: calc((100vw - var(--mobile-slide-width)) / 2) !important;
    scroll-padding-right: calc((100vw - var(--mobile-slide-width)) / 2) !important;
    justify-content: flex-start !important;
  }

  .pricing-slider .pricing-slide,
  .testimonials-slider .testimonials-slide {
    flex: 0 0 var(--mobile-slide-width) !important;
    width: var(--mobile-slide-width) !important;
    max-width: var(--mobile-slide-width) !important;
  }

  #avis .testimonials-slider .testimonials-slide {
    flex: 0 0 90%;
    max-width: 90%;
    width: 90%;
    padding: 6px !important;
    margin-bottom: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Ensure every slide snaps to the center of the viewport */
  .pricing-slider .pricing-slide,
  .testimonials-slider .testimonials-slide {
    scroll-snap-align: center !important;
    scroll-snap-stop: always;
  }

  #avis .testimonials-slider .testimonials-slide:empty {
    display: none !important;
  }

  #avis .testimonials-slider .testimonials-slide > div {
    height: 100%;
    transform: scale(0.96);
    transition: transform 280ms ease;
  }

  #avis .testimonials-slider .testimonials-slide:hover > div {
    transform: scale(0.96) !important;
  }

  #avis .testimonials-slider .testimonials-slide.is-active > div {
    transform: scale(1) !important;
  }

  /* Feature cards: animate on scroll only (no tap/hover trigger on touch) */
  .feature-scroll-card {
    transform: scale(0.93);
    transition: transform 320ms ease, box-shadow 320ms ease;
  }

  .feature-scroll-card:hover {
    transform: scale(0.93) !important;
  }

  .feature-scroll-card.is-inview {
    transform: scale(1.03) !important;
  }

  /* Slider arrows (mobile only) */
  .mobile-slider-host {
    position: relative;
  }

  .mobile-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .mobile-slider-arrow img {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
  }

  .mobile-slider-arrow-left {
    left: 2px;
  }

  .mobile-slider-arrow-right {
    right: 2px;
  }

  .mobile-slider-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
  }

  html.dark .mobile-slider-arrow {
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
  }

}