/* ============================================================
   mobile-global.css — chargé EN DERNIER (après mobile-north / mobile-south)
   Correctif structurel majeur mesuré sur la référence à 390 et 430 :
     REF : chaque <section> est insérée à 20px des bords (x=20, w=viewport-40),
           y compris les blocs à fond coloré (jaune, gris).
     NOUS : sections pleine largeur (x=0, w=viewport) avec padding interne.
   → on déplace la gouttière du padding interne vers la marge de section,
     ce qui ne change PAS la largeur du contenu (reste viewport-40) mais
     aligne les bords des blocs colorés comme sur la référence.
   ============================================================ */
@media (max-width: 900px) {
  /* 1. sections insérées de 20px de chaque côté */
  main > section,
  body > section,
  main > .wrap {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 2. le contenu remplit la section (plus de padding horizontal redondant) */
  main > section > .wrap,
  body > section > .wrap,
  main > section > .scroller-wrap,
  body > section > .scroller-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3. les blocs colorés prennent les coins arrondis de la référence (2px) */
  main > section.yellowband,
  main > section.rowstrip--gray,
  main > section.rowstrip--oct,
  body > section.yellowband,
  body > section.rowstrip--gray,
  body > section.rowstrip--oct {
    border-radius: 2px;
    overflow: hidden;
  }

  /* 4. barre de progression : largeur du contenu */
  .progressline { width: 100% !important; }

  /* 5. le bandeau livraison doit rester aligné (déjà 20px via margin) */
  body > .promo-mobile { margin-left: 20px !important; margin-right: 20px !important; }
}


/* ============================================================
   2. Typographie produit — VALEURS MESURÉES sur la réf. (390/430)
      prix : 28px / 700 / #111   (Bonnes affaires ET Psst)
      nom  : 14px / 400 / #111
   ============================================================ */
@media (max-width: 900px) {
  html body #main > section .scroller--products > .prod-card .prod-price,
  html body #main > section .scroller--products > .prod-card .prod-price * {
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }
  html body #main > section .scroller--products > .prod-card .prod-name {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    margin-top: 6px !important;
  }
}

/* ============================================================
   4. Corrections finales mesurées (390/430)
      - titre du bandeau jaune : 24px / mb 0 (réf.)
      - nom de produit : 700 + majuscules (réf.)
      - compensation des 20px gagnés par le prix à 28px (Psst)
   ============================================================ */
@media (max-width: 900px) {
  html body #main > section.yellowband h2,
  html body #main .yellowband h2 {
    font-size: 24px !important;
    line-height: 29px !important;
    margin-bottom: 0 !important;
  }
  /* on rend au bandeau jaune les 5px perdus par le titre plus petit */
  html body #main > section.yellowband { padding-top: 55px !important; }

  html body #main > section .scroller--products > .prod-card .prod-name {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .2px;
  }

  /* Psst : le prix à 28px ajoute 20px -> on retire 20px de padding bas de carte */
  html body #main > section.rowstrip--psst .scroller--products > .prod-card {
    padding-bottom: calc(48px + (100vw - 390px) * 0.675) !important;
  }
}


/* ---- prix produit : forcer 28px/700 comme la réf. (sélecteur blindé) ---- */
@media (max-width: 900px) {
  html body main#main section .prod-card .prod-price,
  html body main#main section .prod-card .prod-price span,
  html body main#main section .prod-card .prod-price bdi,
  html body main#main section .prod-price {
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }
  /* Psst : compenser la hauteur du prix 28px */
  html body main#main section.rowstrip--psst .scroller--products > .prod-card {
    padding-bottom: calc(30px + (100vw - 390px) * 0.675) !important;
  }
}


/* ---- prix 28px : sélecteur de spécificité supérieure à mobile-north ---- */
@media (max-width: 900px) {
  html body main#main > section.rowstrip--deals .scroller--products > .prod-card .prod-price,
  html body main#main > section.rowstrip--psst .scroller--products > .prod-card .prod-price,
  html body main#main > section.rowstrip--deals .scroller--products > .prod-card .prod-price *,
  html body main#main > section.rowstrip--psst .scroller--products > .prod-card .prod-price * {
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }
}


/* ---- pied de page mobile : hauteur rétablie (1553px) après suppression des réseaux sociaux ---- */
@media (max-width: 900px) {
  /* [désactivé] ancienne règle footer global */
}