/* ===================================================================
   Mobile Polish — ULTRA COMPACT (brand-safe)
   - Maximum compaction of type, spacing, pills & stickybar
   - Keeps your fonts/colors/photos
   - Prevents hero text overlap (overlay stays on ::after)
   - Avoids input zoom on iOS (inputs stay >=16px)
   Load AFTER all your CSS (and after any other mobile polish files).
   =================================================================== */
@media (max-width: 820px) {
  /* Base scale smaller (keep inputs at 16px to avoid iOS zoom) */
  html { font-size: 14.75px; } /* tweak 14.5–15 if needed */
  body { line-height: 1.5; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
  input, select, textarea { font-size: 16px !important; } /* prevent auto-zoom */

  /* Layout rhythm tighter */
  .wrap, .container, .section { padding-inline: clamp(10px, 3.4vw, 16px) !important; }
  .section { padding-block: clamp(12px, 4.2vw, 24px) !important; }
  .grid { display: grid; gap: clamp(6px, 2.2vw, 12px) !important; grid-template-columns: 1fr !important; }
  .center { text-align: center !important; }

  /* Hero / header: compact + spacing guard so texts never overlap */
  .header, .hero { position: relative; overflow: hidden; }
  .header::after, .hero::after { /* overlay (from luxury v2) remains on ::after */ }
  .header :is(.badge, .chip, .pill, .label, .topline, .ribbon) {
    font-size: .86rem !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    margin-bottom: 6px !important;
  }
  .header h1, .hero h1 {
    font-size: clamp(1.22rem, 3.4vw + .8rem, 1.72rem) !important;
    line-height: 1.12 !important;
    margin-top: 6px !important;
    text-wrap: balance;
  }
  .header .lead, .hero .lead {
    font-size: clamp(.95rem, 2vw + .5rem, 1.02rem) !important;
    line-height: 1.42 !important;
    margin-top: 6px !important;
  }
  .header .content, .hero .content { max-width: 28ch; margin-inline: auto; }

  /* Pills / features smaller */
  .pill, .feature, .badge, .tag, .zonechips > * {
    padding: 6px 10px !important;
    font-size: .9rem !important;
    border-radius: 999px !important;
  }
  .pillbar, .features, .badges, .tags, .zonechips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: clamp(6px, 2.2vw, 12px) !important;
  }

  /* Cards / tiles more subtle */
  .card, .panel, .tile {
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.05) !important;
  }
  .card img, .panel img, .tile img, .img-rounded, .gallery img { border-radius: 10px !important; }

  /* Buttons / CTAs: ultra-compact but tappable */
  :where(.btn, .cta, .wapp, .rdv, a.button, [role="button"]) {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: .92rem !important;
  }

  /* Stickybar: thinnest comfortable */
  .stickybar {
    gap: 6px !important;
    padding: 5px 8px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
    backdrop-filter: saturate(115%) blur(8px);
    -webkit-backdrop-filter: saturate(115%) blur(8px);
  }
  .stickybar a {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: .9rem !important;
    border-radius: 9px !important;
    flex: 1 1 0 !important;
  }
  /* Hide "Appeler" on mobile */
  .stickybar .call, .stickybar a[href^="tel:"] { display: none !important; }

  /* Footer and content not hidden by stickybar */
  .stickybar + * { scroll-margin-bottom: 80px; }
  main, .wrap, .container, .section { padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}