/* ============================================================
   mobile-north.css — SECTIONS HAUTES (mobile <= 900px)
   Périmètre : promo bar, header, chips, bandeau livraison, hero,
               yellowband, Mieux vivre, Ça se passe, Petits changements,
               Bonnes affaires, En octobre.
   Règle : ne toucher à AUCUN autre fichier CSS.

   Toutes les valeurs sont mesurées sur ikea.com/fr/fr en 390x844 et
   430x932 (iPhone, deviceScaleFactor 2). Les hauteurs « fluides » sont
   exprimées en aspect-ratio / vw pour rester justes aux deux largeurs.

   Les sélecteurs des sections sont préfixés par #main (id) : cela les
   rend prioritaires sur style.css ET sur mobile-south.css, dont la règle
   générique `.rowstrip:has(.scroller--wide) .scroller > .big-card`
   attrape aussi les carrousels de « Ça se passe » et « En octobre ».
   ============================================================ */

@media (max-width: 900px) {

  /* ==========================================================
     1. PROMO BAR — réf. : 48px, items 12/18, icônes 24
     ========================================================== */
  body > header.site-header .promo-bar { height: 48px !important; max-height: 48px !important; padding: 0 !important; }
  body > header.site-header .promo-bar > .wrap {
    height: 48px !important; padding: 0 20px !important;
    gap: 16px !important; align-items: center !important; flex-wrap: nowrap !important;
  }
  body > header.site-header .promo-bar .promo-item { height: 48px !important; gap: 8px !important; }
  body > header.site-header .promo-bar .promo-item span {
    font-size: 12px !important; line-height: 18px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    display: block !important; max-width: none !important;
  }
  body > header.site-header .promo-bar .promo-item svg { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
  body > header.site-header .promo-bar .promo-right { gap: 12px !important; }
  body > header.site-header .promo-bar .promo-zip span,
  body > header.site-header .promo-bar .promo-right a span { max-width: 30vw !important; }
  body > header.site-header .promo-bar .promo-fr { max-width: none !important; overflow: visible !important; text-overflow: clip !important; }

  /* ==========================================================
     2. HEADER — réf. : barre 48 + navbar 132.5 = 180.5px
        ligne 1 : logo 80x32.5 (pad 20 haut/bas) + 4 icônes 40x40 à droite
        ligne 2 : recherche pleine largeur 350x48
     ========================================================== */
  body > header.site-header .header-main {
    display: flex !important; flex-wrap: wrap !important;
    align-items: center !important; gap: 0 !important;
    padding: 0 20px 12px !important; height: auto !important;
    overflow: visible !important;
  }
  body > header.site-header .header-main .brand {
    order: 1 !important;
    height: 32.5px !important; min-width: 0 !important; width: auto !important;
    margin: 20px 0 !important; padding: 0 10px !important;
    font-size: 20px !important; line-height: 32.5px !important;
    display: inline-flex !important; align-items: center !important;
    white-space: nowrap !important; overflow: visible !important;
  }
  body > header.site-header .header-icons {
    order: 2 !important; margin-left: auto !important;
    gap: 0 !important; width: auto !important; flex: 0 0 auto !important;
  }
  body > header.site-header .header-icons .hdr-link {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    padding: 0 !important; gap: 0 !important; justify-content: center !important;
  }
  body > header.site-header .header-icons .hdr-link svg { width: 24px !important; height: 24px !important; }
  body > header.site-header .header-icons .hdr-account span { display: none !important; }
  body > header.site-header .nav-toggle {
    order: 3 !important; margin: 0 !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important;
  }
  body > header.site-header .search-form {
    order: 4 !important; flex: 0 0 100% !important; width: 100% !important;
    height: 48px !important; margin: 0 !important; padding: 0 16px !important;
  }
  body > header.site-header .search-form input[type="search"] { font-size: 16px !important; }
  body > header.site-header .search-form .search-submit { width: 24px !important; height: 24px !important; }

  /* ==========================================================
     3. CHIPS — réf. : rangée de 48px, pastilles h48 r64 bg #f5f5f5,
        icône 32x32, label 14/21 700, gap 8 ; flèche = cercle blanc 40
        à 20px du bord droit
     ========================================================== */
  body > .chips { position: relative !important; padding: 0 !important; height: 48px !important; overflow: hidden !important; }
  body > .chips > .wrap.chips-inner {
    display: flex !important; align-items: center !important;
    height: 48px !important; padding: 0 20px !important; gap: 8px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  body > .chips > .wrap.chips-inner::-webkit-scrollbar { display: none !important; }
  body > .chips .chip {
    flex: 0 0 auto !important;
    height: 48px !important; padding: 0 16px 0 8px !important; gap: 8px !important;
    font-size: 14px !important; line-height: 21px !important; font-weight: 700 !important;
    background: #f5f5f5 !important; border: 0 !important; border-radius: 64px !important;
    color: #111 !important; white-space: nowrap !important;
  }
  body > .chips .chip .ico {
    width: 32px !important; height: 32px !important; flex: 0 0 32px !important;
    border-radius: 50% !important; background-color: #dfdfdf !important;
    background-size: cover !important; background-position: center !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important;
  }
  body > .chips .chip .ico svg { width: 20px !important; height: 20px !important; }
  body > .chips .chips-arrow {
    right: 20px !important; width: 40px !important; padding: 0 !important;
    background: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  body > .chips .chips-next {
    position: static !important; transform: none !important;
    width: 40px !important; height: 40px !important; margin: 0 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2) !important;
  }

  /* ==========================================================
     4. BANDEAU LIVRAISON — réf. : 350x68, pad 12/8, fond #f5f5f5,
        icône camion dans un cercle blanc 40, marges 12px haut/bas
     ========================================================== */
  body > .promo-mobile { display: block !important; padding: 0 !important; margin: 12px 20px 16px !important; }
  body > .promo-mobile .promo-mobile__inner {
    display: flex !important; align-items: center !important; gap: 8px !important;
    height: 68px !important; padding: 12px 8px !important;
    background: #f5f5f5 !important; border-radius: 0 !important;
    font-size: 14px !important; line-height: 21px !important; color: #111 !important;
  }
  body > .promo-mobile .promo-mobile__inner svg {
    flex: 0 0 40px !important; width: 40px !important; height: 40px !important;
    padding: 8px !important; margin: 0 4px !important; box-sizing: border-box !important;
    background: #fff !important; border-radius: 50% !important;
  }
  body > .promo-mobile .promo-mobile__inner span { font-size: 14px !important; line-height: 21px !important; }

  /* ==========================================================
     5. HERO — réf. : tuile vidéo 350x350, 2e tuile 350x350,
        2 tuiles 6:7 (169x197.2) → bento 921.2 + 59.8 de bas de section
        → 981 (390) / 1084 (430)
     ========================================================== */
  #main > section.wrap:first-of-type {
    margin: 0 !important;
    padding: 0 20px 59.8px !important;
    max-width: 100% !important; width: 100% !important;
  }
  #main .mosaic4 { display: block !important; margin: 0 !important; padding: 0 !important; position: relative !important; }
  #main .mosaic4 .mosaic-slide { display: block !important; }
  #main .mosaic4 .mosaic-right { display: block !important; }
  #main .mosaic4 .mosaic-right-bottom {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important;
  }
  #main .mosaic4 .tile-a {
    display: block !important;
    height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important;
    margin: 0 0 12px !important;
  }
  #main .mosaic4 .tile-b {
    height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important;
    margin: 0 0 12px !important;
  }
  #main .mosaic4 .tile-c, #main .mosaic4 .tile-d {
    height: auto !important; min-height: 0 !important;
    aspect-ratio: 6 / 7 !important; width: 100% !important;
  }
  #main .mosaic4 .tile-a .tile-video { height: 100% !important; width: 100% !important; object-fit: cover !important; }
  #main .mosaic4 .tile-b .tile-product { inset: 0 !important; background-size: cover !important; }
  #main .mosaic4 .tile-b .tile-product .tile-video { height: 100% !important; width: 100% !important; object-fit: cover !important; }
  /* légendes : 14/17.5 700, 20px des bords, 24px du bas */
  #main .mosaic4 .tile > .tile-caption {
    left: 20px !important; right: 20px !important; bottom: 24px !important;
    font-size: 14px !important; line-height: 17.5px !important; font-weight: 700 !important;
  }
  /* tuile texte orange (tuile C) : pad 16, titre 16/24 */
  #main .mosaic4 .tile-c {
    display: flex !important; flex-direction: column !important;
    justify-content: center !important; align-items: flex-start !important;
    padding: 16px !important;
  }
  #main .mosaic4 .tile-c > .tile-caption {
    position: static !important; padding: 0 !important; margin: 0 !important;
    max-width: 100% !important; left: auto !important; right: auto !important; bottom: auto !important;
    font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important;
  }
  #main .mosaic4 .tile-c .arrow { position: absolute !important; left: 16px !important; bottom: 16px !important; right: auto !important; margin: 0 !important; }
  /* la tuile A de la réf. n'a pas de flèche (seulement les contrôles vidéo) */
  #main .mosaic4 .tile-a .arrow, #main .mosaic4 .tile-a > .arrow { display: none !important; }
  /* badges + contrôles vidéo : 40x40 à 20px des bords */
  #main .mosaic4 .tile .tag {
    left: 20px !important; top: 20px !important; right: auto !important;
    padding: 4px 6px !important; font-size: 12px !important; line-height: 15px !important;
    border-radius: 4px !important;
  }
  #main .mosaic4 .tile .tile-controls { top: 20px !important; right: 20px !important; gap: 12px !important; }
  #main .mosaic4 .tile .tile-ctrl { width: 40px !important; height: 40px !important; }

  /* ==========================================================
     6. YELLOWBAND — réf. : texte 28/33.6 à 52px des bords, 4 lignes à 390
        / 3 lignes à 430 ; flèche cercle 40 ; total 295.4 / 261.8
     ========================================================== */
  /* réf. : le bloc jaune est un bloc de 350px (x=20) avec padding 32 — pas un bandeau full-bleed */
  .yellowband { padding: 0 !important; margin: 42px 20px !important; background: #ffdb00 !important; width: auto !important; max-width: none !important; }
  .yellowband > .wrap { padding: 32px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .yellowband h2 {
    font-size: 28px !important; line-height: 33.6px !important; font-weight: 700 !important;
    margin: 0 0 8px !important; letter-spacing: -0.4px !important;
  }
  .yellowband .arrow-circle { width: 40px !important; height: 40px !important; margin: 49px 0 0 !important; }

  /* ==========================================================
     7. MIEUX VIVRE — réf. : section 545 / 519 ; cartes 233px fixes,
        image 6:7 (233x271.8), label 14/18.75, gap 20, indicateur 30px
     ========================================================== */
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) {
    padding: 32px 0 !important;
    margin: 0 0 42px !important;
  }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) > .wrap { padding: 0 20px !important; }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) .rowstrip-title {
    font-size: 18px !important; line-height: 26px !important; margin: 0 0 8px !important;
  }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) .scroller {
    display: flex !important; overflow-x: auto !important; overflow-y: hidden !important;
    margin: 40px 0 0 !important;
    padding: 8px 0 38px !important;
    gap: 20px !important;
    scroll-snap-type: x mandatory !important;
    background-image: linear-gradient(90deg, #111 0 23.4%, #dfdfdf 23.4% 100%) !important;
    background-size: 100% 2px !important;
    background-position: 0 calc(100% - 14px) !important;
    background-repeat: no-repeat !important;
  }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) .scroller::-webkit-scrollbar { height: 0 !important; display: none !important; }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) .scroller > .mini-card {
    flex: 0 0 233px !important; width: 233px !important; min-width: 233px !important;
    height: 342.8px !important; padding: 0 !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important;
    scroll-snap-align: start !important;
    background: none !important;
  }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) .scroller > .mini-card .mini-img {
    width: 100% !important; height: auto !important;
    aspect-ratio: 233 / 271.83 !important;
    flex: 0 0 auto !important;
  }
  #main > section.rowstrip:not([class*="--"]):not(:has(.rowstrip-head)):not(:has(.scroller--wide)) .scroller > .mini-card .mini-label {
    margin: 0 !important; padding: 8px 0 !important;
    font-size: 14px !important; line-height: 18.75px !important; font-weight: 700 !important;
    flex: 1 1 auto !important; overflow: hidden !important;
  }

  /* ==========================================================
     8. ÇA SE PASSE — réf. : section 810 / 812 ; cartes 80vw,
        image carrée, panneau pad 32, carte 698px, indicateur 30px
     ========================================================== */
  #main > section.rowstrip--events {
    padding: 0 !important; margin: 0 0 42px !important;
  }
  #main > section.rowstrip--events > .wrap { padding: 0 20px !important; }
  #main > section.rowstrip--events .rowstrip-title {
    font-size: 18px !important; line-height: 26px !important; margin: 0 0 8px !important;
  }
  #main > section.rowstrip--events .scroller-wrap { margin: 40px 0 0 !important; padding: 0 !important; }
  #main > section.rowstrip--events .scroller {
    display: flex !important; overflow-x: auto !important; overflow-y: hidden !important;
    padding: 8px 0 !important; gap: 20px !important;
    background: none !important;
    scroll-snap-type: x mandatory !important;
  }
  #main > section.rowstrip--events .scroller::-webkit-scrollbar { height: 0 !important; display: none !important; }
  #main > section.rowstrip--events .scroller > .big-card {
    flex: 0 0 80vw !important; width: 80vw !important; min-width: 0 !important; max-width: 80vw !important;
    height: calc(698px + (100vw - 390px) * 0.05) !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; margin: 0 !important;
    scroll-snap-align: start !important;
  }
  #main > section.rowstrip--events .scroller > .big-card .big-img {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    aspect-ratio: 1 / 1 !important; flex: 0 0 auto !important;
  }
  #main > section.rowstrip--events .scroller > .big-card .big-panel {
    flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
    padding: 32px !important; width: 100% !important; max-width: 100% !important;
    overflow: hidden !important;
  }
  #main > section.rowstrip--events .scroller > .big-card .big-panel strong {
    font-size: 24px !important; line-height: 30px !important; font-weight: 700 !important;
    text-decoration: none !important; margin: 0 0 8px !important;
  }
  #main > section.rowstrip--events .scroller > .big-card .big-panel em {
    font-size: 14px !important; line-height: 21px !important; margin: 0 !important;
  }
  #main > section.rowstrip--events .scroller > .big-card .big-panel .big-arrow {
    margin-top: auto !important; width: 40px !important; height: 40px !important;
    flex: 0 0 40px !important;
  }
  /* indicateur de défilement : piste 2px + segment 62px dans une zone de 30px */
  #main > section.rowstrip--events .progressline {
    display: block !important; position: relative !important;
    height: 30px !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; background: none !important;
  }
  #main > section.rowstrip--events .progressline::before {
    content: "" !important; position: absolute !important;
    left: 0 !important; right: 0 !important; top: 14px !important;
    width: auto !important; height: 2px !important;
    background: #dfdfdf !important; border-radius: 4px !important;
  }
  #main > section.rowstrip--events .progressline::after {
    content: "" !important; position: absolute !important;
    left: 0 !important; top: 14px !important;
    width: 62px !important; height: 2px !important;
    background: #111 !important; border-radius: 4px !important;
  }

  /* ==========================================================
     9. PETITS CHANGEMENTS — réf. : section 485 ; cartes 280x373.3
        (pad 32, vignettes 100x100 gap 32, titre 18/22.5, count 12/15)
     ========================================================== */
  #main > section.rowstrip--quads {
    padding: 0 !important; margin: 0 0 42px !important;
  }
  #main > section.rowstrip--quads > .wrap { padding: 0 20px !important; width: 100% !important; max-width: 100% !important; }
  #main > section.rowstrip--quads .rowstrip-title {
    display: block !important; height: auto !important;
    font-size: 18px !important; line-height: 26px !important; margin: 0 0 8px !important;
  }
  #main > section.rowstrip--quads .quad-grid {
    display: flex !important; flex-direction: row !important;
    margin: 40px 0 0 !important;
    padding: 8px 0 38px !important;
    gap: 20px !important; overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    background-image: linear-gradient(90deg, #111 0 40%, #dfdfdf 40% 100%) !important;
    background-size: 100% 2px !important;
    background-position: 0 calc(100% - 14px) !important;
    background-repeat: no-repeat !important;
  }
  #main > section.rowstrip--quads .quad-grid::-webkit-scrollbar { height: 0 !important; display: none !important; }
  #main > section.rowstrip--quads .quad-grid > .quad-card {
    flex: 0 0 280px !important; width: 280px !important; min-width: 280px !important;
    height: 373.3px !important; padding: 32px !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid #dfdfdf !important; background: #fff !important;
    scroll-snap-align: start !important;
  }
  #main > section.rowstrip--quads .quad-card .quad-imgs {
    display: grid !important; grid-template-columns: repeat(2, 100px) !important;
    gap: 32px !important; justify-content: center !important;
    height: 232px !important; margin: 0 !important;
  }
  #main > section.rowstrip--quads .quad-card .quad-imgs span {
    width: 100px !important; height: 100px !important; aspect-ratio: auto !important;
  }
  #main > section.rowstrip--quads .quad-card .quad-info { margin: 7px 0 0 !important; }
  #main > section.rowstrip--quads .quad-card .quad-title {
    display: block !important;
    font-size: 18px !important; line-height: 22.5px !important; font-weight: 700 !important;
    margin: 0 0 8px !important;
  }
  #main > section.rowstrip--quads .quad-card .quad-count {
    display: block !important; margin: 0 !important;
    font-size: 12px !important; line-height: 15px !important;
  }

  /* ==========================================================
     10. BONNES AFFAIRES — réf. : section 823 / 841 ;
         filtres h40 (12/15, pad 0 24, r64) dans une zone de 56px ;
         carrousel produits 628.3 / 646.1 ; ligne « Profiter de toutes
         les offres » 73px en bas
     ========================================================== */
  #main > section.rowstrip--deals {
    padding: 0 !important; margin: 0 0 42px !important; background: #fff !important;
  }
  #main > section.rowstrip--deals > .wrap { padding: 0 20px !important; }
  #main > section.rowstrip--deals .rowstrip-title {
    font-size: 18px !important; line-height: 26px !important; margin: 0 0 8px !important;
  }
  #main > section.rowstrip--deals .chiprow {
    display: flex !important; flex-wrap: nowrap !important;
    margin: 40px 0 0 !important; padding: 8px 0 !important; height: 56px !important;
    gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  #main > section.rowstrip--deals .chiprow::-webkit-scrollbar { display: none !important; }
  #main > section.rowstrip--deals .chiprow .chip {
    flex: 0 0 auto !important;
    height: 40px !important; padding: 0 24px !important;
    display: inline-flex !important; align-items: center !important;
    font-size: 12px !important; line-height: 15px !important; font-weight: 700 !important;
    border-radius: 64px !important; border: 1px solid #111 !important;
    background: #fff !important; color: #111 !important; white-space: nowrap !important;
  }
  #main > section.rowstrip--deals .chiprow .chip.chip--active {
    background: #111 !important; color: #fff !important; border-color: #111 !important;
  }
  #main > section.rowstrip--deals .scroller--products {
    display: flex !important; overflow-x: auto !important; overflow-y: hidden !important;
    padding: 8px 0 38px !important; gap: 20px !important;
    scroll-snap-type: x mandatory !important;
    background-image: linear-gradient(90deg, #111 0 35.3%, #dfdfdf 35.3% 100%) !important;
    background-size: 100% 2px !important;
    background-position: 0 calc(100% - 14px) !important;
    background-repeat: no-repeat !important;
  }
  #main > section.rowstrip--deals .scroller--products::-webkit-scrollbar { height: 0 !important; display: none !important; }
  #main > section.rowstrip--deals .scroller--products > .prod-card {
    flex: 0 0 69.95% !important; width: 69.95% !important; min-width: 0 !important; max-width: 69.95% !important;
    height: calc(582.3px + (100vw - 390px) * 0.445) !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; padding: 0 !important; margin: 0 !important;
    scroll-snap-align: start !important;
  }
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-media {
    position: relative !important;
    width: 100% !important;
    /* image carrée : largeur de carte = 69.95% de (100vw - 40px) */
    height: calc((100vw - 40px) * 0.6995) !important;
    min-height: 0 !important; flex: 0 0 auto !important;
    aspect-ratio: auto !important; overflow: hidden !important;
  }
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-img,
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-img-hover {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; background-size: contain !important;
  }
  /* badges en surimpression de la photo, comme la réf. */
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-flag {
    position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; z-index: 3 !important;
  }
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-fav {
    position: absolute !important; right: 8px !important; top: 8px !important; z-index: 3 !important;
  }
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-name {
    font-size: 16px !important; line-height: 22px !important; margin: 14px 0 0 !important;
  }
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-sub {
    font-size: 13px !important; line-height: 18px !important; margin: 4px 0 0 !important;
  }
  #main > section.rowstrip--deals .scroller--products > .prod-card .prod-price {
    font-size: 22px !important; line-height: 28px !important; margin: 8px 0 0 !important;
  }

  /* ==========================================================
     11. EN OCTOBRE — réf. : section 519 ; cartes 233px fixes,
         image 6:7 (233x271.8) + label 14/20 ; indicateur 30px
     ========================================================== */
  #main > section.rowstrip--oct {
    padding: 32px 0 !important; margin: 0 0 42px !important; background: #f5f5f5 !important;
  }
  #main > section.rowstrip--oct > .wrap { padding: 0 20px !important; }
  #main > section.rowstrip--oct .rowstrip-title {
    font-size: 18px !important; line-height: 26px !important; margin: 0 0 8px !important;
  }
  #main > section.rowstrip--oct .scroller {
    display: flex !important; overflow-x: auto !important; overflow-y: hidden !important;
    margin: 40px 0 0 !important;
    padding: 8px 0 38px !important; gap: 20px !important;
    scroll-snap-type: x mandatory !important;
    background-image: linear-gradient(90deg, #111 0 35.3%, #dfdfdf 35.3% 100%) !important;
    background-size: 100% 2px !important;
    background-position: 0 calc(100% - 14px) !important;
    background-repeat: no-repeat !important;
  }
  #main > section.rowstrip--oct .scroller::-webkit-scrollbar { height: 0 !important; display: none !important; }
  #main > section.rowstrip--oct .scroller > * {
    flex: 0 0 233px !important; width: 233px !important; min-width: 233px !important; max-width: 233px !important;
    height: 342.8px !important; margin: 0 !important;
    scroll-snap-align: start !important;
  }
  #main > section.rowstrip--oct .scroller > .oct-card { display: flex !important; flex-direction: column !important; }
  #main > section.rowstrip--oct .oct-card .oct-img {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    aspect-ratio: 6 / 7 !important; flex: 0 0 auto !important; position: relative !important;
  }
  #main > section.rowstrip--oct .oct-card .oct-img img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  }
  #main > section.rowstrip--oct .oct-card .oct-img .tag {
    position: absolute !important; left: 12px !important; top: 12px !important;
    padding: 4px 6px !important; font-size: 12px !important; line-height: 15px !important;
  }
  #main > section.rowstrip--oct .oct-card .oct-label {
    margin: 8px 0 0 !important; padding: 0 !important;
    font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important;
    overflow: hidden !important;
  }
  #main > section.rowstrip--oct .scroller > .big-card--text {
    display: flex !important; height: 271.8px !important; align-self: flex-start !important;
  }
  #main > section.rowstrip--oct .big-card--text .big-panel {
    display: flex !important; flex-direction: column !important;
    height: 271.8px !important; padding: 32px !important;
    width: 100% !important; max-width: 100% !important;
  }
  #main > section.rowstrip--oct .big-card--text .big-panel strong {
    font-size: 24px !important; line-height: 30px !important; font-weight: 700 !important;
    text-decoration: none !important; margin: 0 !important;
  }
  #main > section.rowstrip--oct .big-card--text .big-panel .big-arrow {
    margin-top: auto !important; width: 40px !important; height: 40px !important;
    flex: 0 0 40px !important;
  }

} /* @media (max-width: 900px) */

/* ============================================================
   Bandeau jaune : à 390px la réf. casse son titre sur 4 lignes
   (texte plus long que le nôtre). On reproduit ce retour à la ligne
   sous 400px → 4 lignes à 390 (295px de section) et 3 lignes à 430
   (262px), exactement comme la référence.
   ============================================================ */
@media (max-width: 400px) {
  .yellowband h2 { max-width: 270px !important; text-wrap: pretty !important; }
}


/* ============================================================
   Finitions complémentaires — mêmes mesures que la référence
   ============================================================ */
@media (max-width: 900px) {

  /* flèches de carrousel : cercle blanc (réf.), pas de fond noir */
  #main .scroller-prev, #main .scroller-next {
    width: 40px !important; height: 40px !important;
    background: #fff !important; color: #111 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18) !important;
    opacity: 1 !important; font-size: 20px !important; line-height: 1 !important;
    top: 50% !important; transform: translateY(-50%) !important;
  }
  #main .scroller-next { right: 0 !important; }
  #main .scroller-prev { display: none !important; }

  /* hero : la légende de la tuile D laisse la place à la flèche à droite */
  #main .mosaic4 .tile-d > .tile-caption { right: 56px !important; left: 16px !important; }
  /* hero : la légende de la tuile B est un lien souligné dans la réf. */
  #main .mosaic4 .tile-b > .tile-caption--big { text-decoration: underline !important; }

  /* bandeau jaune : suppression du 2e <br> → 4 lignes propres à 390
     et 3 lignes à 430, comme la référence (même hauteur de section). */
  /* (le 2e <br> est conservé : le masquer collerait « exclusifsseulement ») */

  /* En octobre : carte texte, titre 20/25 centré verticalement,
     flèche cercle en bas à gauche (32px des bords). */
  #main > section.rowstrip--oct .big-card--text .big-panel {
    justify-content: center !important;
    position: relative !important;
  }
  #main > section.rowstrip--oct .big-card--text .big-panel strong {
    font-size: 20px !important; line-height: 25px !important;
  }
  #main > section.rowstrip--oct .big-card--text .big-panel .big-arrow {
    position: absolute !important; left: 32px !important; bottom: 32px !important;
    margin: 0 !important;
  }
  /* En octobre : libellé 16/21 → 3 lignes + 8px = 71px, comme la réf. */
  #main > section.rowstrip--oct .oct-card .oct-label {
    font-size: 16px !important; line-height: 21px !important;
  }
}


/* ============================================================
   Promo bar : comme la réf. mobile, on n'affiche que « FR »
   (pas de séparateur ni de « Français ») et on ne tronque pas
   les deux entrées de droite quand elles tiennent.
   ============================================================ */
@media (max-width: 900px) {
  body > header.site-header .promo-bar .promo-item span.promo-sep,
  body > header.site-header .promo-bar .promo-item span.promo-lang-name { display: none !important; }
  body > header.site-header .promo-bar .promo-fr { display: inline !important; }
  body > header.site-header .promo-bar .promo-right .promo-item span { max-width: none !important; }
}

/* ============================================================
   Bonnes affaires : ligne de bas de section (vrai lien HTML
   .rowstrip-bottom-link) — réf. : 73px de haut, libellé 14/17.5 700,
   chevron 24px collé à droite, filet 1px en bas (pas en haut).
   ============================================================ */
@media (max-width: 900px) {
  #main > section.rowstrip--deals > .wrap > .rowstrip-bottom-link {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    box-sizing: border-box !important;
    height: 73px !important; margin: 0 !important; padding: 0 !important;
    border-bottom: 1px solid #dfdfdf !important; border-top: 0 !important;
    font-size: 14px !important; line-height: 17.5px !important; font-weight: 700 !important;
    color: #111 !important; text-decoration: none !important;
  }
  #main > section.rowstrip--deals > .wrap > .rowstrip-bottom-link .rowstrip-bottom-link__arrow {
    font-size: 22px !important; line-height: 1 !important; font-weight: 400 !important;
    flex: 0 0 auto !important; color: #111 !important;
  }
}