/* ========================================================= ALIGNEMENT VERTICAL COLONNE TITRE - FICHES PRODUIT MONTRE Colonne .rolex-intro-title (titre "Rolex" / nom du modele / RMC / prix / contact) sur les fiches produit individuelles, ex : /watches/land-dweller-40/m127334-0001/, /watches/day-date-40/... OBJECTIF (v2) : aligner cette colonne sur la MEME ligne verticale que le partial "Garantie internationale" (internationalguaranteewatches.html, section .rolex-services) plus bas sur la meme page, PAS sur le standard mobile 20px utilise ailleurs sur le site. Sur mobile les deux sections sont deja a 20px (rolex-mobile-gutter-unification.css l'a impose aux deux), donc rien ne change en mobile. Mais en TABLETTE/DESKTOP, .rolex-services garde volontairement son padding d'origine en % (8%, cf. sass/_custom.scss) + 12px de gouttiere Bootstrap du .container-fluid = une valeur qui grandit en continu avec la largeur d'ecran (pas de palier fixe). La v1 de ce fichier alignait au contraire tout sur un 20px fixe, ce qui decalait fortement la colonne titre par rapport a la section Garantie des que l'ecran depassait le seuil mobile (ex: 850px de large, Garantie etait a 80px alors que le titre etait fige a 20px). FORMULE GARANTIE (>767px) : 8vw + 12px (verifiee en direct : 850px -> 80px, 1050px -> 96px, 1400px -> 124px, 1650px -> 144px = exactement 8vw+12 a chaque fois). On utilise vw (relatif au viewport) et non % (relatif au conteneur) car le conteneur de .rolex-intro-title est bien plus etroit (col-md-4) que celui de .rolex-services (pleine largeur) - seul vw donne le meme rendu en pixels quel que soit la largeur de colonne. SOLUTION : comme pour la v1, on ne touche pas .px-120 (partage avec la colonne image .rolex-intro-content et d'autres pages) : on compense uniquement les blocs de CONTENU internes (.rolex-intro-title > .lc-block, qui ne sont pas des enfants flex de la .row, donc leur marge n'affecte pas la colonne image voisine). Pour chaque palier de .px-120, on calcule la marge necessaire pour que : padding .px-120 (fixe par palier) + 4px (.lc-block interne) + marge = 8vw + 12px (position reelle de Garantie a cette largeur) Paliers .px-120 (sass/_custom.scss) : <=767px = 20px (fixe) ; 768-991px = 15px (valeur de base, aucun palier tablette dedie) ; 992-1199px = 30px ; >=1200px = 120px. Verifie en direct sur /watches/land-dweller-40/m127334-0001/, colonne titre vs image de la section Garantie, EXACTEMENT alignees a 850px (80/80), 1050px (96/96), 1400px (124/124) et 1650px (144/144). Colonne image .rolex-intro-content non affectee (verifie avant/apres). HBJO-WEB - Abder Kinane CORRECTIF 03/09/2026 (v1, insuffisant) : .rolex-intro-title est une classe PARTAGEE, reutilisee aussi sur la page d'accueil (section de bienvenue "Bienvenue chez Bollwerk-Joailliers..."). Premiere version du correctif : ajout de "body:not(.home)" devant chaque selecteur pour ecarter uniquement la home. Insuffisant : .rolex-intro-title est en fait reutilisee sur BEAUCOUP d'autres pages qui n'ont pas non plus de section Garantie/.rolex-services a aligner (page Service, pages de collection /collection-rolex/collection-*/, etc.) - toutes ces pages recevaient encore le decalage (ex: signale en direct sur /service-de-votre-rolex/ et /collection-rolex/collection-submariner/, meme symptome que la home). CORRECTIF 03/09/2026 (v2, insuffisant) : plutot que d'exclure les pages une par une (fragile, il y en a des dizaines de ce type sur le site), on a cible la condition qui justifie ce correctif : la presence reelle de la section Garantie (.rolex-services) plus bas sur LA MEME page, via "body:has(.rolex-services)" devant chaque selecteur. Insuffisant : .rolex-services n'est PAS un marqueur exclusif aux fiches produit, c'est un bloc "services" GENERIQUE reutilise ailleurs avec un contenu different - notamment sur /contact-rolex/ elle-meme (section "Nos services Rolex", 3eme section de la page, meme classe .rolex-services que le partial Garantie). Resultat : "body:has(.rolex-services)" matchait aussi /contact-rolex/ et y decalait le H1 "Contactez Bollwerk-Joailliers..." par rapport aux 2 sections suivantes (signale en direct par le client via le fichier 3-sections.html, meme symptome que la home/service/collection precedemment). CORRECTIF 03/09/2026 (v3, definitif) : on cible un marqueur present UNIQUEMENT dans la colonne titre des vraies fiches produit montre, pas ailleurs sur le site : l'attribut [data-rb-product-title], deja utilise comme selecteur plus haut dans sass/_custom.scss (regle "[data-rb-product-title] .text-nowrap") et confirme en direct present dans .rolex-intro-title UNIQUEMENT sur les fiches produit (verifie sur 2 fiches distinctes : /watches/land-dweller-40/m127334-0001/ et /watches/datejust-36/m126284rbr-0011/), absent de la home, de /service-de-votre-rolex/, de /collection-rolex/collection-submariner/ ET de /contact-rolex/. Remplacement de "body:has(.rolex-services) .rolex-intro-title" par ".rolex-intro-title:has([data-rb-product-title])" : plus besoin de verifier l'existence d'une section plus bas sur la page, on verifie directement que CETTE colonne .rolex-intro-title est bien une colonne de titre produit. Necessite un navigateur gerant :has() (Chrome/Edge/Safari/Firefox recents - tous les navigateurs grand public depuis 2023/2024). ========================================================= */ @media (max-width: 767px) { /* Garantie fixee a 20px net en mobile (rolex-mobile-gutter-unification.css). container 20px + 12(row) -12(col) + 4(lc-block) = 24 -> -4 = 20 */ .rolex-intro-title:has([data-rb-product-title]) > .lc-block { margin-left: -4px !important; } } @media (min-width: 768px) and (max-width: 991px) { /* cible = 8vw + 12 ; container 15px + 4 = 19 -> marge = 8vw + 12 - 19 = 8vw - 7 */ .rolex-intro-title:has([data-rb-product-title]) > .lc-block { margin-left: calc(8vw - 7px) !important; } } @media (min-width: 992px) and (max-width: 1199px) { /* cible = 8vw + 12 ; container 30px + 4 = 34 -> marge = 8vw + 12 - 34 = 8vw - 22 */ .rolex-intro-title:has([data-rb-product-title]) > .lc-block { margin-left: calc(8vw - 22px) !important; } } @media (min-width: 1200px) { /* cible = 8vw + 12 ; container 120px + 4 = 124 -> marge = 8vw + 12 - 124 = 8vw - 112 */ .rolex-intro-title:has([data-rb-product-title]) > .lc-block { margin-left: calc(8vw - 112px) !important; } } /* ========================================================= BLOC CONTACT (telephone/chat/message/nous trouver) Comportement voulu (demande explicite du client) : - MOBILE (<=767px) : les 4 icones restent CENTREES comme un groupe (comportement natif de sass/_custom.scss, "justify-content: center") - PAS d'alignement avec le titre sur ce palier, c'est volontaire. - TABLETTE (768-991px) : deja alignee nativement (grid-template-columns: repeat(4, auto) + justify-content: start + .rolex-contact-item{padding:0}), verifie en direct a 830px - aucune correction necessaire. - DESKTOP (>=992px) : grille 2 colonnes (grid-template-columns: 1fr 1fr). .rolex-contact-item a nativement "padding: 10px 24px" (sass/_custom.scss, ~ligne 1365), donc la colonne de GAUCHE (tel + message, les enfants impairs de la grille) avait 24px de padding-left en trop par rapport au titre au-dessus (icone du telephone a 148px alors que le titre est a 124px, ecart de 24px). On neutralise uniquement le padding-left de la colonne de gauche (:nth-child(odd)), sans toucher la colonne de droite (whatsapp + nous-trouver) qui garde son padding-left de 24px pour conserver l'espacement visuel entre les deux colonnes. Verifie en direct sur /watches/land-dweller-40/m127334-0001/ a 1400px : icones "Tel" et "Message" (colonne gauche) exactement alignees a 124px avec le titre ; "Chat" et "Nous trouver" (colonne droite) inchangees. ========================================================= */ @media (min-width: 992px) { .rolex-contact-item:nth-child(odd) { padding-left: 0 !important; } }