diff --git a/custom.css b/custom.css index 9877c73..25ff40a 100644 --- a/custom.css +++ b/custom.css @@ -34,91 +34,98 @@ header nav a:hover { } /* CORRECTION RADICALE DES LABELS DE QUADRANTS */ -/* Réduire drastiquement la taille et repositionner loin des cercles */ -[class*="Radar_radar"] [class*="Label_label"] { - width: 160px !important; - max-width: 160px !important; +/* Labels compacts mais lisibles, très éloignés des cercles */ +[class*="Radar_radar"] [class*="Label_label"], +[class*="Label_label"] { + width: 180px !important; + max-width: 180px !important; min-height: auto !important; - padding: 10px !important; + padding: 12px !important; background: rgba(26, 77, 58, 0.95) !important; - border-radius: 6px !important; + border-radius: 8px !important; backdrop-filter: blur(4px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } -/* Réduire la taille du texte */ +/* Taille de texte lisible */ [class*="Label_label"] [class*="title"], [class*="Label_label"] h3 { - font-size: 14px !important; - margin: 0 0 6px 0 !important; - line-height: 1.2 !important; + font-size: 15px !important; + margin: 0 0 8px 0 !important; + line-height: 1.3 !important; } [class*="Label_label"] [class*="description"], [class*="Label_label"] p { - font-size: 11px !important; - line-height: 1.3 !important; + font-size: 12px !important; + line-height: 1.4 !important; margin: 0 !important; } [class*="Label_label"] [class*="header"] { - font-size: 10px !important; - padding: 6px 0 !important; - margin: 0 0 8px !important; + font-size: 11px !important; + padding: 8px 0 !important; + margin: 0 0 10px !important; } -/* Quadrant 1 (en haut à gauche) */ -[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-1"] { - left: 60px !important; - top: 60px !important; +/* Quadrant 1 (en haut à gauche) - TRÈS ÉLOIGNÉ */ +[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-1"], +[class*="Label_position-1"] { + left: 10px !important; + top: 10px !important; } -/* Quadrant 2 (en haut à droite) */ -[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-2"] { - right: 60px !important; - top: 60px !important; +/* Quadrant 2 (en haut à droite) - TRÈS ÉLOIGNÉ */ +[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-2"], +[class*="Label_position-2"] { + right: 10px !important; + top: 10px !important; left: auto !important; } -/* Quadrant 3 (en bas à gauche) */ -[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-3"] { - left: 60px !important; - bottom: 60px !important; +/* Quadrant 3 (en bas à gauche) - TRÈS ÉLOIGNÉ */ +[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-3"], +[class*="Label_position-3"] { + left: 10px !important; + bottom: 10px !important; top: auto !important; } -/* Quadrant 4 (en bas à droite) - Remonté pour la légende */ -[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-4"] { - right: 60px !important; - bottom: 160px !important; +/* Quadrant 4 (en bas à droite) - TRÈS REMONTÉ pour la légende */ +[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-4"], +[class*="Label_position-4"] { + right: 10px !important; + bottom: 240px !important; left: auto !important; top: auto !important; } -/* Ajuster la légende - positionnée loin en bas à droite */ -[class*="Radar_radar"] [class*="Legend_legend"] { +/* Ajuster la légende - positionnée tout en bas à droite */ +[class*="Radar_radar"] [class*="Legend_legend"], +[class*="Legend_legend"] { z-index: 100 !important; - padding: 10px 14px !important; + padding: 12px 16px !important; background: rgba(26, 77, 58, 0.95) !important; - border-radius: 6px !important; + border-radius: 8px !important; backdrop-filter: blur(4px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; - max-width: 160px !important; + max-width: 180px !important; position: absolute !important; - font-size: 11px !important; + font-size: 12px !important; } [class*="Legend_legend"] li { - font-size: 11px !important; - line-height: 1.4 !important; - margin-bottom: 4px !important; + font-size: 12px !important; + line-height: 1.5 !important; + margin-bottom: 6px !important; } -/* Sur les grands écrans, positionner la légende en bas à droite */ +/* Sur les grands écrans, positionner la légende tout en bas à droite */ @media (min-width: 1200px) { - [class*="Radar_radar"] [class*="Legend_legend"] { - right: 60px !important; - bottom: 60px !important; + [class*="Radar_radar"] [class*="Legend_legend"], + [class*="Legend_legend"] { + right: 10px !important; + bottom: 10px !important; left: auto !important; top: auto !important; transform: none !important; @@ -127,11 +134,12 @@ header nav a:hover { /* Sur les écrans moyens, centrer la légende en bas */ @media (min-width: 768px) and (max-width: 1199px) { - [class*="Radar_radar"] [class*="Legend_legend"] { + [class*="Radar_radar"] [class*="Legend_legend"], + [class*="Legend_legend"] { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; - bottom: 60px !important; + bottom: 10px !important; top: auto !important; } }