/*
  Tropical Urban — Cart + Checkout Mobile Polish
  Date: 2026-05-05
  Scope:
  - cart.html
  - checkout.php
  Purpose:
  - mobile pre-beta polish
  - sticky checkout bar safe area
  - delivery cards compacting
  - checkout form touch targets
  - TOP button positioning/shadow
  Safety:
  - CSS-only
  - no JS selectors renamed
  - no endpoint / Stripe / DB change
  Notes:
  - cart.html : <main class="cart-page"> ; <body> sans class → on cible
    via `main.cart-page X` ou `body:has(#tu-cart-sticky-checkout…)`
    (cohérent avec les anciens blocs §26 / §27).
  - checkout.php : <body class="checkout-page"> → on cible via
    `body.checkout-page X` (cohérent avec l'ancien §28 et le bloc
    desktop existant `tu-checkout-desktop-premium-css` qui couvre
    `body.checkout-page` ≥ 769px uniquement).
  Migration de :
  - cart.html  : <style id="tu-cart-polish-prebeta-26"> + <style id="tu-cart-polish-p2-top-delivery">
  - checkout.php : <style id="tu-checkout-mobile-polish-prebeta">
*/

/* ============================================================================
   1) BASE SHARED MOBILE DELIVERY CARDS — v2 layout flex row
   ----------------------------------------------------------------------------
   [final polish 2026-05-05 22:00]
   Refonte du layout mobile uniquement (≤768px) pour passer les cartes
   livraison en flex row :
       [radio (flow)] · [icône (flow flex item)] · [details (flex 1)] · [prix (auto)]
   Avantages vs layout block centered précédent :
   - le prix n'est plus "perdu" centré sous le texte → aligné à droite
   - le texte central est aligné à gauche, plus naturel à lire
   - les badges (Recommandé / Rapide / Gratuite dès 80 €) wrappent
     proprement à côté du nom au lieu de pousser tout en hauteur
   - les features (Retrait immédiat / Disponible sous 2h / etc.) sont
     en row + wrap → 2 chips compacts au lieu de 2 lignes empilées
   - hauteur globale réduite ~20-25 % vs ancienne version
   États visuels préservés (cart-page.css:794-799) :
   - .shipping-option.selected = border + bg + box-shadow + translateY(-2px)
     → AUCUNE de ces propriétés n'est touchée par le layout interne
   - .shipping-option:hover .shipping-icon = transform rotate+scale
     → fonctionne en position:static comme en absolute
   - .badge-recommended / .badge-fast / .shipping-threshold-badge
     conservent leurs styles propres (cart-page.css)
   Compatibilité radio :
   - <input type="radio" name="shipping"> reste enfant DOM du label,
     premier flex item, taille native (~13-18px selon UA), inline-default
   - Ne casse ni le tap sur la card (toggle radio via label HTML)
     ni le keyboard a11y (radio focus-able)
   - Aucun JS référence ce DOM order, donc le passage en flex est safe
   Aucun !important : la spécificité des sélecteurs `main.cart-page X`
   et `body.checkout-page X` (0,2,1) suffit à battre les baselines à
   0,1,0 dans cart-page.css / checkout.css.
   ============================================================================ */
@media (max-width: 768px) {

  /* ─── Conteneur des 3 options ─────────────────────────────────── */
  main.cart-page .shipping-options,
  body.checkout-page .shipping-options {
    gap: 0.5rem;
  }

  /* ─── Carte option : flex row centrée verticalement ───────────── */
  main.cart-page .shipping-option,
  body.checkout-page .shipping-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 0.75rem;
    text-align: left;
  }

  /* ─── Icône : sortie d'absolute, devient flex item à gauche ───── */
  main.cart-page .shipping-icon,
  body.checkout-page .shipping-icon {
    position: static;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    /* top/left baseline absolute neutralisés par position:static ;
       transform hover (cart-page.css:830) reste fonctionnel sur tout
       display, donc l'animation rotate+scale au hover continue. */
  }

  /* ─── Bloc texte central : flex 1, alignement gauche compact ──── */
  main.cart-page .shipping-details,
  body.checkout-page .shipping-details {
    flex: 1 1 auto;
    min-width: 0;            /* permet le wrap interne sans débordement */
    padding: 0;              /* override baseline padding 0 2rem/2.5rem */
    align-items: flex-start; /* override baseline align-items: center */
    text-align: left;
    gap: 0.12rem;
  }

  /* ─── Titre + badge : wrap propre si titre + badge dépassent ──── */
  main.cart-page .shipping-option .name,
  body.checkout-page .shipping-option .name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
    font-size: clamp(0.9rem, 3.4vw, 0.98rem);
  }

  /* ─── Description : ligne unique typique, line-height compact ─── */
  main.cart-page .shipping-option .description,
  body.checkout-page .shipping-option .description {
    line-height: 1.3;
    font-size: 0.78rem;
  }

  /* ─── Features : row + wrap = 2 chips compactes inline ────────── */
  main.cart-page .shipping-features,
  body.checkout-page .shipping-features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 2px;
  }
  main.cart-page .shipping-features .feature,
  body.checkout-page .shipping-features .feature {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  /* ─── Prix : aligné à droite, nowrap, vertical center ─────────── */
  main.cart-page .shipping-price,
  body.checkout-page .shipping-price {
    flex: 0 0 auto;          /* ne se compresse pas, pas étendu */
    align-self: center;
    margin: 0;               /* override baseline margin-top:0.3rem */
    font-size: clamp(0.95rem, 3.8vw, 1.08rem);
    /* [polish 2026-05-05 21:30] Anti-wrap prix livraison.
       Empêche "4,90 €" / "6,90 €" / "GRATUIT" de se casser sur 2 lignes
       quand le parent .shipping-option est étroit (≤ 380px iPhone SE,
       Galaxy Fold, ou compactage zoom). Désormais le parent EST en flex
       (cf §1 v2 ci-dessus), donc flex-shrink:0 est actif et garantit
       que le prix garde sa largeur intrinsèque même si details déborde. */
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================================================
   2) CART.HTML — STICKY CHECKOUT + FOOTER PROTECTION
   ----------------------------------------------------------------------------
   ex-§26.1 / §26.2 — Le footer (sibling de main.cart-page) n'était pas
   protégé par le padding-bottom existant L1340 inline. Quand sticky
   visible, on pose le padding sur body (couvre le footer) et on
   neutralise celui sur main.cart-page (éviter doublement). Le bouton
   inline #checkout-btn est masqué pour éviter la redondance avec le
   sticky vert (DOM préservé : cart.js:1123 continue de matcher
   document.getElementById('checkout-btn')). Sans :has() (browsers
   anciens), tout fallback = comportement actuel (pas de régression).
   ============================================================================ */
@media (max-width: 768px) {
  body:has(#tu-cart-sticky-checkout.is-visible) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  body:has(#tu-cart-sticky-checkout.is-visible) main.cart-page {
    padding-bottom: 0 !important;
  }
  body:has(#tu-cart-sticky-checkout.is-visible) main.cart-page #checkout-btn,
  body:has(#tu-cart-sticky-checkout.is-visible) main.cart-page .btn-checkout {
    display: none !important;
  }
}

/* ============================================================================
   3) CART.HTML — PROMO BUTTON SECONDARY STYLE
   ----------------------------------------------------------------------------
   ex-§26.3 — Le bouton "Appliquer" code promo (cart-page.css:678-694) a
   8 !important sur background/box-shadow/etc. → on doit utiliser
   !important pour battre l'existant (pas d'escalation : juste alignement
   nécessaire). Tap target 44 conservé.
   ============================================================================ */
@media (max-width: 768px) {
  main.cart-page #apply-promo-btn.promo-button,
  main.cart-page .promo-input-group #apply-promo-btn {
    background: rgba(212, 168, 46, 0.08) !important;
    color: #d95c1f !important;
    border: 1.5px solid rgba(212, 168, 46, 0.30) !important;
    box-shadow: none !important;
    min-height: 44px !important;
  }
  main.cart-page #apply-promo-btn.promo-button:hover {
    background: rgba(212, 168, 46, 0.14) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  main.cart-page #apply-promo-btn.promo-button:active {
    background: rgba(212, 168, 46, 0.18) !important;
    transform: scale(0.98) !important;
  }
  body.dark-mode main.cart-page #apply-promo-btn.promo-button {
    background: rgba(212, 168, 46, 0.12) !important;
    color: #ffb47e !important;
    border-color: rgba(212, 168, 46, 0.35) !important;
  }
  body.dark-mode main.cart-page #apply-promo-btn.promo-button:hover {
    background: rgba(212, 168, 46, 0.18) !important;
  }
}

/* ============================================================================
   4) CART.HTML — TOP BUTTON WHEN STICKY VISIBLE + BOTTOM SPACING
   ----------------------------------------------------------------------------
   ex-§26.4 / §27.1 — Bouton TOP (créé par js/global.js:1187) est en
   z-index:9998 bottom:20px mobile (style.css:2335) → chevauche le sticky
   (~80-96px). On le remonte de 96px+safe-area quand sticky visible et on
   adoucit son box-shadow pour qu'il ne concurrence pas le CTA. Aucune
   modif JS — global.js continue de toggler .show selon scroll.
   ============================================================================ */
@media (max-width: 768px) {
  body:has(#tu-cart-sticky-checkout.is-visible) .scroll-to-top {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.22) !important;
  }
  body.dark-mode:has(#tu-cart-sticky-checkout.is-visible) .scroll-to-top {
    box-shadow: 0 6px 16px rgba(30, 132, 73, 0.30) !important;
  }
  main.cart-page .additional-reassurance {
    margin-top: 16px;
  }
  main.cart-page .secure-payment-note {
    margin: 8px 0 0 !important;
    padding: 8px 12px;
  }
}

/* ============================================================================
   5) CHECKOUT.PHP — FORM TOUCH POLISH
   ----------------------------------------------------------------------------
   ex-§28.1 — Inputs tactile ≥48px, font-size 16px (anti-zoom iOS au
   focus), espacements verticaux réduits, labels lisibles. Aucun input
   name/id renommé — soumission form intacte.
   ============================================================================ */
@media (max-width: 768px) {
  body.checkout-page #shipping-form .form-group {
    margin-bottom: 12px;
  }
  body.checkout-page #shipping-form .form-row {
    gap: 12px;
  }
  body.checkout-page #shipping-form label {
    margin-bottom: 4px;
    font-size: 0.92rem;
  }
  body.checkout-page #shipping-form input[type="text"],
  body.checkout-page #shipping-form input[type="email"],
  body.checkout-page #shipping-form input[type="tel"] {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px; /* anti-zoom iOS sur focus input */
  }
  body.checkout-page .checkbox-label {
    margin: 8px 0;
    font-size: 0.9rem;
    gap: 8px;
  }
}

/* ============================================================================
   6) CHECKOUT.PHP — SUMMARY / TRUST / PAYMENT BADGES
   ----------------------------------------------------------------------------
   ex-§28.3 — Espacements resserrés sans cacher quoi que ce soit. Sous-
   total / livraison / TVA / total restent visibles (montants posés par
   JS via #summary-*). 3 badges réassurance + 6 logos paiement intacts.
   ============================================================================ */
@media (max-width: 768px) {
  body.checkout-page .order-summary {
    padding: 1.25rem;
  }
  body.checkout-page .summary-row {
    margin-bottom: 6px;
  }
  body.checkout-page .summary-divider {
    margin: 8px 0;
  }
  body.checkout-page .summary-total {
    margin-top: 4px;
  }
  body.checkout-page .trust-badges-checkout {
    gap: 6px;
    margin: 12px 0;
  }
  body.checkout-page .trust-badges-checkout .badge {
    padding: 8px 10px;
    font-size: 0.82rem;
  }
  body.checkout-page .payment-badges {
    margin-top: 12px;
  }
  body.checkout-page .payment-badges h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
  }
  body.checkout-page .payment-badges .payment-logos {
    gap: 6px;
    flex-wrap: wrap;
  }
  body.checkout-page .payment-badges .payment-logo {
    height: 22px;
    width: auto;
  }
}

/* ============================================================================
   7) CHECKOUT.PHP — CTA "CONTINUER VERS LE PAIEMENT"
   ----------------------------------------------------------------------------
   ex-§28.4 — CTA dominant ≥52px, font 1rem, marge top 16px. Texte légal
   sous CTA (.tu-checkout-legal) légèrement plus compact mais lisible.
   ============================================================================ */
@media (max-width: 768px) {
  body.checkout-page #btn-continue-payment.btn-next,
  body.checkout-page #btn-continue-payment {
    min-height: 52px;
    font-size: 1rem;
    margin-top: 16px;
  }
  body.checkout-page .tu-checkout-legal {
    margin-top: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
  }
}

/* ============================================================================
   8) CHECKOUT.PHP — TOP BUTTON SHADOW
   ----------------------------------------------------------------------------
   ex-§28.5 — Pas de repositionnement (aucune sticky bar mobile sur
   checkout). Juste atténuer le glow pour ne pas concurrencer le CTA.
   ============================================================================ */
@media (max-width: 768px) {
  body.checkout-page .scroll-to-top {
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.22);
  }
  body.dark-mode.checkout-page .scroll-to-top {
    box-shadow: 0 6px 16px rgba(30, 132, 73, 0.30);
  }
}

/* ============================================================================
   9) STEPPER 4 ÉTAPES — ULTRA-COMPACT 320×568
   ----------------------------------------------------------------------------
   Le stepper .checkout-progress (injecté JS via tu-checkout-enhance.css §1)
   est déjà compacté à ≤ 640px : step-number 30×30, step-label 0.68rem
   uppercase letter-spacing 0, step-line max 40px. Mais à 320×568 :

     4 cercles  : 4 × 30 = 120px
     3 lignes   : 3 × 40 = 120px (max-width)
     paddings   : 4 × 0.5rem (≈ 32px)
     container  : 0.4rem × 2 (≈ 12.8px)
     ───────────────────────────────────────
     ≈ 285 px requis sans compter l'espace label.

   Or les labels uppercase à 0.68rem font typiquement 60-100 px ("PANIER",
   "LIVRAISON", "PAIEMENT", "CONFIRMATION"). Le label "CONFIRMATION" seul
   dépasse largement la cellule allouée → texte tronqué visuel ou wrap
   forcé peu lisible.

   Solution chirurgicale (additive) :
   - step-number : 26 × 26 (économise 16 px sur le total)
   - step-line   : max-width 14 px (économise ~78 px sur les 3 lignes)
   - step-label  : 0.58rem, letter-spacing 0, line-height 1.05, wrap permis
   - step gap    : padding 0 0.18rem (resserre les colonnes)
   - container   : padding 0.7rem 0.3rem

   Total après correction ≈ 4×26 + 3×14 + 4×0.36rem = 104 + 42 + 23 ≈ 169 px,
   laissant ~150 px de marge pour les labels (chacun ~37 px de cellule).

   Le step-number reste suffisamment large pour rester lisible et garder
   la box-shadow active (+12px de glow visible). État .step.active /
   .step.completed conservés tels quels (la couleur ne dépend pas de la
   taille).

   Aucun changement HTML, aucun JS impacté — la cascade ≤320 vient APRÈS
   le ≤640 de tu-checkout-enhance.css §1 grâce à l'ordre de chargement
   (tu-checkout-cart-mobile-polish.css est en dernier sur cart.html).
   ============================================================================ */
@media (max-width: 360px) {
  body.tu-checkout-enhanced .checkout-progress {
    padding: 0.7rem 0.3rem !important;
    gap: 0 !important;
    max-width: 100% !important;
  }
  body.tu-checkout-enhanced .checkout-progress .step {
    padding: 0 0.2rem !important;
    gap: 0.28rem !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  body.tu-checkout-enhanced .checkout-progress .step-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }
  body.tu-checkout-enhanced .checkout-progress .step-label {
    font-size: 0.6rem !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    /* Permet wrap doux si label long ("CONFIRMATION") sans débordement */
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  body.tu-checkout-enhanced .checkout-progress .step-line {
    max-width: 18px !important;
    margin: 0 0.15rem !important;
    top: -10px !important;
  }
  /* Glow réduit pour éviter halo qui pousse les voisins */
  body.tu-checkout-enhanced .checkout-progress .step.active .step-number {
    box-shadow: 0 0 0 4px rgba(46, 204, 113, .12) !important;
    transform: scale(1.03) !important;
  }
}
@media (max-width: 320px) {
  body.tu-checkout-enhanced .checkout-progress {
    padding: 0.6rem 0.2rem !important;
  }
  body.tu-checkout-enhanced .checkout-progress .step {
    padding: 0 0.12rem !important;
    gap: 0.22rem !important;
  }
  body.tu-checkout-enhanced .checkout-progress .step-number {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.72rem !important;
    border-width: 1.5px !important;
  }
  body.tu-checkout-enhanced .checkout-progress .step-label {
    font-size: 0.55rem !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
  }
  body.tu-checkout-enhanced .checkout-progress .step-line {
    max-width: 14px !important;
    margin: 0 0.08rem !important;
    top: -9px !important;
  }
}

/* ============================================================================
   FIN — Desktop ≥ 769px : aucune règle (toutes les sections sont
   @media-gated max-width:768).
   ============================================================================ */