diff --git a/custom.css b/custom.css index ac7e1da..a49c1f9 100644 --- a/custom.css +++ b/custom.css @@ -34,127 +34,86 @@ header nav a:hover { } /* Ajuster le positionnement des labels de quadrants pour éviter le chevauchement avec les cercles */ -/* 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: 10px !important; - max-width: 170px !important; - width: 170px !important; +/* Approche simplifiée avec sélecteurs plus génériques */ +div[class*="labels"] > div, +div[class*="Label"] { + max-width: 200px !important; + padding: 12px !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; - font-size: 13px !important; } -/* Réduire la taille du texte dans les labels */ -div[class*="labels"] > div[class*="label"] .title, -div[class*="Label_label"] .title, -div[class*="label"][class*="position"] .title { - font-size: 16px !important; - margin-bottom: 8px !important; -} - -div[class*="labels"] > div[class*="label"] .description, -div[class*="Label_label"] .description, -div[class*="label"][class*="position"] .description { - font-size: 12px !important; - line-height: 1.4 !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: 40px !important; - top: 40px !important; +/* Quadrant 1 (en haut à gauche) */ +div[class*="labels"] > div[class*="position-1"], +div[class*="position-1"] { + left: 50px !important; + top: 50px !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: 40px !important; - top: 40px !important; +/* Quadrant 2 (en haut à droite) */ +div[class*="labels"] > div[class*="position-2"], +div[class*="position-2"] { + right: 50px !important; + top: 50px !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: 40px !important; - bottom: 40px !important; +/* Quadrant 3 (en bas à gauche) */ +div[class*="labels"] > div[class*="position-3"], +div[class*="position-3"] { + left: 50px !important; + bottom: 50px !important; right: auto !important; top: auto !important; - margin: 0 !important; } -/* Quadrant 4 (en bas à droite) - Technologies Émergentes */ -/* Positionné beaucoup plus haut pour laisser de la place à la légende en bas */ -div[class*="labels"] > div[class*="label"][class*="position-4"], -[class*="Label_label"][class*="position-4"], -div[class*="label"][class*="position-4"] { - right: 40px !important; - bottom: 220px !important; +/* Quadrant 4 (en bas à droite) - Positionné plus haut pour laisser place à la légende */ +div[class*="labels"] > div[class*="position-4"], +div[class*="position-4"] { + right: 50px !important; + bottom: 200px !important; left: auto !important; top: auto !important; - margin: 0 !important; } /* Ajuster la légende pour éviter le chevauchement avec les cercles et le quadrant 4 */ -ul[class*="Legend_legend"], +ul[class*="Legend"], ul[class*="legend"] { - z-index: 2 !important; - padding: 10px 14px !important; + z-index: 10 !important; + padding: 12px 16px !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; - min-width: 170px !important; - max-width: 180px !important; - font-size: 12px !important; + max-width: 200px !important; + position: absolute !important; } -ul[class*="Legend_legend"] li, -ul[class*="legend"] li { - margin-bottom: 6px !important; - font-size: 12px !important; - line-height: 1.4 !important; -} - -/* Sur les grands écrans, positionner la légende en bas à droite, bien en dessous du quadrant 4 */ +/* Sur les grands écrans, positionner la légende en bas à droite */ @media (min-width: 1200px) { - ul[class*="Legend_legend"], + ul[class*="Legend"], ul[class*="legend"] { - right: 40px !important; - top: auto !important; - bottom: 40px !important; + right: 50px !important; + bottom: 50px !important; left: auto !important; + top: auto !important; transform: none !important; - margin: 0 !important; - position: absolute !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"], ul[class*="legend"] { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; - bottom: 40px !important; + bottom: 50px !important; top: auto !important; - margin: 0 !important; - position: absolute !important; } }