/* ============================================================
   MADAME — Mobile-app-friendly (PWA-ready)
   - iOS safe areas (notch + home indicator)
   - Touch targets 44px+ (Apple HIG)
   - Smooth momentum scrolling
   - Sticky bottom nav app-like
   - Drawer menu fullscreen
   - No hover-only behavior
   - Pull-to-refresh disabled (anti-rebond)
   ============================================================ */

/* ============================================================
   IOS SAFE AREAS — notch + home indicator
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .madame-announcement {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .madame-footer-baseline {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .madame-mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   TOUCH OPTIMIZATIONS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Disable all hover transforms (no hover-only) */
  .madame-cat-card:hover .madame-cat-img img,
  .madame-product-card:hover .madame-product-img img,
  .madame-journal-card:hover .madame-journal-img img,
  .madame-ig-tile:hover img {
    transform: none;
  }

  .madame-product-card:hover .madame-product-img-2 { opacity: 0; }
  .madame-product-card:hover .madame-product-img-1 { opacity: 1; }

  /* Tactile : tap pour basculer la 2nd image */
  .madame-product-card.is-tapped .madame-product-img-2 { opacity: 1; }
  .madame-product-card.is-tapped .madame-product-img-1 { opacity: 0; }

  /* Disable cursor-none zones */
  .cursor-area { cursor: auto; }
}

/* All clickable elements minimum 44px */
@media (max-width: 1024px) {
  .madame-icon-btn { min-width: 44px; min-height: 44px; }
  .madame-cta { padding: 18px 32px; min-height: 48px; }
  .madame-tab { padding: 14px 16px; min-height: 44px; }
  .madame-nav-list a { padding: 10px 0; min-height: 44px; }
}

/* ============================================================
   MOMENTUM SCROLLING + DISABLE PULL-TO-REFRESH
   ============================================================ */
html {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: manipulation; /* No 300ms tap delay */
}
body {
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ============================================================
   MOBILE HEADER — Plus compact + nav drawer
   ============================================================ */
@media (max-width: 768px) {
  .madame-header-inner {
    grid-template-columns: auto 1fr auto;
    padding: 10px var(--gutter);
  }
  .madame-header-left { gap: 0; }
  .madame-header-right { gap: 0; }
  .madame-header-right .madame-icon-btn:nth-child(1),
  .madame-header-right .madame-icon-btn:nth-child(2) {
    display: none; /* Compte + Favoris masqués sur mobile (dans le drawer) */
  }
  .madame-wordmark-name { font-size: 1.4rem; }
  .madame-wordmark-tagline { font-size: 9px; margin-top: 2px; }
  .madame-search-toggle { display: none; } /* Recherche dans le drawer */
}

/* ============================================================
   MOBILE NAV DRAWER — Fullscreen overlay
   ============================================================ */
.madame-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);
  transform: translateX(-100%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(var(--gutter), env(safe-area-inset-top)) var(--gutter) max(var(--gutter), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.madame-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.madame-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.madame-drawer-close {
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.madame-drawer-search {
  display: flex;
  border: 1px solid var(--line);
  margin-bottom: 32px;
}
.madame-drawer-search input {
  flex: 1;
  padding: 16px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px; /* >= 16px = no iOS zoom on focus */
  color: var(--ink);
}
.madame-drawer-search input:focus { outline: none; }
.madame-drawer-search button {
  width: 56px;
  background: var(--ink);
  color: var(--white);
  border: 0;
  cursor: pointer;
}
.madame-drawer-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.madame-drawer-list li {
  border-bottom: 1px solid var(--line);
}
.madame-drawer-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  min-height: 60px;
}
.madame-drawer-list a::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  transform: rotate(45deg);
}
.madame-drawer-edition em {
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--forest);
  font-weight: 400;
}
.madame-drawer-foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.madame-drawer-foot a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  padding: 14px 0;
}
.madame-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.madame-drawer.is-open ~ .madame-drawer-overlay,
body.has-drawer-open .madame-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}
body.has-drawer-open { overflow: hidden; }

/* ============================================================
   STICKY BOTTOM NAV — App-like (mobile only)
   ============================================================ */
.madame-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  padding: 8px 0 8px;
  grid-template-columns: repeat(5, 1fr);
}
.madame-mobile-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 500;
  position: relative;
  min-height: 44px;
}
.madame-mobile-bottom-nav a.is-active { color: var(--forest); }
.madame-mobile-bottom-nav .madame-tab-icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.madame-mobile-bottom-nav .madame-tab-cart-count {
  position: absolute;
  top: 2px; right: calc(50% - 22px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--forest);
  color: var(--white);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .madame-mobile-bottom-nav { display: grid; }
  body.madame-active { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   MOBILE — HOME SECTIONS
   ============================================================ */
@media (max-width: 768px) {
  /* Hero plus compact */
  .madame-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .madame-hero-image { aspect-ratio: 4/5; }
  .madame-hero-content {
    padding: 32px var(--gutter) 56px;
    gap: 20px;
  }
  .madame-h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; }
  .madame-lead { font-size: 1rem; }

  /* Categories : 1 colonne pleine + 2 colonnes */
  .madame-categories-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  /* Manifesto plus aéré */
  .madame-manifesto-quote { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-bottom: 40px; }
  .madame-manifesto-stats { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Editorial empilé */
  .madame-editorial-grid { gap: 32px; }

  /* Featured tabs scrollables horizontalement */
  .madame-featured-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 calc(var(--gutter) * -1) 32px;
    padding: 0 var(--gutter);
  }
  .madame-featured-tabs::-webkit-scrollbar { display: none; }
  .madame-tab { white-space: nowrap; flex-shrink: 0; }

  .madame-featured-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Newsletter form vertical */
  .madame-newsletter-form { flex-direction: column; }
  .madame-newsletter-form input[type="email"] { width: 100%; }
  .madame-newsletter-form .madame-cta { width: 100%; justify-content: center; }

  /* Footer : titres en accordéon possible (pas implémenté ici, optionnel) */
  .madame-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .madame-footer-baseline .madame-container { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   FORMS — empêcher le zoom iOS au focus
   ============================================================ */
input, select, textarea {
  font-size: 16px; /* iOS won't zoom if >= 16px */
}

/* ============================================================
   ANIMATIONS — respect prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .madame-drawer { transition: none; }
  .madame-mobile-bottom-nav { backdrop-filter: none; }
}

/* ============================================================
   PWA — Theme color (placé dans <head> via <meta>)
   ============================================================ */
/* à ajouter via wp_head : <meta name="theme-color" content="#0A0A0A"> */
/* à ajouter manifest.json pour install prompt */