creation d'un bouton pour fermer et de reouvrire la carte

style.css

@@ -1,12 +1,11 @@
-
-
-/* F O N T E S */
+/* ------- F O N T E S ------- */
 @font-face {
     font-family: "Combined";
     src: url('/mw/skins/foreground/assets/fonts/combined.otf');  
     font-style:   normal;
     font-weight:  normal;
 }
+
 @font-face {
     font-family: "Vega";
     src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');  
@@ -25,6 +24,7 @@ src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regular.ttf
 src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regular.woff");
 src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2");
 }
+
 @font-face {
 font-family: Lucette;
 src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf");
@@ -42,22 +42,64 @@ font-style: italic;
  font-style:normal
 }
 
-:root {
-    --bg:#fff;
-    --color-a: #A700FF;
-    --color-a-shadow: rgba(167, 0, 255, 0.44);
-    --color-b: #00AB6B;
+/* Global variables. */
+:root,
+::backdrop {
+  /* Set sans-serif & mono fonts */
+  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
+    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
+    "Helvetica Neue", sans-serif;
+  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  --standard-border-radius: 5px;
+
+  /* Default (light) theme */
+  --bg: #fff;
+  --accent-bg: #f5f7ff;
+  --text: #212121;
+  --text-light: #585858;
+  --border: #898EA4;
+  --accent: #0d47a1;
+  --accent-hover: #1266e2;
+  --accent-text: var(--bg);
+  --code: #d81b60;
+  --preformatted: #444;
+  --marked: #ffdd33;
+  --disabled: #efefef;
+
+    --font-title: Giskith;
+    --font-body: Lucette;
+    --color-a: #a700ff; /* purple */
+    --color-b: #00ab6b; /* green */
+    --font-size: 23px;
+    --line-height: 1.3em;
+    --color-a-shadow: rgba(166, 0, 255, 0.44);
 }
 
+/* Dark theme */
 @media (prefers-color-scheme: dark) {
-	:root {
-		--bg:#222;
-		--fg:
-	}
+  :root,
+  ::backdrop {
+    color-scheme: dark;
+    --bg: #222;
+    --accent-bg: #2b2b2b;
+    --text: #dcdcdc;
+    --text-light: #ababab;
+    --accent: #ffb300;
+    --accent-hover: #ffe099;
+    --accent-text: var(--bg);
+    --code: #f06292;
+    --preformatted: #ccc;
+    --disabled: #111;
+
+--font-title: Giskith;
+--font-body: Lucette;
+--color-a: #9557b5; /* washed-off purple */
+--color-b: #3c856b; /* washed-off green */
+--font-size: 23px;
+--line-height: 1.3em;
+  }
 }
 
-
-
 body {
     margin: 0;
     padding: 0;
@@ -74,6 +116,18 @@ div#handle {
     background-color: transparent;
     left: 5em;
 }
+/* change la taille des cercle dans le svg */
+/*circle {
+transform: scale(0.8);
+}
+
+path {
+transform: scale(0.8);
+} */
+
+circle.active{
+transform: scale(0.5);
+}
 
 .links line {
   stroke: #aaa;
@@ -112,13 +166,14 @@ div#handle {
     fill: aqua;
 }
 
-
+/* ------- param<61>tre de la carte ------- */
 
 svg {
     position: absolute;
     left: 0; top: 0; right: 0; bottom: 0;
     font: 10px sans-serif;
-    transform: scale(3);
+    /* C'est bon j'ai trouve, c'est ce tranform qui change la taille de l'affichage de la carte*/
+    transform: scale(1.5);
 }
 
 @media only screen and (max-width: 320px) {
@@ -133,10 +188,12 @@ svg g.page {
     cursor: pointer;
 }
 
+ /* texte des noeud */
 svg g.page text {
     visibility: hidden;
     fill: var(--color-a);
-    font: 13px Combined;
+    font: 10px Combined;
+    max-width: 20%;
 }
 
 svg g.active text {
@@ -190,7 +247,7 @@ use {
 }
 
 .active text {
-    stroke: white;
+    stroke: var(--bg);
     stroke-width: 1px;
     paint-order: stroke;
     fill: var(--color-b) !important;
@@ -205,7 +262,7 @@ use {
 
 
 
-/* Categories */
+/* --------- Categories ------- */
 
 @media only screen and (max-width: 600px) {
 	#page {
@@ -256,7 +313,8 @@ use {
     position: absolute;
     left: 10px;
     bottom: 10px;
-    background: #FFFFFFFF;
+    background: white; 
+    color: black;
     border-radius: 24px;
     padding: 10px;
     font-size: 12px;
@@ -323,7 +381,8 @@ use {
   border: none;
 }
 
-/* MEDIAWIKI PAGE */
+/* ------- MEDIAWIKI PAGE ------- */
+
 .header-container {
   display: none !important;
 }
@@ -340,7 +399,7 @@ a.talk {
 }
 
 
-/* control positioning */
+/* ------- control positioning ------- */
 
 .leaflet-control {
   position: relative;
@@ -354,7 +413,7 @@ a.talk {
   clear: both;
   }
 
-/* general toolbar styles */
+/* ------- general toolbar styles ------- */
 
 .leaflet-bar {
   box-shadow: 0 1px 5px rgba(0,0,0,0.65);
@@ -395,18 +454,19 @@ a.talk {
   }
 
 
-/* zoom controls */
+/* ------- zoom controls -------- */
 
 .zoom-controls {
   position: absolute;
-  left: 10px;
-  top: 10px;
+  /* changed from left top to bottom right */
+  right: 10px;
+  bottom: 10px;
   z-index: 10;
 }
 
 #specialclosediv {
   position: absolute;
-  left: 10px;
+  left: 25px;
   top: 10px;
   z-index: 10000;
   box-shadow: 0 3px 3px 3px var(--color-a-shadow);
@@ -471,12 +531,35 @@ svg {
 
 }
 
+/* ------- Menu d<>pliant ------- */
+.button-style {
+  box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+  background-color: white;
+  font-family: Vega;
+  font-size: 12px;
+  padding: 6px 2px;
+  cursor: pointer;
+  color: black;
+
+    border-radius: 24px;
+}
+
+a.button-style {
+	padding:8px;
+	text-decoration:none;
+}
+
+
+
 #specialselectdiv {
   position: absolute;
-  bottom: 10px;
-  right: 20px;
+  /* changement des valeur sde bottom right a top left*/
+  top: 8px;
+  left: 25px;
   z-index: 10000;
-}
+  background: white;
+  }
+  
 #specialselectdiv select {
   box-shadow: 0 3px 3px 3px var(--color-a-shadow);
   background-color: white;
@@ -485,6 +568,7 @@ svg {
   padding: 6px 2px;
   text-transform: uppercase;
   cursor: pointer;
+  color: black;
 }