/*
Theme Name:   WOW Card Child
Theme URI:    https://wowcard.ma
Description:  WOW Card child theme — tap page profiles + homepage Elementor template
Author:       WOW Card
Author URI:   https://wowcard.ma
Template:     hello-elementor
Version:      1.0.5
Text Domain:  wowcard-child
*/

/* ═══════════════════════════════════════════════════════
   CSS VARIABLES GLOBALES — accessibles partout sur le site
═══════════════════════════════════════════════════════ */
:root {
  /* Homepage palette */
  --wow-bg:           #080808;
  --wow-bg2:          #111111;
  --wow-bg3:          #161616;
  --wow-gold:         #C9A84C;
  --wow-gold-light:   #E8C96A;
  --wow-gold-dim:     rgba(201, 168, 76, 0.15);
  --wow-gold-border:  rgba(201, 168, 76, 0.25);
  --wow-cream:        #F5F0E8;
  --wow-muted:        rgba(245, 240, 232, 0.45);
  --wow-border:       rgba(255, 255, 255, 0.07);
  --wow-font-display: 'Syne', sans-serif;
  --wow-font-body:    'DM Sans', sans-serif;
  --wow-radius:       12px;
  --wow-radius-sm:    8px;

  /* Tap page palette (v4 — ne pas modifier) */
  --ink:         #0C0B0F;
  --ink-2:       #16141C;
  --gold:        #B8963E;
  --gold-2:      #D4AF5A;
  --gold-light:  #EDD07A;
  --gold-dim:    rgba(184,150,62,0.1);
  --cream:       #F8F6F1;
  --cream-2:     #EDE9E0;
  --stone:       #B8B4A8;
  --charcoal:    #2A2A35;
  --muted:       #7C7870;
  --success:     #22C55E;
  --border:      rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════════════════════
   RESET — Page homepage full-width (template wowcard-homepage.php)
═══════════════════════════════════════════════════════ */
body.page-template-wowcard-homepage {
  padding: 0 !important;
  margin: 0 !important;
  background: #080808 !important;
}

body.page-template-wowcard-homepage .site-content,
body.page-template-wowcard-homepage .content-area,
body.page-template-wowcard-homepage main,
body.page-template-wowcard-homepage #primary,
body.page-template-wowcard-homepage .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════
   RESET — Tap pages (template page-wowcard-tap.php)
   Isole complètement la tap page du thème parent
═══════════════════════════════════════════════════════ */
body.page-template-page-wowcard-tap {
  padding: 0 !important;
  margin: 0 auto !important;
  background: #0C0B0F !important;
  max-width: 440px;
  overflow-x: hidden;
}

body.page-template-page-wowcard-tap .site-header,
body.page-template-page-wowcard-tap .site-footer,
body.page-template-page-wowcard-tap header,
body.page-template-page-wowcard-tap footer:not(.page-footer) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   WOOCOMMERCE — DARK GOLD THEME  v1.0
   Remplace le style WooCommerce par défaut pour matcher
   l'esthétique WoW Card (noir mat + or #C9A84C)
════════════════════════════════════════════════════════════ */

/* ── Variables WC ── */
:root {
  --wc-bg:       #0f0f0f;
  --wc-bg2:      #161616;
  --wc-gold:     #C9A84C;
  --wc-gold-l:   #E8C96A;
  --wc-cream:    #F5F0E8;
  --wc-muted:    rgba(245,240,232,.5);
  --wc-border:   rgba(255,255,255,.08);
  --wc-error:    #EF4444;
  --wc-success:  #22C55E;
}

/* ── GLOBAL WC OVERRIDES ── */
.woocommerce,
.woocommerce-page {
  font-family: 'DM Sans', sans-serif;
  color: var(--wc-cream);
  background: var(--wc-bg);
}

.woocommerce a:not(.button):not(.btn-p) { color: var(--wc-gold); }
.woocommerce a:not(.button):hover { color: var(--wc-gold-l); }

/* ── CHECKOUT PAGE WRAPPER ── */
.woocommerce-checkout,
.woocommerce-cart,
.woocommerce-order-received {
  background: #080808;
  min-height: 100vh;
  padding: 100px 0 80px;
}

/* ── FORM FIELDS ── */
.woocommerce form .form-row label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wc-muted);
  margin-bottom: 6px;
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--wc-cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  outline: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--wc-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
  color: rgba(245,240,232,.25);
  font-style: italic;
}

/* ── SECTION HEADINGS ── */
.woocommerce h3,
.woocommerce-checkout h3 {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--wc-cream);
  letter-spacing: -.3px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wc-border);
}

/* ── ORDER REVIEW TABLE ── */
.woocommerce-checkout-review-order table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout-review-order table thead th {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wc-muted);
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--wc-border);
}

.woocommerce-checkout-review-order table tbody tr td {
  padding: 14px 0;
  font-size: 14px;
  color: var(--wc-cream);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.woocommerce-checkout-review-order table tfoot tr th,
.woocommerce-checkout-review-order table tfoot tr td {
  padding: 12px 0;
  font-size: 14px;
  color: var(--wc-cream);
  border-top: 1px solid var(--wc-border);
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--wc-gold);
  letter-spacing: -.3px;
}

/* ── PAYMENT SECTION ── */
#payment {
  background: #161616;
  border: 1px solid var(--wc-border);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}

#payment ul.payment_methods {
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  border-bottom: 1px solid var(--wc-border);
  padding-bottom: 16px;
}

#payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--wc-cream);
  cursor: pointer;
}

#payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--wc-gold);
  width: 16px;
  height: 16px;
}

.payment_box {
  background: rgba(201,168,76,.05);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--wc-muted);
}

/* Stripe card element container */
#stripe-card-element,
.StripeElement {
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color .2s;
}
.StripeElement--focus { border-color: var(--wc-gold); }
.StripeElement--invalid { border-color: var(--wc-error); }

/* ── PLACE ORDER BUTTON ── */
#place_order,
.woocommerce button.button.alt,
.woocommerce input[type="submit"] {
  background: var(--wc-gold) !important;
  color: #080808 !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 16px 28px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background .2s, transform .15s !important;
  letter-spacing: .01em;
}
#place_order:hover,
.woocommerce button.button.alt:hover {
  background: var(--wc-gold-l) !important;
  transform: translateY(-1px) !important;
}
#place_order:disabled {
  opacity: .6 !important;
  transform: none !important;
}

/* ── NOTICES (errors, info) ── */
.woocommerce-NoticeGroup,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  list-style: none;
}
.woocommerce-error {
  background: rgba(239,68,68,.1);
  border-left: 3px solid var(--wc-error);
  color: #fca5a5;
}
.woocommerce-message {
  background: rgba(34,197,94,.1);
  border-left: 3px solid var(--wc-success);
  color: #86efac;
}
.woocommerce-info {
  background: rgba(201,168,76,.08);
  border-left: 3px solid var(--wc-gold);
  color: var(--wc-cream);
}

/* ── THANK YOU PAGE ── */
.woocommerce-order-received .woocommerce-order {
  background: #111;
  border: 1px solid var(--wc-border);
  border-radius: 12px;
  padding: 40px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.woocommerce-order-received h2 {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--wc-cream);
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.woocommerce-order-received p { color: var(--wc-muted); font-size: 15px; line-height: 1.7; }
.woocommerce-order-received .woocommerce-notice--success {
  font-size: 14px;
  color: #86efac;
  background: rgba(34,197,94,.1);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 28px;
}

/* ── WOW PROFILE FIELDS SECTION ── */
#wow-profile-fields {
  background: #111;
  border: 1px solid var(--wc-border);
  border-radius: 12px;
  padding: 28px 24px;
  margin-top: 20px;
}
#wow-profile-fields h3 {
  border-bottom: 1px solid rgba(201,168,76,.2) !important;
  color: var(--wc-cream) !important;
}

/* ── CHECKOUT LAYOUT ── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  padding: 0;
}

/* Columns */
@media (min-width: 769px) {
  .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .woocommerce-checkout .col2-set .col-1 { grid-column: 1; }
  .woocommerce-checkout .col2-set .col-2 { grid-column: 2; }
}

@media (max-width: 768px) {
  .woocommerce-checkout,
  .woocommerce-cart,
  .woocommerce-order-received { padding: 80px 16px 80px; }
}

/* ── REQUIRED ASTERISK ── */
.woocommerce form .form-row .required { color: var(--wc-gold); }

/* ── LOADING OVERLAY ── */
.blockUI.blockOverlay {
  background: rgba(8,8,8,.7) !important;
}

/* Stripe logo in payment section */
#payment .payment_method_stripe img {
  filter: brightness(0) invert(.7);
  height: 20px;
  margin-left: 8px;
}


/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Global Override Layer
   Couvre: iOS Safari, Android Chrome, tablettes (768-1024px)
   Breakpoints: 1024px (tablette), 768px (mobile L), 480px (mobile S), 375px (iPhone SE)
════════════════════════════════════════════════════════════ */

/* ─── BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden !important; /* iOS Safari requires this on html, not just body */
  max-width: 100vw !important;
}
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  -webkit-tap-highlight-color: transparent;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
input, textarea, select, button { font-size: 16px !important; } /* Prevents iOS zoom on focus */

/* ─── TYPOGRAPHY FLOOR ──────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size: 15px; }

  h1, .hero-h1, .h2 {
    font-size: clamp(22px, 6vw, 38px) !important;
    letter-spacing: -0.3px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  h2, .section-h2 {
    font-size: clamp(20px, 5.5vw, 34px) !important;
    letter-spacing: -0.2px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  h3 { font-size: clamp(15px, 4vw, 22px) !important; word-break: break-word !important; }
}

/* ─── NAVIGATION ────────────────────────────────────────── */
@media (max-width: 900px) {
  #navbar .nav-links, nav .nav-links { display: none !important; }
  #navbar .nav-right .nav-cta, nav .nav-right .nav-cta { display: none !important; }
  .hamburger { display: flex !important; }

  nav, #navbar {
    height: 56px !important;
    padding: 0 16px !important;
  }
  .nav-logo { font-size: 18px !important; }
}

/* ─── SECTION PADDING ───────────────────────────────────── */
@media (max-width: 900px) {
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section[style*="padding:100px"],
  section[style*="padding: 100px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .container, .container-sm {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─── HERO ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  #hero, .hero-zone {
    padding: 80px 16px 40px !important;
    text-align: center !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
  }
  .hero-ctas, .footer-cta-btns, .hiw-cta {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .hero-ctas a, .footer-cta-btns a {
    width: 100% !important;
    max-width: 320px !important;
  }
  .hero-sub, .hero-reassurance, .section-sub {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-reassurance {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .hero-stars { justify-content: center !important; }
  .hero-badge { display: inline-flex !important; }
}

/* ─── HERO PHONE MOCKUP ─────────────────────────────────── */
@media (max-width: 900px) {
  .hero-profile-phone {
    transform: scale(0.82) !important;
    transform-origin: top center !important;
    margin-bottom: -60px !important;
  }
  .hero-visual { order: -1 !important; } /* Show phone before text on mobile */
}
@media (max-width: 480px) {
  .hero-profile-phone {
    transform: scale(0.72) !important;
    margin-bottom: -80px !important;
  }
}

/* ─── ALL GRIDS → COLLAPSE ──────────────────────────────── */
@media (max-width: 900px) {
  /* 4-col grids → 2-col on tablet */
  .modules-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .specs-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* 3-col grids → 1-col */
  .pricing-grid, .plan-grid  { grid-template-columns: 1fr !important; max-width: 480px !important; margin: 0 auto !important; }
  .testimonials-grid         { grid-template-columns: 1fr !important; }
  .testi-grid                { grid-template-columns: 1fr !important; }
  .problem-grid              { grid-template-columns: 1fr !important; }

  /* 2-col grids → 1-col */
  .hero-grid, .story-grid, .uvt-grid,
  .bva-grid, .faq-grid, .usecase-grid,
  .hiw-grid, .steps-grid            { grid-template-columns: 1fr !important; gap: 24px !important; }
  .uc-panel.active                  { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* B2B strip */
  .b2b-strip, .b2b-block {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .b2b-strip a, .b2b-block a { width: 100% !important; justify-content: center !important; }

  /* Compare table */
  .compare-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
  }

  /* Footer */
  .wow-footer-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .wow-footer-brand { max-width: 100% !important; }

  /* Inline style grids override */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Further collapse on small phones */
  .modules-grid { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .specs-grid   { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── TOUCH TARGETS ─────────────────────────────────────── */
@media (max-width: 900px) {
  .btn-primary, .btn-secondary, .btn-wa, .btn-p, .btn-g,
  .plan-cta, .pc-gold, .pc-out, .pc-in,
  .nav-cta, .mob-cta-primary, .mob-cta-wa,
  button[type="submit"], input[type="submit"],
  .submit-btn, #place_order, #order-btn {
    min-height: 48px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .faq-q { min-height: 52px !important; padding: 16px !important; }
  .uc-tab { min-height: 40px !important; padding: 8px 14px !important; }
}

/* ─── FORMS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .f-row, .f-row2 { grid-template-columns: 1fr !important; }
  .f-input, .f-textarea,
  input.input-text, textarea,
  select {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 14px 16px !important;
  }
  .payment-opts { grid-template-columns: 1fr !important; }
}

/* ─── PRICING CARDS ─────────────────────────────────────── */
@media (max-width: 900px) {
  .plan-card {
    padding: 24px 20px !important;
  }
  .plan-card.featured { order: -1 !important; } /* Most popular first on mobile */
  .plan-price-n, .plan-price { font-size: 40px !important; }

  /* Commander plan switcher */
  .wc-plans-grid  { grid-template-columns: 1fr !important; max-width: 440px !important; margin: 0 auto !important; }
  .ps-wrap        { grid-template-columns: 1fr !important; }

  /* Thank you page cards */
  .ty-card-grid, div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── MODULES & GALLERY CARDS ───────────────────────────── */
@media (max-width: 900px) {
  .module-card  { padding: 16px 14px !important; }
  .gallery-card { padding: 16px !important; }
  .usecase-tabs { gap: 6px !important; }
  .uc-tab       { font-size: 12px !important; padding: 7px 12px !important; }
}

/* ─── USE CASE PANELS ───────────────────────────────────── */
@media (max-width: 900px) {
  .uc-outcome { padding: 20px 16px !important; }
  .uc-outcome-num { font-size: 32px !important; }
  .uc-modules { gap: 8px !important; }
}

/* ─── FOOTER ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wow-footer { padding: 40px 16px 20px !important; }
  .footer-badges {
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: center !important;
  }
  .footer-cta-h2 { font-size: clamp(22px, 6vw, 38px) !important; }
}

/* ─── FLOATING MOBILE CTA BAR ───────────────────────────── */
@media (max-width: 900px) {
  .mobile-cta-bar {
    display: flex !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  body { padding-bottom: 74px !important; }
}
@media (min-width: 901px) {
  .mobile-cta-bar { display: none !important; }
}

/* ─── WOOCOMMERCE CHECKOUT MOBILE ───────────────────────── */
@media (max-width: 768px) {
  .woocommerce-checkout, .woocommerce-cart, .woocommerce-order-received {
    padding: 74px 16px 80px !important;
  }
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  #wow-wc-checkout .col2-set { grid-template-columns: 1fr !important; }
  #payment { padding: 16px !important; }
  #place_order { padding: 16px !important; }
}

/* ─── TABLET (769px – 1024px) ───────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .modules-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .gallery-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .pricing-grid  { gap: 16px !important; }
  .hero-grid     { gap: 32px !important; }
  .container     { padding: 0 24px !important; }
  section        { padding-left: 24px !important; padding-right: 24px !important; }
  .hero-profile-phone { transform: scale(0.9) !important; }
}

/* ─── SAFE AREA (iPhone X+, notch devices) ──────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-cta-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
}

/* ─── TAP PAGE (NFC profiles) MOBILE ───────────────────── */
@media (max-width: 440px) {
  .hero { padding: 36px 20px 28px !important; }
  .form-wrap { margin: 10px 12px 0 !important; }
  .success-wrap { margin: 10px 12px 0 !important; }
  .links-section { padding: 10px 12px 4px !important; }
  .ph-name { font-size: 11px !important; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE v2 — Comprehensive patch for new sections
   + Inline style overrides + Per-page specific fixes
════════════════════════════════════════════════════════════ */

/* ─── NUCLEAR INLINE GRID OVERRIDE ─────────────────────────
   Catches ALL inline style="...grid-template-columns:..."
   Uses !important to win over any inline style           */
@media (max-width: 900px) {
  /* Force ALL inline grids to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:1.6fr"],
  [style*="grid-template-columns: 1.6fr"],
  [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
}

/* ─── HOMEPAGE — NEW SECTIONS ───────────────────────────── */
@media (max-width: 900px) {

  /* Hero phone — order: show text first, phone after */
  .hero-visual { order: 1 !important; }  /* After text */
  .hero-content { order: 0 !important; }
  .hero-profile-phone {
    transform: scale(0.78) !important;
    transform-origin: top center !important;
    margin-bottom: -80px !important;
    margin-top: 0 !important;
  }

  /* Modules: 4-col → 2-col tablet */
  .modules-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Gallery: 4-col → 2-col */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Use case tabs — wrap + smaller */
  .usecase-tabs {
    gap: 6px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .usecase-tabs::-webkit-scrollbar { display: none !important; }
  .uc-tab {
    font-size: 11px !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Use case panels */
  .uc-panel.active {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .uc-outcome-num { font-size: 36px !important; }
  .uc-outcome { padding: 20px !important; }
  .uc-modules { gap: 8px !important; }

  /* Client gallery cards */
  .gallery-card { padding: 16px 12px !important; }
  .gallery-avatar { width: 48px !important; height: 48px !important; }

  /* Module cards */
  .module-card { padding: 16px 12px !important; }
  .module-icon { width: 36px !important; height: 36px !important; }

  /* Section headings inside new sections */
  .pricing-header { margin-bottom: 36px !important; }
}

@media (max-width: 480px) {
  /* Modules: 2-col → 2-col (keep 2-col on small phones) */
  .modules-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Gallery: stays 2-col */
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero phone smaller */
  .hero-profile-phone {
    transform: scale(0.68) !important;
    margin-bottom: -100px !important;
  }

  /* Section padding */
  #modules, #gallery, #use-cases, #pricing, #testimonials, #faq, #footer-cta {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ─── COMMANDER — PLAN SELECTOR & THANK YOU ─────────────── */
@media (max-width: 768px) {

  /* Step 1 — Plan cards in selector */
  .wc-plans-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Step 2 — Plan switcher (3 cards in checkout header) */
  .ps-wrap {
    grid-template-columns: 1fr !important;
    max-width: 380px !important;
    margin: 0 auto 24px !important;
  }

  /* Thank you page — 3 stat cards → stack */
  .ty-card {
    display: block !important;
  }

  /* Commander hero */
  #commander-hero, .commander-hero {
    padding: 80px 16px 32px !important;
    text-align: center !important;
  }

  /* Équipes strip in plan selector */
  .b2b-strip {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .b2b-strip > a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Reassurance row under hero */
  .reassurance-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ─── TARIFS — COMPARE TABLE & PRICING ──────────────────── */
@media (max-width: 900px) {

  /* Pricing grid → single column, centered */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    gap: 16px !important;
  }

  /* Featured plan — show first on mobile */
  .plan-card.featured { order: -1 !important; }

  /* Compare table — horizontal scroll */
  .compare-table,
  table.compare-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    width: 100% !important;
  }
  .compare-table th,
  .compare-table td {
    min-width: 100px !important;
    padding: 10px 8px !important;
  }

  /* Plan card internals */
  .plan-card { padding: 24px 18px !important; }
  .plan-price-n { font-size: 42px !important; }
  .plan-period { font-size: 11px !important; }
  .plan-features { gap: 8px !important; }
  .plan-features li { font-size: 13px !important; }
}

/* ─── ALL INNER PAGES (professionnels, equipes, etc.) ─────── */
@media (max-width: 900px) {

  /* Hero zones */
  .hero-zone {
    padding: 80px 16px 40px !important;
    text-align: center !important;
  }

  /* All 2-column sections */
  .two-col-grid,
  .content-grid,
  .hiw-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Feature grids */
  .features-grid, .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .steps-grid::before { display: none !important; }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }

  /* B2B blocks */
  .b2b-block {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .b2b-block a { justify-content: center !important; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr !important; }

  /* Contact form */
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-form-grid { grid-template-columns: 1fr !important; }
}

/* ─── SECTION PADDING — UNIFORM REDUCTION ───────────────── */
@media (max-width: 768px) {

  /* Any section with 100px padding */
  section[style*="padding:100px"],
  section[style*="padding: 100px"],
  section[style*="padding:80px"],
  section[style*="padding: 80px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Named sections */
  #hero, #modules, #use-cases, #pricing, #testimonials,
  #faq, #footer-cta, #gallery, #social-proof, #features,
  #how-it-works, #testimonials, #contact {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Containers */
  .container, .container-sm {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─── FONT SIZES — FLOOR ON SMALL PHONES ─────────────────── */
@media (max-width: 375px) {
  .hero-h1, h1 {
    font-size: clamp(20px, 6vw, 30px) !important;
    letter-spacing: -0.2px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .section-h2, h2 {
    font-size: clamp(18px, 5.5vw, 28px) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .section-sub { font-size: 14px !important; }
  .hero-sub { font-size: 14px !important; }
  .module-name { font-size: 12px !important; }
  .gallery-name { font-size: 12px !important; }
  .plan-price-n { font-size: 36px !important; }
  .plan-features li { font-size: 12px !important; }
  nav, #navbar { height: 52px !important; padding: 0 14px !important; }
  .nav-logo { font-size: 16px !important; }
}

/* ─── iOS-SPECIFIC FIXES ────────────────────────────────── */
/* Prevent bounce scroll on nav overlay */
.nav-mobile-overlay { -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; }

/* Fix input zoom on iOS (requires font-size ≥ 16px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea, select {
    font-size: 16px !important;
    -webkit-appearance: none !important;
    border-radius: 8px !important;
  }
}

/* ─── ANDROID — Touch target minimum ────────────────────── */
@media (max-width: 900px) {
  a, button {
    -webkit-tap-highlight-color: rgba(201, 168, 76, 0.15) !important;
  }
  .uc-tab, .faq-q, .plan-cta, .btn-primary, .btn-secondary,
  .btn-wa, .nav-cta, .qa-btn {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ─── TABLET BREAKPOINT (769–1024px) ─────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .modules-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; }
  .plan-card.featured { order: unset !important; }
}


/* ─── OVERFLOW PROTECTION — Prevents any element from causing horizontal scroll ── */
.container, .container-sm,
section, nav, footer,
#hero, #modules, #use-cases, #pricing,
#gallery, #testimonials, #faq, #footer-cta {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Headings — universal word-break (catches all heading classes) */
h1, h2, h3, h4,
.hero-h1, .section-h2, .h2,
.footer-cta-h2, .plan-name,
.uc-outcome-title, .feature-h3 {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}