/* ─── DTM Medias — mobile demo patterns ─────────────────────────────
 *  Universal mobile UX fixes for all demo sites (avocat, artisan, hôtel…).
 *  Include via:  <link rel="stylesheet" href="assets/css/mobile-demo.css">
 *  Pair with:    <script src="assets/js/mobile-demo.js" defer></script>
 *
 *  Patterns covered:
 *   1. Demo banner — horizontal scroll instead of wrap on mobile
 *   2. FAB call    — floating phone button bottom-right (mobile only)
 *   3. Scroll lock — body lock when drawer is open
 *   4. Containing-block trap — kill backdrop-filter on sticky headers
 *   5. Drawer plein-écran — base styling, overrideable per theme
 *
 *  Themes plug in via CSS variables on body:
 *   --c-fab-bg, --c-fab-fg, --c-drawer-bg, --c-drawer-ink, --c-drawer-accent
 *  with sensible fallbacks.
 */

/* 1 ── Demo banner — compact + horizontal scroll on mobile ───────── */
@media (max-width: 720px) {
  .demo-banner { padding: 6px 0 !important; }
  .demo-banner__inner {
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .demo-banner__left {
    padding: 4px 14px 0 !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .demo-banner__actions {
    margin-left: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px !important;
    scrollbar-width: none;
  }
  .demo-banner__actions::-webkit-scrollbar { display: none; }
  .demo-banner__btn {
    font-size: 0.66rem !important;
    padding: 5px 10px !important;
    white-space: nowrap;
    flex-shrink: 0 !important;
    min-height: auto;
  }
}

/* 2 ── FAB téléphone — mobile only, fixed bottom-right ──────────── */
.demo-fab-call {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-fab-bg, var(--c-burgundy, var(--c-accent, #1a3a5c)));
  color: var(--c-fab-fg, #fff);
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}
.demo-fab-call:active { transform: scale(0.95); }
@media (max-width: 980px) {
  .demo-fab-call { display: inline-flex !important; }
}

/* 3 ── Body scroll lock when drawer open ─────────────────────────── */
body.has-drawer-open { overflow: hidden !important; }
body.has-drawer-open .demo-fab-call { display: none !important; }

/* 4 ── Kill backdrop-filter on sticky headers in mobile ──────────── */
/* `backdrop-filter` creates a CSS containing-block which traps
   `position: fixed` descendants — drawer ends up inside header
   instead of covering viewport. Safe to disable on small screens. */
@media (max-width: 720px) {
  header[class*="-header"],
  header[class*="-nav"],
  .ab-header,
  .pe-nav,
  .v-nav,
  .lb-header,
  .dm-header,
  .ft-header,
  .le-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 5 ── Drawer plein-écran base (theme overrides via CSS vars) ────── */
/* Activate by giving any element class containing "drawer" + `data-demo-drawer`
   or by adding `.is-open` via the universal JS toggle. */
@media (max-width: 720px) {
  [data-demo-drawer] {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    background: var(--c-drawer-bg, #fff) !important;
    z-index: 200 !important;
    flex-direction: column !important;
    padding: 72px 28px 40px !important;
    overflow-y: auto;
    transform: translateY(-101%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }
  [data-demo-drawer].is-open {
    transform: translateY(0);
    visibility: visible;
  }
}