From e830bdb69c32a2059c5219e64eb1de978054d04f Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Wed, 3 Dec 2025 17:11:28 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20repositionner=20les=20labels=20de=20quad?=
 =?UTF-8?q?rants=20et=20la=20l=C3=A9gende=20pour=20=C3=A9viter=20tout=20ch?=
 =?UTF-8?q?evauchement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Réduction de la largeur des labels à 180px
- Positionnement à 10px des bords (au lieu de 30px) pour être vraiment en dehors des cercles
- Les labels sont maintenant complètement en dehors de la zone des cercles (rayon max 400px)
- Ajustement de la légende avec position fixe en bas à droite
- Ajout de box-shadow pour améliorer la visibilité
- Sélecteurs CSS plus spécifiques pour garantir l'application des styles
---
 custom.css | 69 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/custom.css b/custom.css
index e65e0f7..7ac35a3 100644
--- a/custom.css
+++ b/custom.css
@@ -34,73 +34,100 @@ header nav a:hover {
 }
 
 /* Ajuster le positionnement des labels de quadrants pour éviter le chevauchement avec les cercles */
-/* Les labels doivent être positionnés en dehors de la zone des cercles concentriques */
-[class*="Label_label"],
+/* Le radar fait 800px, les cercles ont un rayon max de 400px (50% du centre) */
+/* Les labels doivent être positionnés à au moins 450px du centre, donc à 50px+ des bords */
+div[class*="labels"] > div[class*="label"],
+div[class*="Label_label"],
 div[class*="label"][class*="position"] {
   z-index: 1 !important;
   padding: 12px !important;
-  max-width: 200px !important;
-  background: rgba(26, 77, 58, 0.9) !important;
+  max-width: 180px !important;
+  width: 180px !important;
+  background: rgba(26, 77, 58, 0.95) !important;
   border-radius: 8px !important;
   backdrop-filter: blur(4px) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
 }
 
 /* Quadrant 1 (en haut à gauche) - Technologies Différenciantes */
+div[class*="labels"] > div[class*="label"][class*="position-1"],
 [class*="Label_label"][class*="position-1"],
 div[class*="label"][class*="position-1"] {
-  left: 30px !important;
-  top: 30px !important;
+  left: 10px !important;
+  top: 10px !important;
+  right: auto !important;
+  bottom: auto !important;
   margin: 0 !important;
 }
 
 /* Quadrant 2 (en haut à droite) - Technologies de Commodité */
+div[class*="labels"] > div[class*="label"][class*="position-2"],
 [class*="Label_label"][class*="position-2"],
 div[class*="label"][class*="position-2"] {
-  right: 30px !important;
-  top: 30px !important;
+  right: 10px !important;
+  top: 10px !important;
   left: auto !important;
+  bottom: auto !important;
   margin: 0 !important;
 }
 
 /* Quadrant 3 (en bas à gauche) - Technologies à Risque */
+div[class*="labels"] > div[class*="label"][class*="position-3"],
 [class*="Label_label"][class*="position-3"],
 div[class*="label"][class*="position-3"] {
-  left: 30px !important;
-  bottom: 30px !important;
+  left: 10px !important;
+  bottom: 10px !important;
+  right: auto !important;
   top: auto !important;
   margin: 0 !important;
 }
 
 /* Quadrant 4 (en bas à droite) - Technologies Émergentes */
+div[class*="labels"] > div[class*="label"][class*="position-4"],
 [class*="Label_label"][class*="position-4"],
 div[class*="label"][class*="position-4"] {
-  right: 30px !important;
-  bottom: 30px !important;
+  right: 10px !important;
+  bottom: 10px !important;
   left: auto !important;
   top: auto !important;
   margin: 0 !important;
 }
 
 /* Ajuster la légende pour éviter le chevauchement avec les cercles */
-[class*="Legend_legend"],
+ul[class*="Legend_legend"],
 ul[class*="legend"] {
   z-index: 1 !important;
-  padding: 15px 20px !important;
-  margin-right: 30px !important;
-  margin-bottom: 30px !important;
-  background: rgba(26, 77, 58, 0.85) !important;
+  padding: 12px 16px !important;
+  background: rgba(26, 77, 58, 0.95) !important;
   border-radius: 8px !important;
   backdrop-filter: blur(4px) !important;
-  min-width: 200px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  min-width: 180px !important;
+  max-width: 200px !important;
 }
 
 /* Sur les grands écrans, ajuster la position de la légende */
 @media (min-width: 1200px) {
-  [class*="Legend_legend"],
+  ul[class*="Legend_legend"],
   ul[class*="legend"] {
-    right: 20px !important;
+    right: 10px !important;
     top: auto !important;
-    bottom: 50px !important;
+    bottom: 10px !important;
+    left: auto !important;
     transform: none !important;
+    margin: 0 !important;
+  }
+}
+
+/* Sur les écrans moyens, centrer la légende en bas */
+@media (min-width: 768px) and (max-width: 1199px) {
+  ul[class*="Legend_legend"],
+  ul[class*="legend"] {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+    bottom: 10px !important;
+    top: auto !important;
+    margin: 0 !important;
   }
 }