/* =========================================================
   PAGE CONTACT ROLEX (/contact-rolex/) - AERATION & CENTRAGE
   Revue Rolex Geneve du 31/08/2026, page "Contact page"
   HBJO-WEB - Abder Kinane
   ========================================================= */

/* ---------------------------------------------------------
   1) Bloc "BOLLWERK JOAILLIERS MULHOUSE" (badges / adresse /
   horaires / boutons de contact), colonne de droite a cote de
   la carte Google Maps.
   Structure DOM verifiee en direct sur /contact-rolex/ :
   .rolex-map-location-wrapper > ... > .row.g-0.overflow-hidden
     > .col-12.col-lg-8 (carte, image)
     > .col-12.col-lg-4.mt-2 (bloc infos - cible ci-dessous)
   --------------------------------------------------------- */

/* DESKTOP (>=992px) - Issue : "The contents are misaligned."
   Recommendation : "The elements should be centred in the
   container, as presented in the guidelines."
   Le bloc infos etait plaque en haut de sa colonne, laissant un
   grand vide en dessous (la colonne est etiree a la hauteur de
   la carte via le flex du .row, mais son contenu ne l'est pas).
   On centre le contenu (badges+titre+adresse+horaires+boutons,
   comme un seul groupe) sur la hauteur de la colonne = hauteur
   de la carte a gauche. */
@media (min-width: 992px) {
    .rolex-map-location-wrapper .row.g-0.overflow-hidden > .col-lg-4 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* MOBILE (<=767px) - Issue : "There are no margins/padding
   around the content in the 'Contact info' component."
   Verifie en direct : la colonne infos (.col-12.col-lg-4.mt-2)
   a 0 padding sur ses 4 cotes - badges/adresse/horaires/boutons
   touchent les bords de leur bloc. Les classes ms-sm-1/ms-md-4...
   presentes sur les lc-block internes ne s'appliquent qu'a partir
   de 768px, donc aucune marge n'agit en dessous. On ajoute un
   padding uniforme sur les 4 cotes (20px = standard mobile du
   site, cf. rolex-mobile-gutter-unification.css). */
@media (max-width: 767px) {
    .rolex-map-location-wrapper .row.g-0.overflow-hidden > .col-lg-4 {
        padding: 20px !important;
    }
}

/* ---------------------------------------------------------
   2) Bloc CTA "Envoyer un message" / lien "Nous contacter >"
   (composant .rolex-cta-content, reutilise sur les pages
   Montres Rolex / Accessoires Rolex / Contact - meme grille
   .rolex-cta-grid, cf. sass/_custom.scss).
   Issue : "The link is at the very bottom of the 'Contact us'
   component."
   Recommendation : "We recommend adding space below the link
   in the container."
   Verifie en direct sur /contact-rolex/ : ~50px entre le bas du
   lien et le titre de la section suivante ("Continuez d'explorer"),
   tout venant de l'exterieur du composant (rien depuis
   .rolex-cta-content lui-meme, qui n'a aucun padding-bottom).
   On ajoute de la respiration a l'INTERIEUR du composant, comme
   demande, plutot que de compter sur la section suivante.
   --------------------------------------------------------- */
.rolex-cta-content {
    padding-bottom: 1.5rem !important;
}