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

   Layer ADDITIF non destructif :
     - Scope strict   : main.returns-page (la page n'a pas body class
                        dédiée → on cible via main + descendants).
     - Scope mobile   : @media (max-width: 360 / 320 px) UNIQUEMENT.
                        Les breakpoints existants ≤ 760 et ≤ 480 dans
                        returns-premium.css restent inchangés et
                        continuent de gouverner les écrans 360-480.
     - Aucune modification HTML, aucun rename JS, aucun changement backend.
     - Préserve : toutes les classes existantes (.returns-page,
                  .returns-section, .returns-steps-box, .step-item,
                  .step-number, .returns-info-box, .returns-contact-box,
                  .returns-guarantee-box, .returns-intro). Aucun JS hook
                  référencé sur la timeline retour (purement décoratif).

   ISSUE COUVERTE :
     En 320×568, la procédure de retour (.returns-steps-box) compresse
     les step-items 1..4 :
       - container padding 18 + step-item padding 14 16 → texte serré
       - step-number 40×40 (cercle vert) prend trop d'espace ratio
       - timeline ::before à left:34px peu équilibrée (40px ÷ 2 = 20)
       - h4 14px + p 13px sur 1fr étroit → wraps multiples
   On serre :
       - returns-steps-box padding 14
       - step-item grid 38px 1fr, padding 10×12
       - step-number 34×34, font 15px, box-shadow réduite
       - line ::before left:26 (centré sur le 34×34 + padding-left 12)
       - h4 13.5px / p 12.5px / line-height resserrés
       - returns-info-box padding 14 (avec icone ::before resized)
       - returns-contact-box padding 18 / .btn min-height 48 / font 13.5

   Stratégie cascade :
     - Chargé APRÈS returns-premium.css (en dernier dans returns.html).
     - Aucun !important utilisé sauf sur les valeurs déjà !important
       dans returns-premium.css ≤ 760 et ≤ 480 (gain de spécificité).
   ═════════════════════════════════════════════════════════════════════════ */


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

  /* Container global : padding latéral plus serré pour gagner de la
     largeur utile sans coller le contenu aux bords. */
  .returns-page { padding: 16px 10px 50px !important; }
  .returns-page .container { gap: 12px !important; }

  /* Hero h1 : titre un cran plus serré pour éviter wrap excessif.
     Le rendu typo premium reste (font-weight + couleur héritée). */
  .returns-page > .container > h1 {
    padding: 16px 14px 14px !important;
    font-size: 21px !important;
  }
  .returns-page > .container > h1::before {
    font-size: 9.5px !important;
    letter-spacing: .18em !important;
  }

  .returns-page .returns-intro {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  /* Encadré "14 jours pour changer d'avis" — l'icône ::before en haut à
     droite (46×46 à ≤ 760) déjà bien dimensionnée mais le texte peut
     coller. On serre. */
  .returns-page .returns-guarantee-box {
    padding: 16px 14px !important;
  }
  .returns-page .returns-guarantee-box::before {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    top: 14px !important;
    right: 14px !important;
  }
  .returns-page .returns-guarantee-box h2 {
    font-size: 17.5px !important;
    padding-right: 50px !important;
  }
  .returns-page .returns-guarantee-box p {
    font-size: 13px !important;
    padding-right: 50px !important;
  }

  /* Sections de contenu — padding interne réduit, gap conservé. */
  .returns-page .returns-section,
  .returns-page .returns-steps-box,
  .returns-page .returns-contact-box {
    padding: 14px 14px 12px !important;
  }
  .returns-page .returns-section h2 { font-size: 16px !important; }
  .returns-page .returns-section h3 { font-size: 14.5px !important; }
  .returns-page .returns-section p  { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* Bullet-list returns (Conditions / Articles éligibles / Articles exclus) :
     padding-left réduit pour utiliser plus d'espace texte. */
  .returns-page .returns-section ul li {
    padding: 7px 8px 7px 30px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* TIMELINE — section critique 320×568 */
  .returns-page .returns-steps-box {
    gap: 12px !important;
  }
  .returns-page .returns-steps-box h3 {
    font-size: 11.5px !important;
    letter-spacing: .12em !important;
  }
  .returns-page .step-item {
    grid-template-columns: 38px 1fr !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .returns-page .step-number {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
    /* Atténuation du glow pour ne pas pousser visuellement sur des
       paddings serrés. Garde la teinte premium. */
    box-shadow: 0 6px 14px rgba(46,204,113,.28), 0 0 0 3px rgba(46,204,113,.10) !important;
  }
  /* Ligne verticale de la timeline : repositionnée pour rester
     centrée sur le step-number 34×34 dans une cellule grid 38px
     avec padding-left 12 → centre cellule à 12 + 17 = 29 → ~30 */
  .returns-page .step-item::before {
    left: 29px !important;
    width: 2px !important;
  }
  .returns-page .step-item:first-of-type::before { top: 24px !important; }
  .returns-page .step-item:last-of-type::before  { bottom: 24px !important; }
  .returns-page .step-item h4 {
    font-size: 13.5px !important;
    margin: 0 0 3px !important;
    line-height: 1.3 !important;
  }
  .returns-page .step-item p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  /* Encadré ⚠️ Important : icône ::before resized + padding compact. */
  .returns-page .returns-info-box {
    padding: 12px 12px 12px 44px !important;
  }
  .returns-page .returns-info-box::before {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    left: 12px !important;
    top: 12px !important;
  }
  .returns-page .returns-info-box p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Adresse de retour : paragraphe principal lisible, pas trop serré. */
  .returns-page .returns-section:nth-of-type(4) p:first-of-type,
  .returns-page .returns-section:last-of-type p:first-of-type {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }

  /* Contact box finale : titre/p resserrés, bouton garde tactile 48. */
  .returns-page .returns-contact-box {
    padding: 18px 14px 16px !important;
  }
  .returns-page .returns-contact-box::before {
    font-size: 28px !important;
  }
  .returns-page .returns-contact-box h3 {
    font-size: 17px !important;
    margin: 0 0 6px !important;
  }
  .returns-page .returns-contact-box p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  .returns-page .returns-contact-box .btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 13.5px !important;
    letter-spacing: .03em !important;
    padding: 12px 18px !important;
  }
}


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

  /* Container global encore plus serré */
  .returns-page { padding: 14px 8px 44px !important; }

  .returns-page > .container > h1 {
    padding: 14px 12px 12px !important;
    font-size: 19.5px !important;
  }
  .returns-page > .container > h1::before {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  /* Encadré garantie : icône passe à 36 et padding 12 */
  .returns-page .returns-guarantee-box {
    padding: 14px 12px !important;
  }
  .returns-page .returns-guarantee-box::before {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .returns-page .returns-guarantee-box h2 {
    font-size: 16.5px !important;
    padding-right: 46px !important;
  }
  .returns-page .returns-guarantee-box p {
    font-size: 12.5px !important;
    padding-right: 46px !important;
  }

  /* Sections de contenu */
  .returns-page .returns-section,
  .returns-page .returns-steps-box,
  .returns-page .returns-contact-box {
    padding: 12px 12px 11px !important;
    border-radius: 14px !important;
  }
  .returns-page .returns-section h2 { font-size: 15px !important; }
  .returns-page .returns-section h3 { font-size: 13.5px !important; }
  .returns-page .returns-section p  { font-size: 12.5px !important; }
  .returns-page .returns-section ul li {
    padding: 6px 6px 6px 28px !important;
    font-size: 12.5px !important;
  }

  /* TIMELINE 320 — encore plus serrée */
  .returns-page .returns-steps-box {
    gap: 10px !important;
  }
  .returns-page .step-item {
    grid-template-columns: 34px 1fr !important;
    gap: 9px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }
  .returns-page .step-number {
    width: 30px !important;
    height: 30px !important;
    font-size: 12.5px !important;
    box-shadow: 0 4px 10px rgba(46,204,113,.26), 0 0 0 2px rgba(46,204,113,.10) !important;
  }
  /* Centre cellule 34px + padding 10 → 10 + 15 = 25 ≈ 25 */
  .returns-page .step-item::before {
    left: 25px !important;
  }
  .returns-page .step-item:first-of-type::before { top: 22px !important; }
  .returns-page .step-item:last-of-type::before  { bottom: 22px !important; }
  .returns-page .step-item h4 {
    font-size: 13px !important;
    margin: 0 0 2px !important;
  }
  .returns-page .step-item p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Info box ⚠️ */
  .returns-page .returns-info-box {
    padding: 10px 10px 10px 40px !important;
  }
  .returns-page .returns-info-box::before {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    left: 10px !important;
    top: 10px !important;
  }
  .returns-page .returns-info-box p {
    font-size: 12.5px !important;
  }

  /* Contact final */
  .returns-page .returns-contact-box {
    padding: 16px 12px 14px !important;
  }
  .returns-page .returns-contact-box h3 {
    font-size: 15.5px !important;
  }
  .returns-page .returns-contact-box p {
    font-size: 12.5px !important;
  }
  .returns-page .returns-contact-box .btn {
    min-height: 46px !important;
    font-size: 13px !important;
    padding: 11px 16px !important;
  }
}


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