/* LogiDrink marketing mobile UX v21
 * - Sticky: demo only
 * - FAB + scroll-top above sticky banner
 * - Hide Peppol eyebrow on mobile
 */
@media (max-width: 768px) {
  /* Hero badge Peppol */
  .hero .eyebrow,
  .hero [data-i18n="home.hero.eyebrow"],
  section.hero .eyebrow {
    display: none !important;
  }

  /* Sticky: only demo CTA (superseded by extra.css full bar v20260805s) */
  .ld-sticky-cta {
    flex-direction: column !important;
    text-align: center !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    z-index: 900 !important;
  }
  .ld-sticky-cta > p,
  .ld-sticky-cta .ld-sticky-copy,
  .ld-sticky-cta .ld-sticky-actions .btn-ghost,
  .ld-sticky-cta .ld-sticky-signup,
  .ld-sticky-cta .ld-sticky-actions a[data-i18n="cta.signup"],
  .ld-sticky-cta .ld-sticky-actions a[href*="signup"] {
    display: none !important;
  }
  .ld-sticky-cta .ld-sticky-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .ld-sticky-cta .ld-sticky-actions .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  /* Room for single-row sticky (~64px) + safe area */
  body.ld-sticky-on {
    padding-bottom: 84px !important;
  }

  /* Mon LogiDrink + scroll-top ABOVE white sticky banner */
  body.ld-sticky-on #ld-portal-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    z-index: 950 !important;
  }
  body.ld-sticky-on .scroll-top {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    z-index: 950 !important;
  }

  #ld-portal-fab {
    z-index: 950 !important;
  }
  .scroll-top {
    z-index: 950 !important;
  }
}

/* ===== LD mobile fix 20260805 =====
 * Fix cut blocks, text glued to edges, 2-col grids on phone,
 * hero squeeze, sticky/FAB overlap.
 */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
@media (max-width: 900px) {
  .container,
  .container-sm,
  .hero .container,
  section > .container,
  footer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  /* Hero: ALWAYS stack — layout-wide forced 2 cols without mobile override */
  .hero-grid,
  section.hero .hero-grid,
  .hero .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-grid > *,
  .hero .hero-visual,
  .hero-mock,
  .hero-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .hero h1,
  .hero .lead,
  .hero p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .hero .actions,
  .hero-cta,
  .hero .hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .hero .actions .btn,
  .hero-cta .btn,
  .hero .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .ld-hero-int,
  .ld-hero-int-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ld-hero-int-item {
    flex: 0 0 auto !important;
  }

  /* All marketing grids → 1 col on phone */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4,
  .feat-grid,
  .services-grid,
  .steps-grid,
  .price-grid,
  .pillars-nav,
  .ld-offer-grid,
  #pourquoi-logidrink .grid.grid-3,
  section#pourquoi-logidrink .grid-3,
  .section-head + .grid.grid-3,
  section.soft .grid.grid-2,
  .ft-grid,
  footer .ft-grid,
  .stats-row,
  .stat-row,
  .dash-row,
  .cmp-grid,
  .versus,
  .versus-grid,
  .clients-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .feat-card,
  .price-card,
  .box,
  .ld-offer-card,
  .cta-banner,
  .pack-banner,
  .cta-mid .inner,
  .seo-pillar .feat-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .feat-card h3,
  .feat-card p,
  .price-card,
  .section-head,
  .section-head p,
  p.lead {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Comparatif / tarifs side-by-side cards */
  .cmp-wrap,
  .compare-table-wrap,
  .table-scroll {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .cmp-wrap > *,
  .price-compare,
  .versus-cols {
    min-width: 0 !important;
  }

  /* Sticky demo bar + FABs: keep content readable */
  body,
  body.ld-sticky-on,
  body.seo-pillar {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ld-sticky-cta {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 900 !important;
  }
  .ld-sticky-cta .btn,
  .ld-sticky-cta .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Portal FAB: smaller, don't cover text columns */
  #ld-portal-fab {
    left: 12px !important;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    z-index: 880 !important;
    overflow: hidden !important;
  }
  #ld-portal-fab .ld-fab-label {
    display: none !important;
  }
  .scroll-top {
    right: 12px !important;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 880 !important;
  }

  /* Footer readable */
  footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 2rem !important;
  }
  footer .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  footer .ft-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Buttons that overflow */
  .btn {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}
@media (max-width: 600px) {
  .stats-row,
  .stat-row,
  .dash-row {
    grid-template-columns: 1fr !important;
  }
}


/* ===== full sticky CTA on mobile (v20260805sticky2) ===== */
@media (max-width: 768px) {
  .ld-sticky-cta > p,
  .ld-sticky-cta .ld-sticky-copy {
    display: block !important;
    margin: 0 !important;
  }
  .ld-sticky-cta .ld-sticky-actions .btn-ghost,
  .ld-sticky-cta .ld-sticky-signup,
  .ld-sticky-cta .ld-sticky-actions a[data-i18n="cta.signup"],
  .ld-sticky-cta .ld-sticky-actions a[href*="signup"] {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .ld-sticky-cta .ld-sticky-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ld-sticky-cta .ld-sticky-actions .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.ld-sticky-on {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.ld-sticky-on #ld-portal-fab,
  body.ld-sticky-on .scroll-top {
    bottom: calc(158px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ===== hide sticky CTA bandeau (v20260807nosticky) ===== */
.ld-sticky-cta,
.ld-sticky-cta.visible {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(120%) !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.ld-sticky-on {
  padding-bottom: 0 !important;
}
body.ld-sticky-on #ld-portal-fab,
body.ld-sticky-on .scroll-top,
#ld-portal-fab,
.scroll-top {
  /* keep FAB reachable, not pushed by sticky */
}
#ld-portal-fab {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 10060 !important;
}
.scroll-top {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}

/* force-hide sticky after modern-saas */
.ld-sticky-cta, .ld-sticky-cta.visible { display:none!important; height:0!important; visibility:hidden!important; pointer-events:none!important; }
body.ld-sticky-on { padding-bottom:0!important; overflow:auto!important; }