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

   Layer ADDITIF non destructif :
     - Scope strict   : body[data-page="shipping"] (cohérent avec
                        shipping-premium.css existant).
     - Scope mobile   : @media (max-width: 360 / 320 px) UNIQUEMENT.
                        Les breakpoints existants ≤ 760 / ≤ 680 / ≤ 480
                        dans shipping-premium.css restent intacts.
     - Aucune modification HTML, aucun rename JS, aucun changement backend.
     - Préserve : .shipping-cards-grid, .shipping-card (3 options), h3
                  emoji+texte, .shipping-price-chip, .shipping-box-section,
                  table tarifs (déjà transformée en cards à ≤ 680),
                  .shipping-contact-cta, .shipping-highlight, sections FAQ.

   ISSUE COUVERTE :
     En 320×568, les .shipping-card 3 options compressent :
       - card padding 18 (≤480) → ~256 px utiles sur 296 viewport
       - h3 16px "🏝️ Standard Colissimo" wrappe sur 2 lignes (15+ char)
       - p flex avec strong min-width:60 + chip prix → 60+6+chip > 256
         si chip "GRATUIT" ou "4,90 €" est large
       - ul li padding-left 32 + font 12.5 sur ~190 px utiles → tight
       - shipping-highlight padding 22 + h2 22 + p 13.5 → coller
       - shipping-contact-cta padding 28 + h3 22 + btn 50 → trop large
       - table tarifs : déjà card-style à ≤ 680, mais td min-width 60
         pour le label peut écraser la cellule droite à 320

   Correction chirurgicale :
       - card padding 14
       - h3 15 (au lieu de 16) + letter-spacing 0
       - p strong min-width 48
       - ul li padding-left 28, font 12
       - shipping-highlight padding 16/14, h2 19, p 12.5
       - shipping-contact-cta padding 18, h3 18, p 13.5, btn 48 / 13.5
       - table card-mode td min-width 50, font 12.5

   Stratégie cascade :
     - Chargé APRÈS shipping-premium.css (en dernier dans shipping.html).
     - !important nécessaire car shipping-premium.css utilise déjà
       !important sur padding/font-size dans ses ≤ 760 / ≤ 480.
   ═════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   §1) BREAKPOINT 360 — petit téléphone portrait
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

  /* Container global */
  body[data-page="shipping"] .legal-page {
    padding: 16px 10px 44px !important;
  }
  body[data-page="shipping"] .legal-page > .container > h1 {
    padding: 16px 14px 14px !important;
    font-size: 21px !important;
  }
  body[data-page="shipping"] .legal-intro {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  /* Encadré "Livraison GRATUITE" — icône + h2 + p resserrés */
  body[data-page="shipping"] .shipping-highlight {
    padding: 18px 14px 16px !important;
  }
  body[data-page="shipping"] .shipping-highlight > i {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }
  body[data-page="shipping"] .shipping-highlight h2 {
    font-size: 20px !important;
  }
  body[data-page="shipping"] .shipping-highlight p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Sections legal-section + box + contact */
  body[data-page="shipping"] .legal-section,
  body[data-page="shipping"] .shipping-box-section,
  body[data-page="shipping"] .shipping-contact-cta {
    padding: 14px 14px 12px !important;
  }
  body[data-page="shipping"] .legal-section h2 { font-size: 16px !important; }
  body[data-page="shipping"] .legal-section h3 { font-size: 14.5px !important; }
  body[data-page="shipping"] .legal-section p,
  body[data-page="shipping"] .legal-section li {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  body[data-page="shipping"] .legal-section ul li {
    padding: 6px 8px 6px 32px !important;
  }

  /* OL "De la commande à la livraison" — bullets numérotés ::before
     (32×32 à ≤ 760). On compresse à 28×28 et padding-left 50. */
  body[data-page="shipping"] .shipping-box-section ol li {
    padding-left: 50px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  body[data-page="shipping"] .shipping-box-section ol li::before {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    left: 10px !important;
  }

  /* CARDS OPTIONS LIVRAISON — section critique 320×568 */
  body[data-page="shipping"] .shipping-cards-grid {
    gap: 12px !important;
    margin: 14px 0 4px !important;
  }
  body[data-page="shipping"] .shipping-card {
    padding: 14px 14px 12px !important;
    border-radius: 14px !important;
    gap: 5px !important;
  }
  body[data-page="shipping"] .shipping-card h3 {
    font-size: 15px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    margin: 0 0 5px !important;
  }
  body[data-page="shipping"] .shipping-card p {
    font-size: 13px !important;
    gap: 5px !important;
    flex-wrap: wrap;
  }
  /* Le strong (label "PRIX :", "DÉLAI :", etc.) — réduit min-width
     pour libérer l'espace au prix/contenu */
  body[data-page="shipping"] .shipping-card p strong {
    min-width: 48px !important;
    font-size: 10.5px !important;
    letter-spacing: .1em !important;
  }
  /* Chip prix : font + padding réduits, mais conserve fond + bordure */
  body[data-page="shipping"] .shipping-price-chip,
  body[data-page="shipping"] .shipping-card p:first-of-type > span,
  body[data-page="shipping"] .shipping-card p:first-of-type > strong:last-child {
    padding: 3px 10px !important;
    font-size: 12px !important;
  }
  body[data-page="shipping"] .shipping-card em {
    font-size: 11px !important;
  }
  /* Liste features de la card : padding gauche réduit, font 12 */
  body[data-page="shipping"] .shipping-card ul {
    margin: 6px 0 0 !important;
    gap: 3px !important;
  }
  body[data-page="shipping"] .shipping-card ul li {
    padding: 5px 8px 5px 28px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  body[data-page="shipping"] .shipping-card ul li::before {
    width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
    left: 6px !important;
  }

  /* TABLE TARIFS — déjà card-mode à ≤ 680. À 320, on resserre. */
  body[data-page="shipping"] .legal-section table tbody tr {
    padding: 5px 10px !important;
    border-radius: 12px !important;
  }
  body[data-page="shipping"] .legal-section table tbody td {
    padding: 7px 4px !important;
    font-size: 12.5px !important;
    gap: 8px !important;
  }
  body[data-page="shipping"] .legal-section table tbody td:first-child {
    font-size: 14px !important;
    padding: 9px 4px !important;
  }
  body[data-page="shipping"] .legal-section table tbody td:before {
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }
  body[data-page="shipping"] .shipping-table-note {
    font-size: 11px !important;
  }
  body[data-page="shipping"] .shipping-footnote {
    font-size: 11.5px !important;
  }

  /* FAQ section 6 — h3 boxes resserrées */
  body[data-page="shipping"] .legal-section:nth-of-type(6) h3 {
    font-size: 13.5px !important;
    padding: 11px 12px !important;
    line-height: 1.4 !important;
  }
  body[data-page="shipping"] .legal-section:nth-of-type(6) h3 + p {
    font-size: 13px !important;
    margin: 5px 4px 8px !important;
    padding: 0 4px !important;
  }

  /* Contact CTA finale */
  body[data-page="shipping"] .shipping-contact-cta {
    padding: 18px 14px 16px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta::before {
    font-size: 10px !important;
    letter-spacing: .18em !important;
    margin-bottom: 8px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta h3 {
    font-size: 18px !important;
    margin: 0 0 5px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 auto 14px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta .btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 13px !important;
    padding: 12px 18px !important;
    letter-spacing: .03em !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §2) BREAKPOINT 320 — iPhone SE 1, Galaxy S8 portrait, ultra-compact
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 320px) {

  body[data-page="shipping"] .legal-page {
    padding: 14px 8px 40px !important;
  }
  body[data-page="shipping"] .legal-page > .container > h1 {
    padding: 14px 12px 12px !important;
    font-size: 19.5px !important;
  }
  body[data-page="shipping"] .legal-intro {
    font-size: 13px !important;
  }

  /* Encadré gratuite */
  body[data-page="shipping"] .shipping-highlight {
    padding: 16px 12px 14px !important;
  }
  body[data-page="shipping"] .shipping-highlight > i {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }
  body[data-page="shipping"] .shipping-highlight h2 {
    font-size: 18px !important;
  }
  body[data-page="shipping"] .shipping-highlight p {
    font-size: 12.5px !important;
  }

  /* Sections */
  body[data-page="shipping"] .legal-section,
  body[data-page="shipping"] .shipping-box-section,
  body[data-page="shipping"] .shipping-contact-cta {
    padding: 12px 12px 11px !important;
    border-radius: 14px !important;
  }
  body[data-page="shipping"] .legal-section h2 { font-size: 15px !important; }
  body[data-page="shipping"] .legal-section h3 { font-size: 13.5px !important; }
  body[data-page="shipping"] .legal-section p,
  body[data-page="shipping"] .legal-section li {
    font-size: 12.5px !important;
  }
  body[data-page="shipping"] .legal-section ul li {
    padding: 6px 6px 6px 28px !important;
  }

  body[data-page="shipping"] .shipping-box-section ol li {
    padding-left: 44px !important;
    font-size: 12.5px !important;
  }
  body[data-page="shipping"] .shipping-box-section ol li::before {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    left: 8px !important;
  }

  /* CARDS OPTIONS LIVRAISON — 320 ultra-compact */
  body[data-page="shipping"] .shipping-cards-grid {
    gap: 10px !important;
  }
  body[data-page="shipping"] .shipping-card {
    padding: 12px 12px 11px !important;
    border-radius: 12px !important;
    /* Border-left 4px → 3px pour gagner 1px utilisable */
    border-left-width: 3px !important;
    gap: 4px !important;
  }
  body[data-page="shipping"] .shipping-card h3 {
    font-size: 14px !important;
    margin: 0 0 4px !important;
  }
  body[data-page="shipping"] .shipping-card p {
    font-size: 12.5px !important;
    gap: 4px !important;
  }
  body[data-page="shipping"] .shipping-card p strong {
    min-width: 42px !important;
    font-size: 10px !important;
  }
  body[data-page="shipping"] .shipping-price-chip,
  body[data-page="shipping"] .shipping-card p:first-of-type > span,
  body[data-page="shipping"] .shipping-card p:first-of-type > strong:last-child {
    padding: 3px 9px !important;
    font-size: 11.5px !important;
  }
  body[data-page="shipping"] .shipping-card em {
    font-size: 10.5px !important;
  }
  body[data-page="shipping"] .shipping-card ul li {
    padding: 4px 6px 4px 24px !important;
    font-size: 11.5px !important;
  }
  body[data-page="shipping"] .shipping-card ul li::before {
    width: 12px !important;
    height: 12px !important;
    font-size: 7px !important;
    left: 5px !important;
  }

  /* TABLE TARIFS card-mode 320 */
  body[data-page="shipping"] .legal-section table tbody tr {
    padding: 4px 8px !important;
  }
  body[data-page="shipping"] .legal-section table tbody td {
    padding: 6px 3px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
  body[data-page="shipping"] .legal-section table tbody td:first-child {
    font-size: 13px !important;
  }
  body[data-page="shipping"] .legal-section table tbody td:before {
    font-size: 9.5px !important;
  }

  /* FAQ */
  body[data-page="shipping"] .legal-section:nth-of-type(6) h3 {
    font-size: 13px !important;
    padding: 10px 11px !important;
  }
  body[data-page="shipping"] .legal-section:nth-of-type(6) h3 + p {
    font-size: 12.5px !important;
  }

  /* Contact CTA */
  body[data-page="shipping"] .shipping-contact-cta {
    padding: 16px 12px 14px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta h3 {
    font-size: 16.5px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta p {
    font-size: 12.5px !important;
  }
  body[data-page="shipping"] .shipping-contact-cta .btn {
    min-height: 46px !important;
    font-size: 12.5px !important;
    padding: 11px 16px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   FIN tu-shipping-mobile-polish.css
   ═════════════════════════════════════════════════════════════════════════ */