/**
 * Electropo — Mobile Responsive Overrides
 * Refonte mobile pour matcher electropo.fr (Next.js) — 2026-08-31
 *
 * RÈGLE : toutes les règles sont wrappées dans @media (max-width: 768px)
 *         sauf exceptions justifiées. Desktop non impacté.
 *
 * Charge APRÈS style.css + electropo-design.css (priorité 999 dans inc/mobile-enqueue.php).
 * Ne touche PAS aux mu-plugins.
 */

/* ══════════════════════════════════════════════════════════════════════════
   SAFETY NET GLOBAL — prévention overflow horizontal (iOS Safari)
═══════════════════════════════════════════════════════════════════════════ */
html,
body {
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   E1 (P0) — PRODUCT SCROLL → GRID 2 COLONNES SUR MOBILE
   Problème : .product-scroll est un carrousel horizontal sur toutes les tailles.
   Fix : passer en grid 2 colonnes sur mobile, toutes les cartes visibles.
   Référence : electropo.fr affiche 2 colonnes × N lignes (grid vertical).
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .product-scroll {
    /* Override le carrousel horizontal */
    display: grid !important;
    grid-auto-flow: row !important;          /* pas column */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-columns: auto !important;
    overflow-x: visible !important;          /* pas de scroll horizontal */
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    gap: 12px !important;
    padding-bottom: 4px !important;
  }

  /* Scrollbar masquée (E9) */
  .product-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* Cartes : reset le snap + min-width du carrousel */
  .product-scroll > * {
    scroll-snap-align: none !important;
    min-width: 0 !important;                 /* était 240px-260px */
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   E2 (P0) — SÉLECTEUR DE LANGUE DANS LE HEADER MOBILE
   Refonte 2026-08-31 : le sélecteur est maintenant .ep-lang dans ep-header-actions.
   Mode compact (drapeau seul + ▼) sur mobile via .ep-lang-mobile,
   mode full (drapeau + code + ▼) sur desktop via .ep-lang-desktop.
   Géré dans header-responsive.css.
   Ces règles assurent la rétrocompatibilité si l'ancien .lang-switcher
   est encore rendu (plugin ou autre).
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Nouveau lang selector compact — déjà correct dans header-responsive.css */
  .ep-lang--compact .ep-lang__code {
    display: none !important;
  }
  .ep-lang__btn {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Rétrocompatibilité : ancien .lang-switcher (si encore présent) */
  .header-actions .lang-switcher {
    display: none !important; /* masqué — remplacé par ep-lang */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   E3 (P0) — COOKIE BANNER : position fixed bottom center (no bottom-nav)
   Refonte 2026-08-31 : la bottom-nav est supprimée.
   Le cookie banner est désormais positionné directement en bas (16px),
   sans offset bottom-nav. Géré principalement via ep-cookie-banner dans
   header-responsive.css. Ces règles neutralisent l'ancien .cookie-banner
   au cas où il persisterait via un autre plugin.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ancien cookie banner (si présent via plugin) — position sans bottom-nav */
  .cookie-banner {
    z-index: 50 !important;
    bottom: 16px !important;
  }

  /* Hero : réduire le padding vertical pour que les CTA soient au-dessus du fold */
  .hero {
    padding: 40px 0 48px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   E4 (P1) — CARD PRODUIT : image plus haute sur mobile
   Référence : images ~1.2:1 (plus hautes que carrées)
   Fix : passer l'aspect-ratio à 4/5 sur mobile pour plus de hauteur d'image.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .product-card__media {
    aspect-ratio: 4 / 5 !important;    /* était 1/1 → plus de hauteur */
  }

  .product-card__media img {
    padding: 8px !important;           /* légèrement réduit sur petits écrans */
    object-fit: contain !important;
  }

  /* Corps de la card : espacement compact sur mobile */
  .product-card__body {
    padding: 10px !important;
    gap: 4px !important;
  }

  /* Titre produit : lisible mais compact */
  .product-card__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    /* Limite à 2 lignes pour uniformité des cards */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Prix : légèrement plus petit sur mobile */
  .product-card__price {
    font-size: 15px !important;
    margin-top: 2px !important;
  }

  /* Specs : compact */
  .product-card__specs {
    font-size: 11px !important;
  }

  /* Bouton "In den Warenkorb" — pleine largeur, pill cyan, min 40px touch target */
  .product-card__add.btn-primary,
  .product-card__add.btn-sm,
  .product-card__actions .btn {
    width: 100% !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   E5 (P1) — HERO : padding réduit sur mobile
   (déjà couvert dans E3 ci-dessus)
═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   E6 (P1) — SECTION HEADER MOBILE : "Voir tout" CTA centré en bas
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Le bouton "Voir tout" sous les cards (mobile) */
  .section-header__cta-mobile {
    display: flex !important;
    justify-content: center !important;
    margin-top: 24px !important;
  }

  .section-header__cta-mobile .btn {
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   E8 (P1) — HEADER MOBILE : ep-header toujours visible
   Refonte 2026-08-31 : ep-header remplace site-header + topbar.
   Le header est sticky top-0 par défaut dans header-responsive.css.
   Ces règles assurent la rétrocompatibilité si l'ancien .site-header
   est encore référencé par des plugins ou CSS tiers.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Nouveau header responsive — toujours visible, sticky */
  .ep-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }

  /* Row 1 : hauteur 80px conservée (=h-20 de Next.js) — pas de réduction sur mobile */
  .ep-row1__inner {
    height: 80px !important;
  }

  /* Row 2 quicknav — masquée sur mobile (hidden md:block) */
  .ep-quicknav {
    display: none !important;
  }

  /* Sur la homepage, le hero doit toucher directement le header */
  body.home .site-main,
  body.home #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Autres pages : pas de padding-top forcé */
  body:not(.home) .site-main,
  body:not(.home) #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   E10 (P2) — SECTIONS : spacing réduit sur mobile
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-ac {
    padding: 40px 0 !important;
  }

  .section-cat {
    padding: 40px 0 !important;
  }

  .section-featured {
    padding: 40px 0 !important;
  }

  .section-header {
    margin-bottom: 20px !important;
  }

  .reassurance-big {
    padding: 32px 0 !important;
  }

  .reassurance-big__grid {
    grid-template-columns: 1fr !important;   /* 1 colonne sur mobile */
    gap: 12px !important;
  }

  .newsletter-section {
    padding: 48px 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM NAV — SUPPRIMÉE (refonte 2026-08-31)
   La bottom-nav n'existe plus sur le site. Le padding-bottom body est
   remis à 0 pour ne pas laisser un espace vide en bas de page.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    padding-bottom: 0 !important;
  }
  body.wp-admin {
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER : logo + icônes sur mobile (refonte 2026-08-31 — classes ep-*)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Logo mobile : 22px height (ep-logo--sm, déjà défini dans header-responsive.css) */
  .ep-logo--sm img {
    height: 22px !important;
    width: auto !important;
  }

  /* Icônes header : taille cible tactile 36px (36px + padding = zone cliquable ~44px) */
  .ep-btn-icon-mobile {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Icônes cart + compte */
  .ep-cart-link,
  .ep-account-link {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Cache le label du compte sur mobile */
  .ep-account-link__label {
    display: none !important;
  }

  /* Rétrocompatibilité : anciennes classes si elles existent encore */
  .site-logo__img {
    height: 22px !important;
    width: auto !important;
  }
  .header-action-link__label {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CATALOGUE PAGE MOBILE — grid 2 colonnes
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Si WooCommerce génère un .products ul.products natif */
  ul.products.columns-4,
  ul.products.columns-3,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ul.products li.product {
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
  }

  /* Filtres catalogue : s'empilent verticalement */
  .catalog-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .filter-pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .filter-pills::-webkit-scrollbar {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT / PANIER MOBILE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Formulaires checkout : champs full width */
  .form-row-first,
  .form-row-last {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin-right: 0 !important;
  }

  /* Sticky cart summary : ne pas coller en top sur mobile */
  .cart-summary,
  .checkout-summary {
    position: static !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FICHE PRODUIT SINGLE — mobile
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .product-grid-single {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .product-price {
    font-size: 24px !important;
  }

  /* Bouton "Ajouter au panier" : pleine largeur */
  .product-buy .single_add_to_cart_button {
    width: 100% !important;
    border-radius: 999px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEGA MENU MOBILE — déjà géré via CSS inline dans header.php
   Juste quelques ajustements de cohérence
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .mega-menu__panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RÉASSURANCE STRIP — 2 colonnes sur mobile (pas 1)
   Référence : "Kostenloser Versand" | "100% sichere Zahlung" sur la même ligne
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .reassurance__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .reassurance__item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .reassurance {
    padding: 20px 0 !important;
  }
}