/* ═════════════════════════════════════════════════════════════════════════
   tu-product-detail-mobile-polish.css  —  Tropical Urban (pré-bêta)
   ─────────────────────────────────────────────────────────────────────────
   Polish mobile pour produit-detail.html UNIQUEMENT.

   Layer ADDITIF non destructif :
     - Scope strict   : body.product-detail-page  (zéro fuite hors fiche)
     - Scope mobile   : @media (max-width: 768 / 390 / 360 / 320 px)
     - Aucune modification HTML, aucun rename JS, aucun changement backend
     - Préserve les hooks JS critiques :
         #add-to-cart-btn, #sticky-mobile-cart-btn, #sticky-mobile-bar,
         #sticky-mobile-price, #tu-sticky-reco, #tu-sticky-reco-btn,
         body.tu-has-reco-sticky, body[data-sticky-mode],
         #tu-outfit-cta-btn, #tu-suggest-cta-btn, #suggest-section,
         #crosssell-section, .tu-outfit-board-chip, .option-value,
         #stock-message, #product-quantity, #wishlist-btn-detail,
         #main-product-image, #gallery-prev/next/-zoom-icon,
         #reviews-section, #popup-reviews-list, et toute la couche
         tu-reviews / tu-reviews-v2 / tu-mobile-polish §3 / §9 / §14.

   Stratégie cascade :
     - Chargé APRÈS tu-mobile-polish.css (§3, §9), produit-detail-premium.css
       (sticky reco) et inline <style id="tu-pd-mobile-cleanup"> →
       gagne via source-order ; !important utilisé uniquement quand
       nécessaire pour battre les règles existantes en spécificité égale.
     - body.tu-has-reco-sticky est posé/retiré par le JS du sticky reco
       (l. 6915 de produit-detail.html) → on s'en sert pour piloter les
       réserves padding-bottom et la position du bouton TOP.

   Issues couverts :
     A. #sticky-mobile-bar peut masquer le bas des cards (réserve ↑)
     B. .scroll-to-top peut chevaucher #tu-sticky-reco (repositionné)
     C. Description / Détails / Avis ont trop de padding mobile (compacté)
     D. Sections recos/silhouette/suggest non protégées en zone reco (réserve dynamique)
   ═════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   §1) RÉSERVE BAS — main.product-detail-page
   WHY: tu-mobile-polish §3 réserve 96px (calculé pour #sticky-mobile-bar
        ~80px). Mais quand body.tu-has-reco-sticky est actif, le bundle
        #tu-sticky-reco (~95px hauteur réelle avec safe-area iOS) peut
        masquer la dernière card. On augmente la réserve dynamiquement.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.product-detail-page main.product-detail-page {
    /* Mode normal : sticky CTA principal (#sticky-mobile-bar ~80px) +
       respiration. 110px > 96px d'origine pour donner ~14px de marge
       visuelle entre la dernière card et le sticky. */
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
  /* Mode bundle reco actif : #tu-sticky-reco apparaît (~95px), couvre
     #sticky-mobile-bar. On réserve davantage pour ne pas masquer les
     dernières recos / la card silhouette. */
  body.product-detail-page.tu-has-reco-sticky main.product-detail-page {
    padding-bottom: calc(135px + env(safe-area-inset-bottom)) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §2) BOUTON TOP — repositionnement face aux 2 sticky bars
   WHY: tu-mobile-polish §9 le pose à `bottom: 110px + safe-area` quand
        main.product-detail-page est sibling du bouton (créé par global.js
        document.body.appendChild). C'est OK pour #sticky-mobile-bar
        (~80px), mais quand #tu-sticky-reco (~95px, z-index 9000) prend
        le relais, le bouton TOP peut le chevaucher. On force :
          - état normal : bottom 98px (au-dessus du sticky principal,
                          un peu plus serré que les 110px d'origine)
          - état bundle : bottom 130px (au-dessus de #tu-sticky-reco)
          - z-index 800 : > #sticky-mobile-bar (500), < #tu-sticky-reco (9000)
            → le bouton ne couvre jamais le bundle quand visible.
   Spécificité doublée par la chaîne `body.product-detail-page` +
   `main.product-detail-page ~ .scroll-to-top` pour gagner contre §9.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* État normal — bouton TOP juste au-dessus de #sticky-mobile-bar */
  body.product-detail-page main.product-detail-page ~ .scroll-to-top,
  body.product-detail-page main.product-detail-page ~ .back-to-top,
  body.product-detail-page #scroll-to-top.scroll-to-top {
    bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    z-index: 800 !important;
  }
  /* État bundle actif — bouton TOP plus haut pour ne pas chevaucher
     #tu-sticky-reco (z-index 9000, height ~95px) */
  body.product-detail-page.tu-has-reco-sticky main.product-detail-page ~ .scroll-to-top,
  body.product-detail-page.tu-has-reco-sticky main.product-detail-page ~ .back-to-top,
  body.product-detail-page.tu-has-reco-sticky #scroll-to-top.scroll-to-top {
    bottom: calc(130px + env(safe-area-inset-bottom)) !important;
  }
  /* Transition douce du déplacement (réutilise la durée canon-Apple/Nike) */
  body.product-detail-page main.product-detail-page ~ .scroll-to-top,
  body.product-detail-page main.product-detail-page ~ .back-to-top {
    transition:
      bottom 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s ease,
      transform 0.2s ease !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §3) DESCRIPTION / ONGLETS / DÉTAILS — compactage mobile
   WHY: la section .product-tabs-section + .tu-product-details-list ont
        des paddings desktop. Sur mobile, ça crée des grands vides et
        une hauteur excessive. On compacte sans casser la lisibilité.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.product-detail-page .product-tabs-section {
    padding: 14px 0 16px !important;
    margin: 8px 0 14px !important;
  }
  body.product-detail-page .product-tabs-section .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Header onglets compact */
  body.product-detail-page .tabs-header,
  body.product-detail-page .tabs-header-with-badges {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
  /* Contenu onglet (description / détails / matières) */
  body.product-detail-page .tab-content,
  body.product-detail-page .tab-pane,
  body.product-detail-page .product-tabs-section .tu-tab-panel,
  body.product-detail-page #product-description,
  body.product-detail-page .product-description-full {
    padding: 10px 0 6px !important;
    line-height: 1.55 !important;
    font-size: 0.94rem !important;
  }
  /* Liste détails (.tu-product-details-list) — bullets serrés */
  body.product-detail-page .tu-product-details-list {
    margin: 8px 0 !important;
    gap: 6px !important;
  }
  body.product-detail-page .tu-product-details-list li {
    padding: 8px 12px 8px 26px !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4) AVIS CLIENTS — compactage section + bouton "Afficher les X avis"
   WHY: .reviews-section a un padding-bottom de 48px hérité (inline
        produit-detail.html l. 1083) → en mobile, c'est trop pour la
        densité demandée. On serre. On garantit aussi que le bouton
        "Afficher les X avis" garde une marge respiratoire pour ne pas
        être coupé/collé à la dernière card.
   Préserve les filtres, étoiles, badges "Achat vérifié", "Sélection",
   et "Avis marqué utile" (uniquement padding/margin section ajusté).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.product-detail-page .reviews-section,
  body.product-detail-page .tu-product-reviews,
  body.product-detail-page #reviews-section {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }
  /* Bouton "Afficher les X avis" — marge respirante pour qu'il ne soit
     ni collé à la dernière review card ni masqué par le sticky CTA */
  body.product-detail-page .tu-product-reviews .tu-rv-show-more,
  body.product-detail-page .tu-product-reviews .tu-rv-cta-more,
  body.product-detail-page .tu-product-reviews .tu-rv-show-all,
  body.product-detail-page .tu-product-reviews button[data-action*="show"],
  body.product-detail-page #reviews-section .tu-rv-show-more,
  body.product-detail-page #reviews-section button[type="button"][data-action] {
    margin: 14px auto 6px !important;
    min-height: 44px !important;
  }
  /* Header "Ce qu'en pensent nos clients" — densité plus tight */
  body.product-detail-page .tu-product-reviews .tu-rv-header,
  body.product-detail-page .tu-product-reviews .reviews-header {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §5) MÊME UNIVERS / RECOMMANDATIONS / COMPOSER SILHOUETTE
   WHY: Sections #crosssell-section et #suggest-section ont un padding
        hérité desktop. Sur mobile, on serre. La card .tu-outfit-cta
        (silhouette CTA) reçoit une marge top plus humaine. La protection
        du chevauchement avec sticky est gérée en §1 (réserve dynamique).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.product-detail-page #crosssell-section,
  body.product-detail-page #suggest-section {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }
  body.product-detail-page #crosssell-section .container,
  body.product-detail-page #suggest-section .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Card "Composer votre silhouette" / "Ajouter les X pièces" : margin
     top plus serrée, padding humain (override produit-detail-premium §6 l.
     981-987 qui met 16px 18px) */
  body.product-detail-page .tu-outfit-cta,
  body.product-detail-page .tu-suggest-cta {
    margin: 16px 0 0 !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
  }
  /* Board (chips + total) plus compact */
  body.product-detail-page .tu-outfit-board {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
  }
  /* Bouton CTA du module silhouette : touch HIG 44, plein largeur si étroit */
  body.product-detail-page .tu-outfit-cta-action {
    min-height: 44px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §6) BREAKPOINTS FINS — ≤ 390 / ≤ 360 / ≤ 320 px
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  /* Padding latéral plus serré pour gagner de la largeur utile */
  body.product-detail-page .product-tabs-section,
  body.product-detail-page .reviews-section,
  body.product-detail-page #crosssell-section,
  body.product-detail-page #suggest-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.product-detail-page .product-tabs-section .container,
  body.product-detail-page .reviews-section .container,
  body.product-detail-page #crosssell-section .container,
  body.product-detail-page #suggest-section .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 360px) {
  /* Sticky bars plus compactes à 360px → réserve un peu plus tight */
  body.product-detail-page main.product-detail-page {
    padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important;
  }
  body.product-detail-page.tu-has-reco-sticky main.product-detail-page {
    padding-bottom: calc(125px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 320px) {
  /* iPhone SE 1 / Galaxy S8 — sticky bars compactes */
  body.product-detail-page main.product-detail-page ~ .scroll-to-top,
  body.product-detail-page main.product-detail-page ~ .back-to-top {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    height: 44px !important;
  }
  body.product-detail-page.tu-has-reco-sticky main.product-detail-page ~ .scroll-to-top,
  body.product-detail-page.tu-has-reco-sticky main.product-detail-page ~ .back-to-top {
    bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }
  /* Description compactée encore */
  body.product-detail-page .tab-content,
  body.product-detail-page .tab-pane,
  body.product-detail-page #product-description {
    font-size: 0.9rem !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §7) PRÉFÉRENCE UTILISATEUR — reduced motion
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.product-detail-page #sticky-mobile-bar,
  body.product-detail-page #tu-sticky-reco,
  body.product-detail-page main.product-detail-page ~ .scroll-to-top,
  body.product-detail-page main.product-detail-page ~ .back-to-top {
    transition: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §8) BLOC "VOUS AVEZ DÉJÀ DONNÉ VOTRE AVIS" — compactage ultra-mobile
   WHY: Le bloc .tu-already-reviewed (inline produit-detail.html l. 2351)
        est un pill horizontal flex avec icône 28×28 + titre 12.5px +
        sous-titre 11px, padding 10/16. Le titre "Vous avez déjà donné
        votre avis pour ce produit" (40+ caractères) écrase le pill en
        320×568 → texte sur 3 lignes serrées, hauteur excessive et
        sous-titre quasi illisible. Le bouton "Modifier mon avis"
        (.tu-edit-review-btn) reste OK mais doit garder min-height 44px
        tactile.
   STRATÉGIE: à ≤ 360px on rebascule la pill en flex column-like compacte
   avec icône réduite et hiérarchie claire. À ≤ 320px on serre encore
   les paddings et tailles. Aucun changement HTML/JS — uniquement
   CSS additif scopé.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  body.product-detail-page .tu-already-reviewed-wrap {
    margin: 10px 0 !important;
    gap: 8px !important;
  }
  body.product-detail-page .tu-already-reviewed {
    /* Reste flex row mais on serre tout : padding compact, gap réduit,
       border-radius pill conservé, alignement vertical centré. */
    padding: 8px 12px 8px 8px !important;
    gap: 8px !important;
    max-width: 100%;
    /* Permet au texte de wrapper proprement sans déborder du pill */
    box-sizing: border-box;
  }
  body.product-detail-page .tu-already-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, .30) !important;
  }
  body.product-detail-page .tu-already-title {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    /* Permet au titre de wrapper sans pousser le pill au-delà des bords */
    word-break: normal;
    overflow-wrap: anywhere;
  }
  body.product-detail-page .tu-already-sub {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }
  body.product-detail-page .tu-edit-review-btn {
    /* Bouton "Modifier mon avis" — reste tactile (44px) mais font/padding serrés */
    padding: 10px 18px !important;
    font-size: 12px !important;
    min-height: 44px !important;
    letter-spacing: .15px !important;
  }
}
@media (max-width: 320px) {
  body.product-detail-page .tu-already-reviewed {
    padding: 7px 10px 7px 7px !important;
    gap: 7px !important;
    /* Réduit le border-radius pour éviter un pill exagéré sur très petit
       écran tout en gardant une carte arrondie premium. */
    border-radius: 14px !important;
  }
  body.product-detail-page .tu-already-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
  body.product-detail-page .tu-already-title {
    font-size: 11px !important;
  }
  body.product-detail-page .tu-already-sub {
    font-size: 10px !important;
  }
  body.product-detail-page .tu-edit-review-btn {
    padding: 9px 14px !important;
    font-size: 11.5px !important;
    /* SVG icône reste à 14px (cohérent avec inline 2402-2405).
       On ne touche pas .tu-edit-ico pour préserver la cohérence visuelle. */
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   FIN tu-product-detail-mobile-polish.css
   ═════════════════════════════════════════════════════════════════════════ */