/* ========================================================= MARGE MOBILE UNIFIEE - SECTION ROLEX Revue Rolex Geneve du 31/08/2026 (Brand identity / Typography / Responsive) : "The text margins vary in mobile layout on most pages of the Rolex section." Plusieurs systemes de marge gauche/ droite coexistaient en mobile (<768px) selon les sections : 1. .px-mobile -> 10px (grilles Accessoires/Montres + leurs sections "Charger plus") 2. .px-120 (palier mobile) -> 15px (fiches produit / pages modele, ex: /watches/day-date-40/...) 3. .container + .px-2 -> 12+8 = 20px (bloc texte "Hans Wilsdorf", reutilise sur la plupart des pages editoriales Rolex : nouveaux-modeles, oyster-story, service-de-votre-rolex, collection-rolex, savoir-faire-rolex) ATTENTION : le .row Bootstrap interne a une marge negative de -12px non compensee si on met le .container a 0. Il faut garder 20px sur le .container et seulement 12px sur .px-2 (et non 20px+0px) pour que le texte tombe exactement a 20px du bord. 4. .rolex-video-section -> 12px (gutter Bootstrap par defaut du .container-fluid ; row g-0 + lc-block p-0 ne l'annulent pas. ex: savoir-faire-rolex, oyster-story) - plus etroit que les autres blocs, d'ou le decalage visible sur les captures Rolex. 5. .rolex-intro-grid -> 39px (grille LC du bloc titre/intro en tete de page - 35px de gouttiere LC Grid + 4px de .lc-block interne. Presente 1 fois sur TOUTES les pages principales verifiees : savoir-faire-rolex, oyster-story, nouveaux-modeles, service-de-votre- rolex, collection-rolex, accessoires- rolex. C'est cette valeur qui a mis en evidence le decalage visible en scrollant sur savoir-faire-rolex.) 6. .container (generique) -> 8px (blocs texte titre+description repetes plusieurs fois par page, sans la classe .rolex-image-card- hans - ex. intros de categories produit sur accessoires-rolex, paragraphes sur oyster-story et service-de-votre-rolex. Ici le .container garde son padding Bootstrap par defaut (12px) qui est exactement annule par la marge negative du .row (-12px), donc le rendu final = uniquement le padding du bloc .px-2 (8px).) 7. .rolex-services -> 52px (bloc "Garantie internationale" des fiches produit montre, ex: /watches/land-dweller-40/m127334-0001/, /watches/day-date-40/m228236-0018/. Padding EN POURCENTAGE dans sass/_custom.scss (8% + 8%), donc variable selon la largeur d'ecran - 40px a 500px de large. Cumule avec les 12px par defaut du .container-fluid interne = 52px net. Concerne aussi bien l'image que le bloc accordéon, les deux colonnes etant dans le meme .container-fluid.) UNIFICATION : 20px choisi comme standard (valeur deja utilisee et la plus "confortable" parmi celles en place, cf. cas 3 ci-dessus). Chaque source est ramenee a 20px net ci-dessous. Mobile uniquement (<=767px, meme seuil que la regle .px-mobile d'origine dans sass/_custom.scss). Desktop/tablette non touches. A VERIFIER VISUELLEMENT avant de considerer ceci definitif : - cas 4 (video) : structure confirmee sur savoir-faire-rolex + oyster-story uniquement. Si d'autres pages utilisent un autre wrapper pour leur video, elles resteront a 0px. - cas 3, 5 et 6 : verifies en direct sur plusieurs pages (savoir- faire-rolex, oyster-story, accessoires-rolex) au moment du deploiement de cette version. - cas 7 (.rolex-services) : le padding en % (8%) dans sass/_custom.scss n'est PAS touche par cette regle (desktop/tablette continuent d'utiliser 8%), seul le mobile (<=767px) est fige a 20px net via cette regle, en surchargeant le % + le padding du .container-fluid. Verifie en direct sur /watches/land-dweller-40/m127334-0001/. HBJO-WEB - Abder Kinane ========================================================= */ @media (max-width: 767px) { /* 1) Grilles Accessoires / Montres + "Charger plus" : 10px -> 20px */ .px-mobile { padding-left: 20px !important; padding-right: 20px !important; } /* 2) Fiches produit / pages modele (palier mobile de .px-120) : 15px -> 20px. Les paliers tablette (30px) et desktop (120px) de .px-120 ne sont pas touches, cette regle est a l'interieur du media max-width:767px. */ .px-120 { padding-left: 20px !important; padding-right: 20px !important; } /* 3) Bloc texte "Hans Wilsdorf" (titre + paragraphe), reutilise sur la plupart des pages editoriales Rolex. Le .row Bootstrap interne au .container a une marge negative fixe de -12px (non modifiable ici sans casser d'autres elements) : si on met le .container a 0, le contenu remonte a 8px du bord au lieu de 20px. On garde donc le .container a 20px et on compense en reduisant .px-2 a 12px, ce qui donne 20px (container) - 12px (row) + 12px (px-2) = 20px net, verifie en direct sur le site (h2Left = 20 a 500px de large). */ .rolex-image-card-hans.container { padding-left: 20px !important; padding-right: 20px !important; } .rolex-image-card-hans .px-2 { padding-left: 12px !important; padding-right: 12px !important; } /* 4) Section video (actuellement 0px, container-fluid + row g-0 + lc-block p-0 : la video touche les bords de l'ecran). On ajoute le padding sur le container-fluid direct de la section pour inserer toute la rangee (video comprise) sans toucher aux classes g-0/p-0 internes. */ .rolex-video-section > .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } /* 5) Bloc titre/intro en tete de page (grille LC "rolex-intro-grid", present sur toutes les pages principales) : 39px -> 20px. Le conteneur de grille garde 20px et le .lc-block interne est remis a 0 (au lieu de 4px) pour ne pas cumuler les deux paddings. */ .rolex-intro-grid { padding-left: 20px !important; padding-right: 20px !important; } .rolex-intro-grid .lc-block { padding-left: 0 !important; padding-right: 0 !important; } /* 6) Blocs texte titre+description generiques (.container simple, SANS la classe .rolex-image-card-hans), repetes plusieurs fois par page (intros de categories produit, paragraphes editoriaux) : 8px -> 20px. Le .container garde son padding Bootstrap par defaut (12px), deja annule par la marge negative du .row (-12px) : il suffit donc de porter le padding du bloc .px-2 a 20px net, sans toucher au .container (a la difference du cas 3 qui a un .container force a 20px). Le :not(.rolex-image-card-hans) exclut explicitement le cas 3 pour ne pas entrer en conflit avec ses valeurs 20px/12px. */ .container:not(.rolex-image-card-hans) .row.justify-content-center > .lc-block.px-2, .container:not(.rolex-image-card-hans) .row.justify-content-center > .lc-block.col-12.col-lg-7.px-2 { padding-left: 20px !important; padding-right: 20px !important; } /* 7) Section "Garantie internationale" des fiches produit montre (.rolex-services). Le padding est defini en % (8% + 8%) dans sass/_custom.scss pour desktop/tablette - on ne touche pas cette regle source, on la neutralise seulement ici en mobile et on fixe 20px net sur le .container-fluid interne (qui a par defaut 12px de gouttiere Bootstrap). Couvre a la fois l'image et le bloc accordeon, les deux colonnes du .row g-0 partageant le meme .container-fluid. */ .rolex-services { padding-left: 0 !important; padding-right: 0 !important; } .rolex-services > .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } }