#sites-map-container { text-align: center; position: relative; width: 100%; /* Prend toute la largeur du conteneur parent */ max-width: 800px; /* Optionnel : Limiter la largeur maximale */ margin: 0 auto; /* Centrer le conteneur */ height: auto; /* Permet à la hauteur de s'ajuster automatiquement */ @media (max-width: 810px) { width: 80%; /* Prend toute la largeur du conteneur parent */ } @media (max-width: 530px) { width: 100%; /* Prend toute la largeur du conteneur parent */ height: 485px; } @media (max-width: 400px) { width: 100%; /* Prend toute la largeur du conteneur parent */ height: 430px; } } /* Changer la couleur au survol (hover) */ #sites-map-container .site-link:hover{ cursor: pointer; } /* Styles du popup (caché par défaut) */ #sites-map-container #popup { display: none; position: absolute; z-index: 1000; text-align: left; padding-left: 1rem; pointer-events: none; @media (max-width: 1090px) { bottom: 20px; } } /* Position du popup à droite lorsque l'écran est plus grand que 1090px */ @media (min-width: 1090px) { #sites-map-container #popup { top: 50%; /* Centrer verticalement */ left: 80%; /* Placer le popup à droite de la carte */ transform: translateY(-50%); /* Ajuster pour centrer verticalement */ width: 300px; } } #sites-map-container strong{ color: #f7002b; } #sites-map-container a{ display: none; align-items: center; color: white; background: black; text-transform: uppercase; font-size: 0.8rem; padding-left: 0.5rem; text-decoration: none; margin-top: 0.7rem; height: 1.3rem; } #sites-map-container a:after{ display: inline-flex; content: url("../img/noun-arrow-to-right.svg"); padding-right: 0.2rem; padding-left: 0.2rem; } #popup-content{ width: 300px; padding-right: 30px; p{ font-size: 0.7rem; } @media (max-width : 810px) { width: 300px; background-color: white; border-radius: 5px; padding: 0.5rem; padding-left: 1rem; } }