/*
 * Habitats Modulaires — Mobile Fixes
 * Correctifs responsive mobile uniquement.
 * Desktop (>= 769px) non impacté.
 * Priorité enqueue 999 → override thème + WooCommerce.
 */

/* ═══════════════════════════════════════════════════════════════════
   #1 — BANDE BLANCHE ~25% À DROITE (CRITIQUE)
   Cause : éléments avec width/min-width fixes créent un scroll
   horizontal. Fix global : html + body contraints à 100vw max.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tous les wrappers de premier niveau */
  .site-header,
  .header-top-row,
  .site-nav,
  .site-main,
  .site-footer,
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* container-main : déjà width:100% dans le thème, mais s'assurer du padding */
  .container-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #10 — HEADER MOBILE
   Logo + icônes sur une ligne propre, zones tactiles ≥ 44×44 px.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header {
    width: 100% !important;
  }

  .header-top-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-main-row {
    height: 60px !important;
    padding: 0 !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-logo img {
    height: 44px !important;
    width: auto !important;
  }

  /* Icônes — zones tactiles 44×44 */
  .header-action-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  /* Masquer le bouton Categorías sur mobile (il existe dans le drawer) */
  .btn-categorias {
    display: none !important;
  }

  /* Masquer la search bar desktop (déjà cachée normalement) */
  .header-search-wrap {
    display: none !important;
    position: static !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Nav secondaire navy — masquée sur mobile sauf si drawer open */
  .site-nav:not(.is-open) {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #8 — FOOTER PLEIN LARGEUR + COMPACT
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-footer {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 32px 0 16px !important;
    margin-top: 40px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Réduire espacement entre sections footer */
  .footer-widget {
    padding: 0 !important;
  }

  .footer-widget-title {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  .footer-widget li {
    margin-bottom: 6px !important;
  }

  .footer-widget a {
    font-size: 13px !important;
  }

  /* Section entreprise (widget 1) — plus compacte */
  .footer-widget--company p {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 11px !important;
    text-align: center !important;
    padding-top: 16px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #9 — ESPACE VIDE BAR CUPÓN → TITRE "REALIZAR PEDIDO"
   WooCommerce génère une .woocommerce-info avec marge excessive.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .habitats-checkout .woocommerce-info,
  .woocommerce-checkout .woocommerce-info,
  .woocommerce-form-coupon-toggle,
  .checkout_coupon {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
  }

  .habitats-checkout__title {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #2 — FORMULAIRE CHECKOUT : 1 COLONNE SUR MOBILE
   WC génère .form-row-first et .form-row-last en float côte à côte.
   Override pour les empiler en 1 colonne sur < 768px.
   Exception : CP + Ville peuvent rester sur 2 colonnes.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Reset floats WC natifs */
  .habitats-checkout .form-row-first,
  .habitats-checkout .form-row-last,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Grid WC billing fields → 1 colonne */
  .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields .shipping_address {
    grid-template-columns: 1fr !important;
  }

  /* Tous les form-row en block full-width */
  .habitats-checkout p.form-row,
  .habitats-checkout .form-row {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Exception CP + Ville : on les laisse côte à côte (si souhaité) */
  /* Décommentez si vous voulez cette exception :
  .habitats-checkout #billing_postcode_field,
  .habitats-checkout #billing_city_field {
    width: 48% !important;
    float: left !important;
  }
  .habitats-checkout #billing_city_field {
    float: right !important;
  }
  */
}

/* ═══════════════════════════════════════════════════════════════════
   #3 — CARTE SEPA : TITRE SUR 1 LIGNE
   Label du payment method = flex. Le texte + icône doivent tenir.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .habitats-checkout__payment li.wc_payment_method > label {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* L'icône reste fixe à gauche */
  .habitats-checkout__payment .habitats-pay-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Le texte label : colonne pour titre + sous-titre */
  .habitats-checkout__payment li.wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
  }

  /* Forcer le texte à tenir sur 1 ou 2 lignes max, pas 3 */
  .habitats-checkout__payment li.wc_payment_method > label > span:not(input):not(.habitats-pay-icon) {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* Padding réduit pour gagner de la place */
  .habitats-checkout__payment li.wc_payment_method {
    padding: 14px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #5 — RÉSUMÉ COMMANDE : WRAP DU NOM PRODUIT
   .habitats-review__name avait white-space:nowrap → overflow horizontal.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .habitats-review__name {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Prix sur la même ligne à droite, ou en dessous si nécessaire */
  .habitats-review__item {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .habitats-review__price {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Le résumé complet ne déborde pas */
  .habitats-checkout-review,
  .habitats-checkout__side {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Tables dans le résumé */
  .habitats-checkout-review table,
  .woocommerce-checkout-review-order table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .habitats-checkout-review td,
  .habitats-checkout-review th {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #6 — BOUTON "CONFIRMAR PEDIDO" : COULEUR BRAND + PLEINE LARGEUR
   Actuellement : background navy (#3D2010).
   Cible : background teal (#C4561A), pleine largeur.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .habitats-checkout .place-order button[type="submit"],
  .habitats-checkout #place_order,
  #place_order {
    background: #C4561A !important;
    color: #ffffff !important;
    width: 100% !important;
    display: block !important;
    padding: 18px 24px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .habitats-checkout .place-order button[type="submit"]:hover,
  .habitats-checkout #place_order:hover,
  #place_order:hover {
    background: #A8461A !important;
  }

  /* Section place-order pleine largeur */
  .habitats-checkout .place-order,
  .woocommerce-checkout .place-order {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #7 — RÉSUMÉ COMMANDE SOUS LE BOUTON SUR MOBILE
   La grille checkout est déjà 1 colonne sur mobile (CSS thème).
   Le résumé (.habitats-checkout__side) est déjà APRÈS le main dans le DOM.
   On s'assure qu'il apparaît bien en dessous.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .habitats-checkout__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .habitats-checkout__main {
    order: 1 !important;
    width: 100% !important;
  }

  .habitats-checkout__side {
    order: 2 !important;
    width: 100% !important;
    position: static !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIXES GÉNÉRAUX MOBILE — checkout + cart pleine largeur
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .habitats-checkout,
  .habitats-cart {
    padding: 20px 0 40px !important;
  }

  .habitats-checkout__section {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  /* Cart items compacts sur mobile */
  .habitats-cart__grid,
  form.habitats-cart__grid {
    gap: 16px !important;
  }

  /* Panier récapitulatif */
  .habitats-cart-recap {
    padding: 16px !important;
  }

  /* Sections thank-you */
  .habitats-thankyou__card {
    padding: 20px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROTECTION OVERFLOW GLOBAL (toutes pages mobile)
   Empêche tout élément à width fixe de casser le layout.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Images et médias */
  img, video, iframe, table {
    max-width: 100% !important;
  }

  /* WooCommerce fallback tables */
  .woocommerce table.shop_table,
  .woocommerce-page table.shop_table {
    width: 100% !important;
    table-layout: auto !important;
  }

  /* Texte légal footer et autres longs strings */
  p, span, a, li, td, th {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}


/* ============================================================
   Alignement titres categories + "Ver todo" a gauche sur mobile
   Ajoute 2026-08-27
   Cause : .section-header en flex-direction:column avec align-items:flex-end
   sur mobile -> titre ET lien "Ver todo" colles a droite.
   Fix : forcer align-items:flex-start sur <= 768px.
   ============================================================ */
@media (max-width: 768px) {
  /* Wrapper section-header : flex column -> aligner a gauche */
  .section-header {
    align-items: flex-start !important;
  }

  /* Titre h2 de section : confirmer gauche (securite) */
  .section-header .section-title {
    text-align: left !important;
  }

  /* Eyebrow label ("Lena", "Combustibles", etc.) */
  .section-header .section-eyebrow {
    text-align: left !important;
  }

  /* Lien "Ver todo ->" : ramener a gauche */
  .section-header .section-view-all {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   Cartes produits + bouton Añadir al carrito (aligne electropo.fr)
   Ajouté 2026-08-29
   Sélecteurs identifiés via curl mobile : thème habitats-modulaires custom,
   PAS les sélecteurs WooCommerce standards.
   - Card wrapper  : article.product-card
   - Contenu carte : .product-card__content
   - Bouton panier : a.btn-cart.ajax_add_to_cart
   - Prix courant  : .product-card__price
   - Prix barré    : .product-card__price-old
   - Badges        : .product-card__badges
   ============================================================ */
@media (max-width: 768px) {

  /* ── CARTE : padding interne généreux, coins arrondis ── */
  article.product-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .product-card__content {
    padding: 10px 12px 14px !important;
    box-sizing: border-box !important;
  }

  /* ── PRIX courant : plus gros, orange brand ── */
  .product-card__price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #C4561A !important;
  }

  /* ── PRIX BARRÉ : plus discret ── */
  .product-card__price-old {
    font-size: 13px !important;
    color: #8B6040 !important;
    text-decoration: line-through !important;
  }

  /* ── BADGE -X% : réduit, coin arrondi carré ── */
  .product-card__badges .onsale,
  .product-card__badge-sale,
  .product-card__badges [class*="badge"] {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* ── BOUTON "Añadir al carrito" : pleine largeur, pill, gradient orange ──
     Classe réelle : a.btn-cart.ajax_add_to_cart (thème custom, pas .button WC)
     Texte "Añadir al carrito" sur 1 ligne → white-space: nowrap + font 14px.
  ── */
  a.btn-cart,
  a.btn-cart.ajax_add_to_cart {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 16px !important;
    margin: 10px 0 0 !important;
    background: linear-gradient(180deg, #E5723A 0%, #C4561A 60%, #A8461A 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 8px rgba(196, 86, 26, 0.25) !important;
    letter-spacing: 0 !important;
  }

  a.btn-cart:hover,
  a.btn-cart.ajax_add_to_cart:hover {
    background: linear-gradient(180deg, #D0632A 0%, #A8461A 60%, #8B3812 100%) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
  }

  /* ── GRILLE produits 2 colonnes : gap homogène ── */
  .products-grid,
  .habitats-products-grid,
  ul.products,
  ul.products.columns-2,
  .woocommerce ul.products {
    gap: 12px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }

  /* ── BADGE CookieYes (bouton re-consentement RGPD) ──
     Repositionné à droite pour ne pas chevaucher les cartes produits.
     Option B appliquée (voir rapport — décision finale à confirmer par l'user).
  ── */
  /* NOTE : bloc commenté par défaut — décommentez après décision user :
  #cky-btn-revisit,
  [data-cky-tag="revisit-consent"],
  .cky-btn-revisit {
    right: 12px !important;
    left: auto !important;
    bottom: 16px !important;
  }
  */
}

/* ============================================================
   IMAGE PRODUIT : +38% de hauteur pour lisibilite mobile
   Ajoute 2026-08-29 (v1.0.5)
   Sélecteur réel identifié via curl : a.product-card__image (balise <a>)
   Technique thème : padding-top 79% (aspect-ratio CSS)
   Hauteur actuelle sur mobile 2 colonnes (~165px wide) : 165×0.79 = ~130px
   Cible : 180px (+38%) → padding-top override : 180/165 = 109%
   object-fit: contain déjà en place dans le thème (images leña non croppées)
   Fond blanc via background #fff (thème utilise --apple-gray sinon)
   ============================================================ */
@media (max-width: 768px) {
  /* Wrapper image : augmenter le ratio padding-top pour zone plus haute */
  a.product-card__image {
    padding-top: 109% !important; /* ~180px sur colonne 165px = +38% vs 130px avant */
    background: #ffffff !important; /* fond blanc garanti (pas beige) */
  }

  /* Image intérieure : conserver contain + réduire padding pour maximiser surface */
  a.product-card__image img {
    padding: 12px !important; /* réduit de 20px (thème) → image occupe plus de surface */
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Screens très étroits (< 380px) — colonne ~150px, adapter ratio */
@media (max-width: 380px) {
  a.product-card__image {
    padding-top: 110% !important; /* ~165px sur colonne 150px */
  }
}


/* ============================================================
   #SINGLE PRODUCT MOBILE — v1.0.8 (2026-09-02)
   Layout : quantity à gauche + bouton compact à droite, MÊME LIGNE.
   Bouton : icône cart masquée mobile pour gagner de la place.
   ============================================================ */

@media (max-width: 767px) {

  /* 1. Neutraliser sticky : bannière devient bloc normal */
  .sp-page .sp-cta-banner,
  .sp-page .sp-cta-banner.is-sticky {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    transform: none !important;
    background: #FAF3EB !important;
    color: #2C1A0E !important;
    padding: 14px !important;
    margin: 20px 0 24px !important;
    border: 1px solid #F0E6D3 !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Masquer info-bar dupliquée dark */
  .sp-page .sp-cta-banner__info { display: none !important; }

  /* Info-bar statique claire — style vertical propre */
  .sp-page .sp-info > .sp-info-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    background: #FAF3EB !important;
    border: 1px solid #F0E6D3 !important;
    border-radius: 12px !important;
    margin: 16px 0 0 !important;
    font-size: 13px !important;
  }
  .sp-page .sp-info > .sp-info-bar li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #2C1A0E !important;
  }
  .sp-page .sp-info > .sp-info-bar svg { color: #C4561A !important; flex-shrink: 0 !important; }

  /* 3. Actions ROW : qty à gauche + bouton à droite */
  .sp-page .sp-cta-banner__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* 4. Quantity compact à gauche */
  .sp-page .sp-cta-banner .sp-qty {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    background: #ffffff !important;
    border: 1px solid #F0E6D3 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .sp-page .sp-cta-banner .sp-qty__btn {
    color: #3D2010 !important;
    height: 48px !important;
    width: 36px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .sp-page .sp-cta-banner .sp-qty__input {
    color: #3D2010 !important;
    height: 48px !important;
    width: 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 5. Bouton compact à droite, prend l'espace restant */
  .sp-page button.sp-cta,
  .sp-page .sp-cta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    min-height: 48px !important;
    background: #3D2010 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    box-shadow: 0 4px 12px rgba(61, 32, 16, 0.25) !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.1s !important;
  }
  .sp-page .sp-cta:hover,
  .sp-page .sp-cta:active {
    background: #1A0C05 !important;
    transform: scale(0.99) !important;
  }
  .sp-page .sp-cta.is-disabled {
    background: #F0E6D3 !important;
    color: #8B6040 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  /* Masquer icône cart sur mobile pour gagner de la place */
  .sp-page .sp-cta svg { display: none !important; }

  .sp-page .sp-cta .sp-cta__label,
  .sp-page .sp-cta .sp-cta__sep,
  .sp-page .sp-cta .sp-cta__total,
  .sp-page .sp-cta .woocommerce-Price-amount {
    white-space: nowrap !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .sp-page .sp-cta .sp-cta__sep { opacity: 0.5 !important; margin: 0 3px !important; }
  .sp-page .sp-cta .sp-cta__total { font-weight: 700 !important; }

  /* Compenser retrait sticky */
  .sp-page { padding-bottom: 24px !important; }
}

/* Très petits écrans (iPhone SE / mini <= 380px) : ultra-compact */
@media (max-width: 380px) {
  .sp-page .sp-cta-banner__actions { gap: 8px !important; }
  .sp-page .sp-cta-banner .sp-qty__btn { width: 32px !important; }
  .sp-page .sp-cta-banner .sp-qty__input { width: 32px !important; }
  .sp-page .sp-cta,
  .sp-page .sp-cta .sp-cta__label,
  .sp-page .sp-cta .sp-cta__total,
  .sp-page .sp-cta .woocommerce-Price-amount {
    font-size: 12px !important;
  }
  .sp-page .sp-cta { padding: 10px 10px !important; }
}

/* 6. CookieYes bouton — discret, bottom-right, semi-transparent */
@media (max-width: 767px) {
  #cky-btn-revisit,
  [data-cky-tag="revisit-consent"],
  .cky-btn-revisit {
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  #cky-btn-revisit:hover,
  #cky-btn-revisit:active,
  #cky-btn-revisit:focus {
    opacity: 1 !important;
  }
}