css home carte responsive

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css

@@ -57,12 +57,15 @@
   color: #f7002b;
   font-family: 'gilroy-bold';
 }
-/* #sites-map-container a {
-  display: none; 
+
+#sites-map-container .link-30-projets{
+  margin-bottom: 2rem;
+}
+
+#sites-map-container .link-30-projets a {
   align-items: center; 
   color: white; 
   background: black; 
-  color: #f7002b;
   font-family: 'gilroy-bold'; 
   text-transform: uppercase; 
   font-size: 0.5rem;
@@ -72,17 +75,16 @@
   height: 1.3rem;
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
-  font-family: 'gilroy-medium'; 
   display: inline-flex; 
-}  */
-/* #sites-map-container a:after { 
+} 
+#sites-map-container .link-30-projets a:after { 
   display: inline-flex;
   content: url("../img/noun-arrow-to-right.svg");
   padding-right: 0.5rem;
   padding-left: 0.5rem;
-} */
+}
 #popup-content {
-  width: 350px;
+  width: 300px;
   padding-right: 30px;
   font-size: 0.6rem !important;
   position: relative;
@@ -90,7 +92,7 @@
 #popup-content p {
   font-size: 0.6rem !important;
 }
-@media (max-width: 810px) {
+@media (max-width: 1089px) {
   #popup-content {
     width: 300px;
     background-color: white;
@@ -102,12 +104,12 @@
 #popup-content ul{
   padding-left: 0;
   position: relative;
-  margin-top: 2rem;
+  /* margin-top: 2rem; */
 }
-#popup-content ul::before {
+#popup-content ul::after {
   content: "";
   position: absolute;
-  top: -55px;
+  top: -5px;
   left: 0;
   width: 100%;
   height: 1px;
@@ -118,11 +120,9 @@
   position: relative;
   color: black;
   font-family: "gilroy-semibold";
-  /* border-bottom: black solid 1px; */
   padding-top: 0.3rem;
   padding-bottom: 0.5rem;
   background-color: #f6f7f3;
-  /* padding-left: 0.3rem; */
 }
 
 #popup-content ul li::after {
@@ -139,21 +139,22 @@
 
 /* Spécifique au li .laureat */
 #popup-content ul li.laureat {
-  padding-left: 0.1rem; /* on crée la place pour le badge */
-  padding-top: 0rem;
+  --badge-size: 2.6rem;              /* taille du badge */
+  margin-top: calc(var(--badge-size) / 2); /* on réserve de la place au-dessus */
+  padding-left: 0rem;                /* place à gauche pour le badge */
 }
 
 /* Badge LAUREAT responsive */
 #popup-content ul li.laureat::before {
   content: "";
   position: absolute;
-  left: -1.3rem;           /* aligne avec le début du contenu */
-  top: 0%;               /* milieu vertical du li */
-  transform: translateY(-50%); /* centre verticalement */
-  width: 2.3rem;
-  height: 2.5rem;
+  left: -1.5rem;           /* aligne avec le début du contenu */
+  top: -33%;              /* milieu vertical du li */
+  /* top: calc(var(--badge-size) / 2);  remonte dans la marge au-dessus */
+  width: var(--badge-size);
+  height: var(--badge-size);
   background-color: #f6f7f3;
-  background-image: url("../img/LAUREAT.svg");
+  background-image: url("../img/laureat-ouvert.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -161,22 +162,38 @@
 }
 
 /* Mobile : on resserre tout, le badge suit */
-@media (max-width: 810px) {
+@media (max-width: 1089px) {
   #popup-content {
     width: 300px;
     background-color: white;
     border-radius: 5px;
     padding: 0.5rem 0.5rem 0.5rem 1rem;
+    padding-left:2rem ;
+  }
+
+  #popup-content ul li {
+    background-color: white;
+    /* padding-left: 3rem; */
+  }
+  #popup-content ul li::after {
+    height: 0.5px;
   }
 
   #popup-content ul li.laureat {
-    padding-left: 2.4rem;
+    /* padding-left: 3rem; */
+    z-index: 0;
+    background-color: white !important;
+
   }
 
   #popup-content ul li.laureat::before {
     width: 2.2rem;
     height: 2.2rem;
-    left: 0.1rem;
-    top: 0.4rem;
+    left: -1.3rem;
+    top: -0.8rem;
+    z-index: -1;
+    background-color: white;
+    background-image: url("../img/laureat-ouvert.svg");
   }
+  /* li{background-color: white;} */
 }