From ad9156a110a539977e5c413f92f3df478bb7c606 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 11 Nov 2025 00:43:48 +0100
Subject: [PATCH] css home carte responsive

---
 .../assets/css/carte-interactive-qdd.css      | 69 ++++++++++++-------
 .../q2d_mod/assets/img/LAUREAT-fond-blanc.svg | 32 +++++++++
 .../q2d_mod/assets/img/laureat-ouvert.svg     | 26 +++++++
 .../templates/svg-mapprojets.html.twig        |  2 +-
 4 files changed, 102 insertions(+), 27 deletions(-)
 create mode 100644 web/modules/custom/q2d_mod/assets/img/LAUREAT-fond-blanc.svg
 create mode 100644 web/modules/custom/q2d_mod/assets/img/laureat-ouvert.svg

diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
index 4f64799..5a4a104 100644
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
+++ b/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;} */
 }
\ No newline at end of file
diff --git a/web/modules/custom/q2d_mod/assets/img/LAUREAT-fond-blanc.svg b/web/modules/custom/q2d_mod/assets/img/LAUREAT-fond-blanc.svg
new file mode 100644
index 0000000..41ef958
--- /dev/null
+++ b/web/modules/custom/q2d_mod/assets/img/LAUREAT-fond-blanc.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="22.250273mm"
+   height="22.250275mm"
+   viewBox="0 0 22.250273 22.250275"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-95.271042,-166.06271)">
+    <path
+       id="path15512"
+       d="m 101.09827,178.67313 -0.21377,-0.88244 0.25456,-0.0629 0.27959,1.15415 -2.024872,0.50049 -0.06585,-0.27173 z m 0.12046,-2.67592 -0.48019,0.13106 -0.079,0.94418 0.45158,0.21066 -0.0249,0.29673 -2.011694,-0.95977 0.02634,-0.31473 2.142714,-0.60487 z m -0.80939,0.95725 0.063,-0.75234 -1.055388,0.29022 z m 1.35902,-2.71337 c 0.056,0.19049 0.0335,0.39024 -0.0676,0.59931 -0.10102,0.20905 -0.24352,0.35078 -0.4275,0.42522 -0.18489,0.0718 -0.37815,0.0579 -0.57976,-0.0414 l -1.244464,-0.61354 0.121474,-0.25141 1.23376,0.60825 c 0.13203,0.0651 0.25646,0.0774 0.37328,0.0368 0.11504,-0.0414 0.20825,-0.13609 0.27966,-0.28386 0.0714,-0.14781 0.0879,-0.28026 0.0495,-0.39738 -0.0401,-0.11799 -0.12629,-0.20952 -0.25832,-0.27463 l -1.23376,-0.60825 0.12017,-0.24869 1.24446,0.61351 c 0.20161,0.0994 0.3313,0.24479 0.38905,0.43618 z m 1.41622,-1.32314 -0.88668,-0.26601 -0.35881,0.33911 0.54529,0.58866 -0.20224,0.19113 -1.42425,-1.53758 0.60889,-0.57544 c 0.13047,-0.12332 0.2855,-0.18196 0.4651,-0.17592 0.17824,0.005 0.3284,0.0727 0.45048,0.20453 0.0922,0.0996 0.14661,0.21846 0.16313,0.35664 0.018,0.13681 -0.004,0.2659 -0.0655,0.38727 l 0.92851,0.27592 z m -1.94743,-0.68472 0.53103,0.5733 0.40665,-0.38432 c 0.0754,-0.0712 0.1134,-0.15935 0.11405,-0.26432 7.4e-4,-0.1078 -0.0355,-0.20124 -0.10876,-0.28032 -0.0733,-0.0791 -0.16246,-0.1211 -0.26765,-0.12605 -0.10374,-0.006 -0.19329,0.0262 -0.26868,0.0974 z m 2.244,-2.53012 -0.11392,0.48655 -0.22833,0.10323 0.0569,-0.46073 z m 0.3383,2.52314 0.8834,-0.39941 0.10708,0.24161 -1.13618,0.51371 -0.85169,-1.92191 1.1226,-0.50757 0.10706,0.24161 -0.86982,0.39327 0.2616,0.5903 0.80187,-0.36255 0.10582,0.23887 -0.80183,0.36255 z m 2.72166,-0.38295 -0.21279,-0.45414 -0.93396,0.0887 -0.12521,0.48626 -0.29354,0.0279 0.57863,-2.16994 0.31132,-0.0295 0.96906,2.02289 z m -1.07615,-0.63497 0.74421,-0.0707 -0.4698,-0.99773 z m 3.24925,-1.05799 -0.0599,0.25769 -0.60012,-0.14239 -0.41679,1.79217 -0.2667,-0.0633 0.41677,-1.79217 -0.59722,-0.1417 0.0599,-0.2577 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.322644" />
+    <circle
+       style="opacity:1;fill:#fff;fill-opacity:1;stroke:#f7002b;stroke-width:2.86467;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+       id="path2"
+       cx="106.39618"
+       cy="177.18785"
+       r="9.6928015" />
+    <path
+       id="path15512-3"
+       d="m 101.22891,178.81894 -0.21377,-0.88244 0.25456,-0.0629 0.27959,1.15415 -2.024877,0.50049 -0.0658,-0.27173 z m 0.12046,-2.67592 -0.48019,0.13106 -0.079,0.94418 0.45158,0.21066 -0.0249,0.29673 -2.011697,-0.95977 0.0263,-0.31473 2.142717,-0.60487 z m -0.80939,0.95725 0.063,-0.75234 -1.055387,0.29022 z m 1.35902,-2.71337 c 0.056,0.19049 0.0335,0.39024 -0.0676,0.59931 -0.10102,0.20905 -0.24352,0.35078 -0.4275,0.42522 -0.18489,0.0718 -0.37815,0.0579 -0.57976,-0.0414 l -1.244467,-0.61354 0.12148,-0.25141 1.233757,0.60825 c 0.13203,0.0651 0.25646,0.0774 0.37328,0.0368 0.11504,-0.0414 0.20825,-0.13609 0.27966,-0.28386 0.0714,-0.14781 0.0879,-0.28026 0.0495,-0.39738 -0.0401,-0.11799 -0.12629,-0.20952 -0.25832,-0.27463 l -1.23376,-0.60825 0.12017,-0.24869 1.24446,0.61351 c 0.20161,0.0994 0.3313,0.24479 0.38905,0.43618 z m 1.41622,-1.32314 -0.88668,-0.26601 -0.35881,0.33911 0.54529,0.58866 -0.20224,0.19113 -1.42425,-1.53758 0.60889,-0.57544 c 0.13047,-0.12332 0.2855,-0.18196 0.4651,-0.17592 0.17824,0.005 0.3284,0.0727 0.45048,0.20453 0.0922,0.0996 0.14661,0.21846 0.16313,0.35664 0.018,0.13681 -0.004,0.2659 -0.0655,0.38727 l 0.92851,0.27592 z m -1.94743,-0.68472 0.53103,0.5733 0.40665,-0.38432 c 0.0754,-0.0712 0.1134,-0.15935 0.11405,-0.26432 7.4e-4,-0.1078 -0.0355,-0.20124 -0.10876,-0.28032 -0.0733,-0.0791 -0.16246,-0.1211 -0.26765,-0.12605 -0.10374,-0.006 -0.19329,0.0262 -0.26868,0.0974 z m 2.244,-2.53012 -0.11392,0.48655 -0.22833,0.10323 0.0569,-0.46073 z m 0.3383,2.52314 0.8834,-0.39941 0.10708,0.24161 -1.13618,0.51371 -0.85169,-1.92191 1.1226,-0.50757 0.10706,0.24161 -0.86982,0.39327 0.2616,0.5903 0.80187,-0.36255 0.10582,0.23887 -0.80183,0.36255 z m 2.72166,-0.38295 -0.21279,-0.45414 -0.93396,0.0887 -0.12521,0.48626 -0.29354,0.0279 0.57863,-2.16994 0.31132,-0.0295 0.96906,2.02289 z m -1.07615,-0.63497 0.74421,-0.0707 -0.4698,-0.99773 z m 3.24925,-1.05799 -0.0599,0.25769 -0.60012,-0.14239 -0.41679,1.79217 -0.2667,-0.0633 0.41677,-1.79217 -0.59722,-0.1417 0.0599,-0.2577 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.322644" />
+  </g>
+</svg>
diff --git a/web/modules/custom/q2d_mod/assets/img/laureat-ouvert.svg b/web/modules/custom/q2d_mod/assets/img/laureat-ouvert.svg
new file mode 100644
index 0000000..658df70
--- /dev/null
+++ b/web/modules/custom/q2d_mod/assets/img/laureat-ouvert.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="21.999817mm"
+   height="22.224886mm"
+   viewBox="0 0 21.999817 22.224886"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-134.26138,-166.10292)">
+    <path
+       id="path15511"
+       d="m 145.26127,188.3278 c -6.07504,0 -10.99989,-4.97515 -10.99989,-11.11228 0,-6.13746 4.92485,-11.11261 10.99989,-11.11261 6.07508,0 10.99993,4.97515 10.99993,11.11261 h -2.70535 c 0,-4.62785 -3.71358,-8.37963 -8.29458,-8.37963 -4.58099,0 -8.29455,3.75178 -8.29455,8.37963 0,4.6278 3.71356,8.37928 8.29455,8.37928 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path15512-6"
+       d="m 140.12905,179.37182 -0.23373,-0.96485 0.27833,-0.0688 0.30571,1.26195 -2.21399,0.54723 -0.072,-0.29711 z m 0.13171,-2.92584 -0.52504,0.1433 -0.0864,1.03237 0.49376,0.23033 -0.0272,0.32445 -2.19958,-1.04941 0.0288,-0.34413 2.34283,-0.66136 z m -0.88498,1.04666 0.0689,-0.82261 -1.15395,0.31733 z m 1.48595,-2.96679 c 0.0612,0.20828 0.0366,0.42668 -0.0739,0.65528 -0.11045,0.22857 -0.26626,0.38354 -0.46742,0.46493 -0.20216,0.0785 -0.41347,0.0633 -0.63391,-0.0453 l -1.36069,-0.67084 0.13282,-0.27489 1.34899,0.66506 c 0.14436,0.0712 0.28041,0.0846 0.40814,0.0402 0.12578,-0.0453 0.2277,-0.1488 0.30578,-0.31037 0.0781,-0.16161 0.0961,-0.30643 0.0541,-0.43449 -0.0439,-0.12901 -0.13809,-0.22909 -0.28245,-0.30028 l -1.34899,-0.66506 0.1314,-0.27192 1.36069,0.67081 c 0.22044,0.10869 0.36224,0.26765 0.42538,0.47692 z m 1.54849,-1.44672 -0.9695,-0.29086 -0.39232,0.37078 0.59622,0.64364 -0.22113,0.20899 -1.55727,-1.68119 0.66576,-0.62919 c 0.14266,-0.13483 0.31217,-0.19895 0.50854,-0.19235 0.19489,0.005 0.35907,0.0795 0.49255,0.22364 0.10086,0.10888 0.16031,0.23886 0.17837,0.38995 0.0197,0.14958 -0.004,0.29073 -0.0716,0.42344 l 1.01523,0.30169 z m -2.12932,-0.74867 0.58063,0.62684 0.44463,-0.42021 c 0.0824,-0.0779 0.12399,-0.17424 0.1247,-0.28901 8.1e-4,-0.11787 -0.0388,-0.22004 -0.11892,-0.3065 -0.0801,-0.0865 -0.17763,-0.13241 -0.29264,-0.13782 -0.11343,-0.007 -0.21135,0.0286 -0.29378,0.10648 z m 2.45359,-2.76643 -0.12456,0.53199 -0.24966,0.11287 0.0622,-0.50376 z m 0.36989,2.7588 0.96591,-0.43672 0.11708,0.26418 -1.2423,0.56169 -0.93123,-2.10142 1.22745,-0.55497 0.11706,0.26418 -0.95106,0.43 0.28603,0.64543 0.87676,-0.39641 0.11571,0.26118 -0.87672,0.39641 z m 2.97586,-0.41872 -0.23266,-0.49656 -1.02119,0.097 -0.13691,0.53167 -0.32096,0.0305 0.63268,-2.37261 0.34039,-0.0323 1.05957,2.21182 z m -1.17666,-0.69428 0.81372,-0.0773 -0.51368,-1.09092 z m 3.55272,-1.1568 -0.0655,0.28176 -0.65617,-0.15569 -0.45572,1.95955 -0.29161,-0.0692 0.45569,-1.95955 -0.65299,-0.15494 0.0655,-0.28177 z"
+       style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
diff --git a/web/modules/custom/q2d_mod/templates/svg-mapprojets.html.twig b/web/modules/custom/q2d_mod/templates/svg-mapprojets.html.twig
index 48bd0d8..7524e9f 100644
--- a/web/modules/custom/q2d_mod/templates/svg-mapprojets.html.twig
+++ b/web/modules/custom/q2d_mod/templates/svg-mapprojets.html.twig
@@ -54,7 +54,7 @@
     </div>
 
     {# lien #}
-    <div>
+    <div class="link-30-projets">
       <a href="/lesprojets">Voir les 30 projets</a>
     </div>
 </div>
\ No newline at end of file