position popup

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -3055,4 +3055,68 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .next-site::before {
   content: url("../img/next.svg");
+}
+
+@font-face {
+  font-family: "gilroy-semibold";
+  src: url("fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
+}
+#sites-map-container {
+  background-color: #cecfcc;
+  text-align: center;
+  position: relative;
+}
+
+/* #sites-map-container .circle {
+  fill: black;
+  stroke: white;
+  stroke-width: 0.7;
+} */
+/* Changer la couleur au survol (hover) */
+#sites-map-container .site-link:hover {
+  cursor: pointer;
+  fill: #f7002b !important;
+}
+
+/* Styles du popup (caché par défaut) */
+#sites-map-container #popup {
+  font-family: "gilroy-semibold";
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+}
+
+#sites-map-container strong {
+  color: #f7002b;
+  font-family: "gilroy-semibold";
+}
+
+#sites-map-container a {
+  display: none;
+  /* display: inline-flex; */
+  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;
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -47,3 +47,5 @@
 @import "pages/actualite";
 @import "pages/node-type-site";
 
+
+@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss";