/* ============================================================ Metro Target Customers — style.css Design system inspiré de Projet-RP / Metro Center (KEYENCE) Polices : Manrope + Space Grotesk — chargées via dans le (preconnect + stylesheet) pour éviter le render-blocking en cascade provoqué par @import. ============================================================ */ /* ============================================================ VARIABLES ============================================================ */ :root { --red: #e50012; --red-2: #ff2c40; --ink: #0f1524; --muted: #5b6478; --bg: #f7f8fc; --card: #ffffff; --border: #e7eaf1; --ease: cubic-bezier(.2,.7,.2,1); --t: .22s var(--ease); --sidebar-w: 288px; --right-w: 360px; --header-h: 58px; --radius: 14px; --shadow-sm: 0 2px 8px rgba(15,21,36,.07); --shadow-md: 0 8px 24px rgba(15,21,36,.10); --shadow-lg: 0 18px 48px rgba(15,21,36,.14); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: "Manrope", -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } /* ============================================================ HEADER ============================================================ */ /* Bouton Accueil unifié (style harmonisé avec presentations/) */ .home-btn { position: fixed; top: 14px; left: 14px; z-index: 1000; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #4a4a4a; font-weight: 700; font-size: 13.5px; border: 1px solid #e5e5e5; background: #fff; border-radius: 999px; padding: 10px 18px; min-height: 44px; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: border-color .2s ease, color .2s ease, transform .2s ease; } .home-btn:hover { border-color: #E60012; color: #E60012; transform: translateX(-2px); } .home-btn:active { transform: scale(.97); } /* Responsive : compresser le bouton sur petit écran */ @media (max-width: 600px) { .home-btn { padding: 8px 12px; font-size: 12.5px; min-height: 40px; } #main-header { padding: 0 12px 0 110px; } /* Cacher les éléments secondaires pour éviter le chevauchement avec le brand centré */ #territory-filter-container, #status-indicator { display: none; } #btn-hard-refresh { right: 10px; width: 32px; height: 32px; font-size: 16px; } .header-kn-logo { height: 18px; } #main-header h1 { font-size: 0.92em; white-space: nowrap; } } @media (max-width: 380px) { .home-btn { padding: 7px 10px; font-size: 12px; gap: 6px; } #main-header { padding: 0 10px 0 96px; } .header-kn-logo { height: 16px; } #main-header h1 { font-size: 0.82em; } } #main-header { height: var(--header-h); flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 500; padding: 0 20px 0 140px; /* +140px à gauche pour le bouton Accueil flottant */ background: radial-gradient(ellipse 60% 80% at 85% 50%, rgba(229,0,18,.18), transparent 55%), linear-gradient(135deg, #0a0e1a 0%, #131b30 60%, #0a0e1a 100%); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 4px 20px rgba(10,14,26,.4); } #main-header::after { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .header-brand { display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 1; position: relative; } .header-kn-logo { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); } #main-header h1 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 1.1em; font-weight: 800; letter-spacing: -.018em; color: #fff; z-index: 1; position: relative; } /* Indicateur mode / timer */ #status-indicator { position: absolute; right: 68px; top: 50%; transform: translateY(-50%); z-index: 2; text-align: right; line-height: 1.35; } #mode-status { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .04em; text-transform: uppercase; } #status-indicator.diaporama-actif #mode-status { color: #fbbf24; } #timer-status { font-size: 10.5px; color: rgba(255,255,255,.3); } /* Bouton refresh */ #btn-hard-refresh { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; width: 34px; height: 34px; font-size: 18px; color: rgba(255,255,255,.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t); z-index: 2; box-shadow: none; padding: 0; } #btn-hard-refresh:hover { background: rgba(229,0,18,.22); border-color: var(--red); color: #fff; transform: translateY(-50%) rotate(360deg); } /* ============================================================ FILTRE TERRITOIRES ============================================================ */ #territory-filter-container { position: absolute; left: 128px; top: 50%; transform: translateY(-50%); z-index: 10; } #btn-territory-dropdown { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 16px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); cursor: pointer; white-space: nowrap; transition: var(--t); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; letter-spacing: .03em; } #btn-territory-dropdown:hover { background: rgba(229,0,18,.22); border-color: var(--red); color: #fff; } #territory-dropdown-menu { position: fixed; top: calc(var(--header-h) + 8px); left: 128px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px; min-width: 220px; max-height: 420px; overflow-y: auto; z-index: 100000; } #territory-checkboxes { display: flex; flex-direction: column; gap: 3px; } #territory-checkboxes label { display: flex; align-items: center; padding: 5px 8px; cursor: pointer; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ink); transition: background var(--t); } #territory-checkboxes label:hover { background: var(--bg); } #territory-checkboxes input[type="checkbox"] { margin-right: 8px; cursor: pointer; accent-color: var(--red); } /* ============================================================ LAYOUT ============================================================ */ #main-content { flex-grow: 1; display: flex; overflow: hidden; } /* ============================================================ SIDEBAR ============================================================ */ #sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border); padding: 12px 10px; overflow-y: auto; position: relative; z-index: 100; } .sidebar-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 13px; margin-bottom: 7px; } .sidebar-section h2 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } #controls { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 8px; margin-bottom: 7px; } #controls h2 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; } /* Filtre IM/WM/XM */ #global-line-filter-container { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } #global-line-filter-container .filter-label { font-size: 10.5px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; } #global-line-filter-container label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: #fff; transition: var(--t); } #global-line-filter-container label:hover { border-color: var(--red); } #global-line-filter-container input[type="checkbox"] { accent-color: var(--red); cursor: pointer; } /* Boutons */ button { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; transition: var(--t); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-sm); margin: 3px 2px; } button:hover { border-color: var(--red); color: var(--red); background: rgba(229,0,18,.04); box-shadow: 0 3px 10px rgba(229,0,18,.12); transform: translateY(-1px); } button.active { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 14px rgba(229,0,18,.32); } button.active:hover { background: var(--red-2); color: #fff; transform: translateY(-1px); } /* Filtres */ .filter-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; } .filter-group > strong { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .filter-group label { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font-weight: 500; transition: background var(--t); } .filter-group label:hover { background: var(--bg); } .filter-group input[type="radio"], .filter-group input[type="checkbox"] { accent-color: var(--red); cursor: pointer; } .filter-group select { margin-top: 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: "Manrope", sans-serif; font-size: 12px; background: #fff; cursor: pointer; width: 100%; color: var(--ink); } #project-filters, #sales-filters, #visit-filters, #joint-call-filters { display: none; } /* Recherche */ #client-search-container { margin-bottom: 6px; } #client-search { width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-family: "Manrope", sans-serif; font-size: 12.5px; color: var(--ink); background: var(--card); outline: none; transition: border-color var(--t), box-shadow var(--t); } #client-search:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,0,18,.1); } /* Select commercial */ #salesperson-filter-container { margin-bottom: 8px; } #salesperson-filter { width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-family: "Manrope", sans-serif; font-size: 12.5px; color: var(--ink); background: var(--card); outline: none; cursor: pointer; transition: border-color var(--t), box-shadow var(--t); } #salesperson-filter:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,0,18,.1); } /* Stats globales */ #global-stats-content p { margin: 4px 0; font-size: 12px; font-weight: 500; color: var(--muted); display: flex; justify-content: space-between; } #global-stats-content p strong { color: var(--ink); font-weight: 700; } #global-stats-content hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; } #context-info-content p { font-size: 12.5px; color: var(--muted); } #context-info-content p strong { color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 800; } /* Détails client */ #selected-info-placeholder { color: var(--muted); font-style: italic; font-size: 12.5px; } #selected-info-content h3 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 6px; } #selected-info-content h4 { font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; } #selected-info-content p { margin: 3px 0; font-size: 12px; font-weight: 500; color: var(--muted); } #selected-info-content p strong { color: var(--ink); font-weight: 700; } #selected-info-content ul { margin: 0; padding-left: 14px; } #selected-info-content li { margin: 4px 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; } #selected-info-content a { color: #2563eb; } .sales-line-label { display: inline-block; padding: 2px 7px; margin-right: 4px; font-size: 10px; font-weight: 800; border-radius: 999px; vertical-align: middle; letter-spacing: .03em; } /* ============================================================ CARTE ============================================================ */ #map-container { flex-grow: 1; height: 100%; position: relative; z-index: 1; overflow: visible !important; } #map { height: 100%; width: 100%; } /* ============================================================ PANNEAU DROIT (Projets / Ventes / Visites / Relancer / JointCalls) ============================================================ */ #bandeau-projets-recents, #bandeau-joint-calls { width: var(--right-w); flex-shrink: 0; background: var(--card); border-left: 1px solid var(--border); padding: 16px 14px; overflow-y: auto; position: relative; z-index: 100; } #bandeau-projets-recents h2, #bandeau-joint-calls h2 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin: 0 0 12px; } #bandeau-projets-recents ul, #bandeau-joint-calls ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } #bandeau-projets-recents li, #bandeau-joint-calls li { background: var(--bg); border: 1px solid var(--border); padding: 10px 12px; border-radius: 12px; font-size: 12.5px; display: flex; align-items: flex-start; cursor: pointer; transition: transform var(--t), box-shadow var(--t), border-color var(--t); box-shadow: var(--shadow-sm); } #bandeau-projets-recents li:hover, #bandeau-joint-calls li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(229,0,18,.25); } .etiquette-salesline { font-weight: 800; padding: 3px 8px; margin-right: 8px; border-radius: 999px; font-size: 10px; flex-shrink: 0; letter-spacing: .04em; } /* ============================================================ MARQUEURS LEAFLET ============================================================ */ .custom-marker { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06); } /* Client KF Core : losange (carré pivoté 45°). On garde le liseré blanc et l'ombre du marqueur rond — seule la forme change. La couleur de fond continue de coder la donnée (visites / projets / ventes). */ .custom-marker--core { border-radius: 2px; transform: rotate(45deg); } .leaflet-control.info.legend { background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-md); font-family: "Manrope", sans-serif; font-size: 12px; line-height: 2; } .leaflet-control.info.legend h4 { font-family: "Space Grotesk", sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .leaflet-control.info.legend i { width: 12px; height: 12px; float: left; margin-right: 8px; margin-top: 4px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.1); } /* ============================================================ POPUP FLOTTANTE ============================================================ */ .custom-floating-popup { position: fixed; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 999999; min-width: 250px; max-width: 380px; display: none; font-family: "Manrope", sans-serif; animation: popupIn .15s var(--ease); } @keyframes popupIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } } .custom-floating-popup.popup-closing { animation: popupOut .15s var(--ease) forwards; } @keyframes popupOut { from { opacity:1; } to { opacity:0; } } .simple-popup-content { padding: 13px 36px 13px 13px; } .simple-popup-header { margin-bottom: 8px; } .simple-popup-title { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 3px; line-height: 1.3; font-family: "Space Grotesk", sans-serif; } .simple-popup-id { font-size: 12px; color: #2563eb; text-decoration: underline; font-weight: 600; } .simple-popup-info { margin-bottom: 8px; font-size: 12px; color: var(--muted); line-height: 1.65; } .simple-popup-info div { margin: 2px 0; } .simple-popup-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .simple-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; letter-spacing: .03em; } .popup-close-btn { position: absolute; top: 9px; right: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; transition: var(--t); } .popup-close-btn:hover { background: var(--red); color: #fff; border-color: var(--red); } /* ============================================================ PANNEAU VISITES PLANIFIÉES ============================================================ */ #panneau-planifie, #panneau-silences { width: var(--right-w); flex-shrink: 0; background: var(--card); border-left: 1px solid var(--border); overflow-y: auto; position: relative; z-index: 100; display: flex; flex-direction: column; } #panneau-planifie-content { padding: 0 14px 16px; overflow-y: auto; flex: 1; } #panneau-silences-content { padding: 0 14px 16px; overflow-y: auto; flex: 1; } .planned-week-block { margin-bottom: 18px; } .planned-week-title { background: linear-gradient(135deg, #0a0e1a 0%, #1a2340 100%); color: rgba(255,255,255,.85); padding: 7px 14px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; border-radius: 10px 10px 0 0; margin: 10px 0 0; font-family: "Space Grotesk", sans-serif; } .planned-day-group { border-left: 3px solid var(--red); margin: 6px 0 0 2px; padding-left: 10px; } .planned-day-title { font-size: 11px; font-weight: 800; color: var(--muted); margin: 6px 0 4px; text-transform: capitalize; letter-spacing: .04em; } .planned-visit-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 5px; font-size: 12px; cursor: pointer; transition: transform var(--t), box-shadow var(--t), border-color var(--t); border-left: 4px solid transparent; } .planned-visit-card:hover { transform: translateX(2px); box-shadow: var(--shadow-md); border-color: rgba(229,0,18,.25); } .planned-visit-card.type-virtu { border-left-color: #7c3aed; } .planned-visit-card.type-sales { border-left-color: #2563eb; } .planned-visit-company { font-weight: 800; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Space Grotesk", sans-serif; font-size: 12px; } .planned-visit-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--muted); } .planned-badge-purpose { display: inline-block; background: #eff6ff; color: #1d4ed8; border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700; } .planned-badge-purpose.virtu { background: #f5f3ff; color: #6d28d9; } .planned-badge-salesline { display: inline-block; border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 800; } .planned-sales-name { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .planned-territory-tag { display: inline-block; background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 600; } .planned-stats-bar { background: linear-gradient(135deg, #0a0e1a 0%, #131b30 100%); color: #fff; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; flex-shrink: 0; font-family: "Space Grotesk", sans-serif; } .planned-stats-bar strong { font-size: 20px; font-weight: 800; } .planned-stats-sub { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 2px; } .planned-filter-bar { background: var(--card); padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 5px; flex-wrap: wrap; align-items: center; font-size: 12px; flex-shrink: 0; } .planned-filter-bar label { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-weight: 600; font-size: 11px; color: var(--muted); transition: var(--t); white-space: nowrap; } .planned-filter-bar label:hover { border-color: var(--red); color: var(--red); } .planned-filter-bar input { accent-color: var(--red); cursor: pointer; } /* ============================================================ MODALE DE CHARGEMENT ============================================================ */ #loading-modal { display: none; position: fixed; z-index: 200000; inset: 0; background: rgba(10,14,26,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); justify-content: center; align-items: center; } #loading-content { background: var(--card); padding: 36px 52px; border-radius: 20px; text-align: center; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } #loading-content p { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted); } #loading-content p:first-of-type { color: var(--ink); font-weight: 700; } .spinner { border: 4px solid var(--bg); border-top: 4px solid var(--red); border-radius: 50%; width: 44px; height: 44px; animation: spin .8s linear infinite; margin: 0 auto 18px; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ SCROLLBARS ============================================================ */ #sidebar::-webkit-scrollbar, #bandeau-projets-recents::-webkit-scrollbar, #bandeau-joint-calls::-webkit-scrollbar, #panneau-planifie-content::-webkit-scrollbar, #panneau-silences-content::-webkit-scrollbar, #territory-dropdown-menu::-webkit-scrollbar { width: 4px; } #sidebar::-webkit-scrollbar-track, #bandeau-projets-recents::-webkit-scrollbar-track, #bandeau-joint-calls::-webkit-scrollbar-track, #panneau-planifie-content::-webkit-scrollbar-track, #panneau-silences-content::-webkit-scrollbar-track, #territory-dropdown-menu::-webkit-scrollbar-track { background: transparent; } #sidebar::-webkit-scrollbar-thumb, #bandeau-projets-recents::-webkit-scrollbar-thumb, #bandeau-joint-calls::-webkit-scrollbar-thumb, #panneau-planifie-content::-webkit-scrollbar-thumb, #panneau-silences-content::-webkit-scrollbar-thumb, #territory-dropdown-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { #bandeau-projets-recents, #bandeau-joint-calls, #panneau-planifie, #panneau-silences { display: none !important; } } @media (max-width: 768px) { #main-content { flex-direction: column; } #sidebar { width: 100%; max-height: 40%; order: 1; } #map-container { order: 2; } #btn-territory-dropdown { display: none; } } /* ============================================================ SÉLECTEUR DE POPULATION (Métro / KF Core / Les deux) ============================================================ */ .pop-filter-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } #population-filter { display: flex; gap: 3px; background: #eef0f6; border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 12px; } #population-filter .pop-btn { flex: 1 1 0; min-width: 0; border: none; background: transparent; border-radius: 8px; padding: 8px 6px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; transition: var(--t); } #population-filter .pop-btn:hover:not(.active) { color: var(--ink); background: rgba(0,0,0,.04); } #population-filter .pop-btn.active { background: var(--red); color: #fff; box-shadow: 0 2px 6px rgba(229,0,18,.32); } /* Badges population (popups carte + détails client) */ .pop-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; } .pop-tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; } .pop-tag--metro { background: rgba(229,0,18,.12); color: var(--red); } .pop-tag--core { background: #fff3cf; color: #8a6d00; }