/* Comic Neue : remplaçant moderne de Comic Sans, auto-hébergé (OFL) → rendu identique sur mobile/desktop et disponible offline (cf. PRECACHE sw.js). Évite le fallback `cursive` système (immonde) quand Comic Sans est absent. */ @font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/comic-neue-400.woff2') format('woff2'); } @font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/comic-neue-700.woff2') format('woff2'); } :root { /* Polices : --font-ui = données/texte (sans propre, lisible partout) ; --font-brand = logo + titres (Comic Neue, identité ludique BlitzPAL). */ --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-brand: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif; --red: #C41E3A; --red-dim: #8B1228; --red-glow:#C41E3A44; --teal: var(--teal); --teal-dim: var(--teal-dim); --teal-glow: var(--teal)20; --blue: #4A90D9; --purple: #BB6BD9; --bg: #0D0D0F; --bg2: #141418; --bg3: #1C1C22; --bg4: #242430; --border: #2A2A35; --text: #E8E8F0; --muted: #7878A0; --green: #2ECC71; --orange: #F39C12; --white: #FFFFFF; /* Typography */ --font-xs: 0.65rem; --font-sm: 0.72rem; --font-base: 0.82rem; --font-md: 0.9rem; /* Border radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* Spacing */ --gap-sm: 8px; --gap-md: 14px; --gap-lg: 24px; } body.light { --bg: #F5F0EB; --bg2: #FFFFFF; --bg3: #EDE8E3; --bg4: #E0DBD6; --border: #D0C8C0; --text: #1A1A1A; --muted: #7A6F68; --white: #1A1A1A; } body.light .login-bg { background: radial-gradient(ellipse at 20% 50%, #C41E3A12 0%, transparent 60%); } body.light .login-grid { opacity: 0.08; } body.light .login-box { box-shadow: 0 8px 40px rgba(196,30,58,0.12); } body.light .hdr { box-shadow: 0 1px 8px rgba(0,0,0,0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.2s, color 0.2s; } #loginScreen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 1000; } .login-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 20% 50%, #C41E3A18 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, #C41E3A08 0%, transparent 60%); } .login-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.3; } .login-box { position: relative; width: 420px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; box-shadow: 0 0 60px var(--red-glow), 0 0 120px #C41E3A11; } .login-logo { text-align: center; margin-bottom: 32px; } .login-logo svg { width: 64px; height: 64px; margin-bottom: 12px; } .login-logo h1 { font-family: var(--font-brand); font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: 0.5px; } .login-logo p { color: var(--muted); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; } .login-field { margin-bottom: 16px; } .login-field label { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; } .login-field input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text); font-size: 0.9rem; transition: border-color 0.2s; } .login-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); } .login-btn { width: 100%; padding: 13px; background: var(--red); color: white; border: none; border-radius: var(--radius-md); font-family: var(--font-brand); font-size: 1rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; margin-top: 8px; transition: all 0.2s; } .login-btn:hover { background: var(--red-dim); box-shadow: 0 0 20px var(--red-glow); } .login-error { color: var(--red); font-size: 0.82rem; text-align: center; margin-top: 12px; display: none; } #app { display: none; flex-direction: column; min-height: 100vh; } .hdr { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .hdr-left { display: flex; align-items: center; gap: 16px; flex: 1; } .hdr-logo { display: flex; align-items: center; gap: 10px; } .hdr-logo svg { width: 32px; height: 32px; } .hdr-logo span { font-family: var(--font-brand); font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: 3px; } .nav-tabs { display: flex; gap: 4px; margin-left: 24px; flex: 1; align-items: center; } .nav-tab { padding: 6px 16px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s; border: 1px solid transparent; } .nav-tab:hover { color: var(--text); background: var(--bg3); } .nav-tab.active { color: var(--red); background: var(--bg3); border-color: var(--border); } .nav-tab.nav-more { margin-left: auto; position: relative; } .nav-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 200; padding: 4px; } .nav-dropdown.open { display: block; } .nav-dropdown-item { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text); font-size: 0.85rem; cursor: pointer; transition: background 0.15s; } .nav-dropdown-item:hover { background: var(--bg3); color: var(--red); } .hdr-right { display: flex; align-items: center; gap: 10px; } .user-badge { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); } .user-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; } .theme-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-size: 0.9rem; transition: all 0.15s; } .theme-btn:hover { border-color: var(--red); } .logout-btn { padding: 6px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; } .logout-btn:hover { border-color: var(--red); color: var(--red); } /* BlitzML géoloc widget (commercial home) */ .geo-widget { border-radius: var(--radius-md); background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #8E24AA 100%); color: #fff; margin-bottom: 18px; overflow: hidden; box-shadow: 0 6px 24px rgba(74,20,140,0.30); } .geo-widget-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; flex-wrap: wrap; } .geo-widget-title { display: flex; align-items: center; gap: 14px; } .geo-widget-robot { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); } .geo-widget-h1 { font-family: var(--font-brand); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.5px; } .geo-widget-h2 { font-size: 0.78rem; color: rgba(255,255,255,0.78); margin-top: 2px; } .geo-widget-actions { display: flex; align-items: center; gap: 10px; } .geo-widget-btn { padding: 8px 16px; border-radius: var(--radius-sm); background: #fff; color: #4A148C; border: none; cursor: pointer; font-family: var(--font-brand); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; transition: transform 0.15s, box-shadow 0.15s; } .geo-widget-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .geo-widget-content { display: flex; flex-direction: column; background: rgba(0,0,0,0.18); border-top: 1px solid rgba(255,255,255,0.10); } .geo-map-panel { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.10); display: flex; flex-direction: column; gap: 10px; position: relative; } .geo-map-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-brand); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.92); } .geo-map-legend-inline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.68rem; font-weight: 600; text-transform: none; letter-spacing: 0.5px; color: rgba(255,255,255,0.78); } .geo-map-legend-inline > span { display: inline-flex; align-items: center; gap: 5px; } .geo-map-legend-inline > span.legend-chip { cursor: pointer; user-select: none; padding: 2px 6px; border-radius: 10px; transition: opacity .15s, background .15s; } .geo-map-legend-inline > span.legend-chip:hover { background: rgba(255,255,255,0.12); } .geo-map-legend-inline > span.legend-chip.off { opacity: .38; text-decoration: line-through; } .geo-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.30); } .geo-dot.bucket-cur { background: #2ECC71; } .geo-dot.bucket-prev { background: #F1C40F; } .geo-dot.bucket-older { background: #E67E22; } .geo-dot.bucket-never { background: #95A5A6; } .geo-dot.bucket-user { background: #2980B9; box-shadow: 0 0 0 2px #fff; } .geo-dot.bucket-tour { background: #E67E22; box-shadow: 0 0 0 2px #fff; } /* ─── Panneau Tournée du jour ─────────────────────────────── */ .tournee-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; padding: 14px 18px; } @media (max-width: 960px) { .tournee-grid { grid-template-columns: 1fr; } } .tournee-panel { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid #E67E22; border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; color: #fff; align-self: flex-start; position: sticky; top: 70px; } .tournee-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .tournee-panel-title { font-family: var(--font-brand); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } .tournee-panel-sub { font-size: 0.74rem; color: rgba(255,255,255,0.72); margin-top: 2px; } .tournee-progress-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 80px; } .tournee-progress { width: 80px; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; } .tournee-progress-bar { height: 100%; background: linear-gradient(90deg, #2ECC71 0%, #58D68D 100%); transition: width 0.3s; } .tournee-progress-label { font-size: 0.7rem; font-weight: 700; } .tournee-empty { padding: 24px 8px; text-align: center; color: rgba(255,255,255,0.55); font-size: 0.78rem; line-height: 1.5; border: 1px dashed rgba(255,255,255,0.18); border-radius: 6px; } /* Recherche magasin → ajout direct tournée */ .tournee-search { position: relative; } .tournee-search-input { width: 100%; box-sizing: border-box; padding: 8px 10px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; color: #fff; font-size: 0.82rem; } .tournee-search-input::placeholder { color: rgba(255,255,255,0.5); } .tournee-search-input:focus { outline: none; border-color: rgba(230,126,34,0.7); } .tournee-search-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 280px; overflow-y: auto; } .tournee-search-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; } .tournee-search-item-name { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tournee-search-item-loc { font-size: 0.72rem; color: rgba(255,255,255,0.68); } .tournee-search-add { flex-shrink: 0; padding: 5px 9px; background: rgba(230,126,34,0.30); border: 1px solid rgba(230,126,34,0.55); border-radius: 5px; color: #fff; font-size: 0.74rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .tournee-search-add:hover { background: rgba(230,126,34,0.5); } .tournee-search-add.in-tour { background: rgba(46,204,113,0.25); border-color: rgba(46,204,113,0.5); cursor: default; } .tournee-search-empty { padding: 12px 8px; text-align: center; color: rgba(255,255,255,0.55); font-size: 0.76rem; } .tournee-list { display: flex; flex-direction: column; gap: 6px; } .tournee-step { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; transition: opacity 0.2s, background 0.2s; } .tournee-step.visited { opacity: 0.55; background: rgba(46,204,113,0.10); border-color: rgba(46,204,113,0.40); } .tournee-step.visited .tournee-step-name { text-decoration: line-through; } .tournee-step-num { background: #E67E22; color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: 0.9rem; font-weight: 700; } .tournee-step.visited .tournee-step-num { background: #27AE60; } .tournee-step-arrows { display: flex; flex-direction: column; gap: 1px; } .tournee-step-arrows button { width: 22px; height: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; cursor: pointer; font-size: 0.6rem; line-height: 1; padding: 0; border-radius: 3px; } .tournee-step-arrows button:hover:not(:disabled) { background: rgba(255,255,255,0.18); } .tournee-step-arrows button:disabled { opacity: 0.3; cursor: not-allowed; } .tournee-step-body { min-width: 0; } .tournee-step-name { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tournee-step-meta { font-size: 0.66rem; color: rgba(255,255,255,0.65); margin-top: 1px; } .tournee-step-actions { display: flex; flex-direction: column; gap: 3px; } .tournee-step-actions button { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); color: #fff; cursor: pointer; font-size: 0.62rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; white-space: nowrap; } .tournee-step-actions button.visit-btn:hover { background: rgba(46,204,113,0.50); border-color: #2ECC71; } .tournee-step-actions button.remove-btn:hover { background: rgba(196,30,58,0.50); border-color: var(--red); } .tournee-step.visited .visit-btn { background: rgba(46,204,113,0.30); } .tournee-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.10); } .tournee-btn { flex: 1; min-width: 110px; padding: 7px 10px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #fff; cursor: pointer; font-size: 0.72rem; font-weight: 600; border-radius: 5px; } .tournee-btn:hover { background: rgba(255,255,255,0.18); } .tournee-btn.primary { background: linear-gradient(135deg, #E67E22, #D35400); border-color: #D35400; } .tournee-btn.primary:hover { background: linear-gradient(135deg, #F39C12, #E67E22); } .tournee-btn.danger { background: rgba(196,30,58,0.25); border-color: rgba(196,30,58,0.50); } .tournee-btn.danger:hover { background: rgba(196,30,58,0.45); } /* Bouton "+ Ajouter" sur cards proximité */ .add-tour-btn { background: #E67E22 !important; color: #fff !important; border-color: #D35400 !important; } .add-tour-btn.in-tour { background: #27AE60 !important; border-color: #1E8449 !important; } /* Marker client (pastille couleur + badge robot BlitzML si suggestions) */ .map-marker { position: relative; width: 18px; height: 18px; pointer-events: auto; } .map-marker-dot { position: absolute; inset: 2px; border-radius: 50%; border: 1.5px solid #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.35); } .map-marker.has-prio .map-marker-dot { box-shadow: 0 0 0 2px rgba(196,30,58,0.45), 0 1px 4px rgba(0,0,0,0.35); } /* Marker logo enseigne : tuile logo cerclée par la couleur du bucket (récence) */ .map-marker-logo { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 2px var(--ring, #95A5A6), 0 1px 3px rgba(0,0,0,0.4); } .map-marker-logo .ens-logo-wrap { width: 22px !important; height: 22px !important; border-radius: 6px; box-shadow: none; } /* Leaflet force `max-width:none !important` sur toutes les img du marker-pane (cf. leaflet.css) → l'inline max-width de enseigneLogo est écrasé et le logo s'affiche à sa taille naturelle (carré "vide"/rogné). On re-contraint avec une spécificité supérieure + !important. */ .leaflet-marker-pane .map-marker-logo .ens-logo-wrap img { max-width: 18px !important; max-height: 18px !important; width: auto !important; height: auto !important; object-fit: contain; } .map-marker-logo.has-prio { box-shadow: 0 0 0 2px var(--ring, #95A5A6), 0 0 0 4px rgba(196,30,58,0.45), 0 1px 3px rgba(0,0,0,0.4); } .map-marker-bot { position: absolute; top: -8px; right: -10px; width: 18px; height: 18px; background: #8E24AA; border: 1.5px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.45); pointer-events: none; } .map-marker-bot.prio { background: #C41E3A; animation: ml-bot-pulse 1.8s ease-in-out infinite; } @keyframes ml-bot-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 0 rgba(196,30,58,0.65); } 50% { transform: scale(1.1); box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 6px rgba(196,30,58,0); } } /* Marker numéroté tournée sur la carte */ .tour-marker-icon { background: #E67E22; color: #fff; border: 3px solid #fff; border-radius: 50%; width: 32px !important; height: 32px !important; margin-left: -16px !important; margin-top: -16px !important; display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: 1.05rem; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,0.45); } .tour-marker-icon.visited { background: #27AE60; opacity: 0.7; } .leaflet-host { height: 460px; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.30); } .leaflet-host .leaflet-control-attribution { background: rgba(255,255,255,0.85); } /* Popups Leaflet : on garde le thème clair par défaut, lisible */ .leaflet-popup-content { font-size: 0.78rem; line-height: 1.4; } .leaflet-popup-content strong { color: #4A148C; } .france-map .dep { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.35); stroke-width: 0.6; transition: fill 0.15s, stroke 0.15s; cursor: default; } .france-map .dep.active { stroke: rgba(255,255,255,0.95); stroke-width: 1.1; cursor: pointer; } .france-map .dep:hover { fill: #fff !important; stroke: #fff; } .france-map .dep.lvl-1 { fill: rgba(255,255,255,0.18); } .france-map .dep.lvl-2 { fill: rgba(255,234,138,0.55); } .france-map .dep.lvl-3 { fill: rgba(255,179,71,0.75); } .france-map .dep.lvl-4 { fill: rgba(255,107,71,0.90); } .france-map .dep.lvl-5 { fill: #ff3d3d; } .france-map .client-marker { transition: transform 0.12s; transform-origin: center; transform-box: fill-box; } .france-map .client-marker:hover { transform: scale(1.7); filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); } .ens-logo-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.35); vertical-align: middle; } .ens-logo-wrap svg { display: block; } .ens-logo-wrap.ens-logo-img { background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.04); } .ens-logo-wrap.ens-logo-img img { display: block; } .geo-map-tooltip { position: absolute; background: rgba(0,0,0,0.92); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 0.78rem; pointer-events: none; z-index: 10; box-shadow: 0 4px 14px rgba(0,0,0,0.4); white-space: nowrap; min-width: 140px; } .geo-map-tooltip-name { font-weight: 700; margin-bottom: 4px; font-family: var(--font-brand); } .geo-map-tooltip-row { font-size: 0.72rem; color: rgba(255,255,255,0.78); display: flex; justify-content: space-between; gap: 12px; } .geo-map-tooltip-row strong { color: #fff; } .geo-map-legend { display: flex; align-items: center; gap: 8px; font-size: 0.66rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } .geo-map-legend-bar { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.18), #FFEA8A, #FFB347, #ff6B47, #ff3d3d); } .geo-widget-body { padding: 14px 20px 18px; } .geo-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .geo-client { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: 12px 14px; color: #fff; } .geo-client:hover { background: rgba(255,255,255,0.13); } .geo-client.is-dormant { background: rgba(255,255,255,0.04); opacity: 0.82; } .geo-client.is-dormant:hover { opacity: 1; } /* Buckets d'anciennete d'activite (Tournee du jour) */ .geo-bucket { margin-bottom: 16px; } .geo-bucket:last-child { margin-bottom: 0; } .geo-bucket-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-brand); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.92); padding: 8px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.08); border-left: 4px solid rgba(255,255,255,0.6); } .geo-bucket-count { margin-left: auto; background: rgba(255,255,255,0.18); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .geo-bucket.bucket-cur .geo-bucket-header { border-left-color: #2ECC71; background: rgba(46,204,113,0.18); } .geo-bucket.bucket-prev .geo-bucket-header { border-left-color: #F1C40F; background: rgba(241,196,15,0.16); } .geo-bucket.bucket-older .geo-bucket-header { border-left-color: #E67E22; background: rgba(230,126,34,0.16); } .geo-bucket.bucket-never .geo-bucket-header { border-left-color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.25); } /* Cards plus discretes pour les buckets "plus anciens" */ .geo-bucket.bucket-older .geo-client, .geo-bucket.bucket-never .geo-client { opacity: 0.82; } .geo-bucket.bucket-older .geo-client:hover, .geo-bucket.bucket-never .geo-client:hover { opacity: 1; } .geo-status { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; white-space: nowrap; } .geo-status-inactif { background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.15); } .geo-status-dormant { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); border: 1px dashed rgba(255,255,255,0.30); } .geo-status-risk { background: rgba(196,30,58,0.30); color: #fff; border: 1px solid rgba(196,30,58,0.65); } .geo-client-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .geo-client-name { font-family: var(--font-brand); font-size: 1rem; font-weight: 700; line-height: 1.15; } .geo-client-loc { font-size: 0.7rem; color: rgba(255,255,255,0.7); margin-top: 2px; } .geo-client-dist { background: #fff; color: #4A148C; padding: 4px 10px; border-radius: 999px; font-family: var(--font-brand); font-size: 0.85rem; font-weight: 700; white-space: nowrap; line-height: 1; } .geo-client-stats { display: flex; gap: 14px; font-size: 0.72rem; color: rgba(255,255,255,0.78); border-top: 1px solid rgba(255,255,255,0.12); padding-top: 6px; margin-top: 6px; } .geo-client-stats strong { color: #fff; font-weight: 700; } .geo-sugg { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .geo-sugg-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); } .geo-sugg-item { background: rgba(0,0,0,0.25); border-radius: 4px; padding: 5px 8px; font-size: 0.78rem; display: flex; justify-content: space-between; gap: 8px; align-items: center; } .geo-sugg-item.prioritaire { border-left: 3px solid var(--red); } .geo-sugg-item.surveiller { border-left: 3px solid #00BFA5; } .geo-sugg-ref { font-family: var(--font-brand); font-weight: 700; } .geo-sugg-desig { color: rgba(255,255,255,0.82); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .geo-sugg-pill { font-size: 0.62rem; padding: 2px 7px; border-radius: 999px; font-weight: 700; white-space: nowrap; } .geo-sugg-pill.prioritaire { background: var(--red); color: #fff; } .geo-sugg-pill.surveiller { background: transparent; color: #00BFA5; border: 1px solid #00BFA5; } .geo-action { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 5px 10px; background: rgba(255,255,255,0.15); border-radius: var(--radius-sm); color: #fff; text-decoration: none; font-size: 0.72rem; font-weight: 600; cursor: pointer; } .geo-action:hover { background: rgba(255,255,255,0.25); } /* BlitzML suggestions block */ .ml-card { padding: 0; overflow: hidden; } .ml-hero { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #8E24AA 100%); color: #fff; border-bottom: 1px solid #4A148C; cursor: pointer; user-select: none; } /* Repli de l'encart BlitzML : chevron + masquage du corps. Replié de base. */ .ml-hero-chevron { font-size: 1.4rem; line-height: 1; color: rgba(255,255,255,0.85); transition: transform 0.2s ease; flex: 0 0 auto; } .ml-card.ml-collapsed .ml-hero-chevron { transform: rotate(-90deg); } .ml-card.ml-collapsed .ml-hero { border-bottom: none; } .ml-card.ml-collapsed .ml-card-body { display: none; } .ml-robot { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); animation: ml-robot-float 4s ease-in-out infinite; } @keyframes ml-robot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .ml-hero-body { flex: 1; min-width: 0; } .ml-hero-title { font-family: var(--font-brand); font-size: 1.4rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; } .ml-brand { background: linear-gradient(90deg, #FFEB3B 0%, #FF9800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .ml-hero-sub { font-size: 0.82rem; color: rgba(255,255,255,0.78); margin-top: 4px; } .ml-count { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; background: rgba(255,255,255,0.12); border-radius: var(--radius-md); min-width: 80px; } .ml-count-num { font-family: var(--font-brand); font-size: 1.8rem; font-weight: 700; line-height: 1; } .ml-count-lbl { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.85); margin-top: 2px; } .ml-list { display: flex; flex-direction: column; } /* Sous-titres de section dans l'encart BlitzML unique (météo / relance / découverte). */ .ml-subhead { display: flex; align-items: center; gap: 8px; padding: 9px 22px; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); background: var(--bg3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ml-subhead-n { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 0 9px; font-size: 0.76rem; } .ml-subhead-meteo { color: #4A90D9; } .ml-subhead-relance { color: #C41E3A; } .ml-subhead-deco { color: #7C5CFC; } .ml-block-meteo .meteo-trigger:last-child { border-bottom: none; } .ml-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 18px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border); transition: background 0.15s; } .ml-item:last-child { border-bottom: none; } .ml-item:hover { background: var(--bg3); } .ml-niveau-prioritaire { border-left: 4px solid var(--red); background: linear-gradient(90deg, #C41E3A0A 0%, transparent 30%); } .ml-niveau-surveiller { border-left: 4px solid #00BFA5; } .ml-niveau-info { border-left: 4px solid #4A90D9; } .ml-item-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .ml-item-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-brand); font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: 0.5px; white-space: nowrap; line-height: 1; text-transform: uppercase; } /* PRIORITAIRE : badge plein rouge + pulse + ombre */ .ml-niveau-prioritaire .ml-item-badge { background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%); color: #ffffff; border: 1px solid #8B0000; box-shadow: 0 0 12px rgba(196,30,58,0.45), 0 2px 4px rgba(0,0,0,0.18); animation: ml-prio-pulse 1.8s ease-in-out infinite; } @keyframes ml-prio-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(196,30,58,0.45), 0 2px 4px rgba(0,0,0,0.18); } 50% { box-shadow: 0 0 22px rgba(196,30,58,0.75), 0 2px 4px rgba(0,0,0,0.18); } } /* A SURVEILLER : badge outline cyan, plat, sans animation */ .ml-niveau-surveiller .ml-item-badge { background: transparent; color: #00BFA5; border: 1.5px dashed #00BFA5; } body.light .ml-niveau-surveiller .ml-item-badge { color: #00897B; border-color: #00897B; } .ml-niveau-info .ml-item-badge { background: #4A90D922; color: #4A90D9; border: 1px solid #4A90D955; } /* ── Couche DÉCOUVERTE : palette indigo distincte de la relance (rouge/cyan). Opportunité, pas urgence → ton calme, pas d'animation pulse. */ .deco-card .ml-robot { filter: hue-rotate(40deg); } .deco-item { border-left: 4px solid #7C5CFC; background: linear-gradient(90deg, #7C5CFC0A 0%, transparent 30%); } /* COMMANDE = ancré sur un réachat imminent → ton actionnable (vert-cart), accent fort */ .deco-item:has(.deco-motif-commande) { border-left-color: #1FA67A; background: linear-gradient(90deg, #1FA67A12 0%, transparent 30%); } .deco-motif-commande { background: linear-gradient(135deg, #1FA67A 0%, #0E8A63 100%); color: #fff; border: 1px solid #0E8A63; } .deco-motif-enseigne { background: #7C5CFC1f; color: #7C5CFC; border: 1px solid #7C5CFC55; } .deco-motif-affinite { background: transparent; color: #9B7BFF; border: 1.5px dashed #9B7BFF88; } /* COUVERTURE = plancher cold-start (gap d'assortiment cohorte) → ton ambre distinct du bleu-indigo découverte, signale « à référencer » plutôt que « complément » */ .deco-item:has(.deco-motif-couverture) { border-left-color: #C98A2B; background: linear-gradient(90deg, #C98A2B12 0%, transparent 30%); } .deco-motif-couverture { background: #C98A2B1f; color: #C98A2B; border: 1px solid #C98A2B66; } body.light .deco-motif-enseigne { color: #5B3FD9; border-color: #5B3FD9; } body.light .deco-motif-affinite { color: #5B3FD9; border-color: #5B3FD988; } body.light .deco-motif-couverture { color: #9A6816; border-color: #9A6816; } .deco-why { margin-top: 4px; font-size: 0.78rem; color: var(--muted); line-height: 1.3; } .deco-why strong { color: var(--text); font-weight: 600; } .deco-lift { font-variant-numeric: tabular-nums; font-weight: 700; color: #7C5CFC; } /* Compléments DÉCOUVERTE (motif COMMANDE) imbriqués sous une ligne de relance. 4e enfant du grid .ml-item → pleine largeur sur une nouvelle rangée. */ .ml-complements { grid-column: 1 / -1; margin-top: 4px; padding: 8px 0 2px; border-top: 1px dashed var(--border); } .ml-complements-title { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #1FA67A; margin-bottom: 6px; } body.light .ml-complements-title { color: #0E8A63; } .ml-complement { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 3px 8px; border-left: 2px solid #1FA67A55; } .ml-complement-ref { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.8rem; min-width: 56px; color: var(--text); } .ml-complement-desig { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--muted); } .ml-complement-tx { font-size: 0.74rem; font-weight: 700; color: #1FA67A; white-space: nowrap; } /* ── Boost MÉTÉO : bannière d'anticipation en haut du drawer client. */ .meteo-card { margin-top: 14px; padding: 0; overflow: hidden; } .meteo-card-h { padding: 12px 18px; font-weight: 700; font-size: 0.9rem; background: var(--bg3); border-bottom: 1px solid var(--border); } .meteo-trigger { padding: 12px 18px; border-bottom: 1px solid var(--border); border-left: 4px solid var(--border); } .meteo-trigger:last-child { border-bottom: none; } .meteo-gel { border-left-color: #4A90D9; background: linear-gradient(90deg, #4A90D90c 0%, transparent 35%); } .meteo-chaleur { border-left-color: #E8833A; background: linear-gradient(90deg, #E8833A0c 0%, transparent 35%); } .meteo-pluie { border-left-color: #5C8FB0; background: linear-gradient(90deg, #5C8FB00c 0%, transparent 35%); } .meteo-trigger-h { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; margin-bottom: 8px; } .meteo-trigger-icon { font-size: 1.1rem; } .meteo-refs { display: flex; flex-direction: column; gap: 2px; padding-left: 28px; } .meteo-ref { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; } .meteo-ref-code { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.8rem; min-width: 56px; color: var(--text); } .meteo-ref-desig { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--muted); } .meteo-ref-qte { font-size: 0.74rem; font-weight: 700; color: var(--text); white-space: nowrap; opacity: 0.75; } .trend-arrow { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .trend-up { background: #2ECC7122; color: var(--green); border: 1px solid #2ECC7155; } .trend-down { background: #C41E3A22; color: var(--red); border: 1px solid #C41E3A55; } .trend-stable { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); } .trend-unknown { background: transparent; color: var(--border); border: 1px solid var(--border); } .ml-item-main { min-width: 0; } .ml-item-ref { font-family: var(--font-brand); font-size: 0.95rem; font-weight: 700; color: var(--red); } .ml-item-desig { font-size: 0.88rem; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-item-meta { font-size: 0.72rem; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; } .ml-item-stats { display: flex; gap: 18px; align-items: center; } .ml-stat { display: flex; flex-direction: column; align-items: center; min-width: 60px; } .ml-stat-val { font-family: var(--font-brand); font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .ml-stat-lbl { font-size: 0.62rem; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } .ml-stat-alert .ml-stat-val { color: var(--red); } /* Potentiel de CA — badge doré proéminent, aligné à droite/centré dans le hero */ .ml-hero-pot { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; padding: 10px 18px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,235,59,0.45); border-radius: var(--radius-md); box-shadow: 0 2px 10px rgba(0,0,0,0.25); white-space: nowrap; } .ml-hero-pot-icon { font-size: 1.6rem; line-height: 1; } .ml-hero-pot-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.85); font-weight: 600; } .ml-hero-pot strong { font-family: var(--font-brand); font-size: 1.7rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #FFEB3B 0%, #FF9800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); } .ml-stat-pot { min-width: 86px; } .ml-stat-pot .ml-stat-val { color: #FF9800; font-size: 1.15rem; } /* Quantité à proposer — bloc mis en évidence (le geste commercial à faire) */ .ml-qte-propose { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 8px 14px; border-radius: 14px; background: linear-gradient(135deg, #6A1B9A 0%, #8E24AA 100%); box-shadow: 0 3px 10px rgba(106,27,154,0.35); border: 1px solid rgba(255,255,255,0.12); } .ml-qte-propose.ml-qte-gonfle { background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%); box-shadow: 0 3px 12px rgba(46,125,50,0.45); } .ml-qte-num { font-family: var(--font-brand); font-size: 1.9rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .ml-qte-u { font-size: 0.85rem; margin-left: 2px; opacity: 0.8; } .ml-qte-lbl { font-size: 0.62rem; margin-top: 4px; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; white-space: nowrap; } .ml-qte-inc { color: #B9F6CA; font-weight: 700; } /* Macaron sous-référence (code marque/gamme) — réutilisé carte + header + filtre */ .ml-sref-macaron { display: inline-block; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; vertical-align: middle; /* Certaines sous-références sont des libellés longs (pas un code court) : on borne le macaron pour qu'il ne déborde pas sur le texte voisin. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Dans la ligne (meta) la largeur est plus contrainte qu'en header/filtre. */ .ml-item-meta .ml-sref-macaron { max-width: 220px; } .ml-item-meta .ml-sref-macaron { font-size: 0.72rem; } /* Potentiel par sous-référence — sous le total dans le hero */ .ml-hero-pot-srefs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .ml-sref-pot { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: rgba(255,255,255,0.92); } .ml-sref-pot strong { font-weight: 700; font-variant-numeric: tabular-nums; color: #FFE082; } /* Barre de filtre par sous-référence */ .ml-sref-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--bg2); } .ml-sref-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .ml-sref-chip:hover { border-color: var(--accent, #8E24AA); } .ml-sref-chip.active { border-color: #8E24AA; background: rgba(142, 36, 170, 0.14); box-shadow: 0 0 0 1px #8E24AA inset; } .ml-sref-chip-n { font-variant-numeric: tabular-nums; font-size: 0.68rem; color: var(--muted); background: var(--bg2); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; } .ml-sref-chip.active .ml-sref-chip-n { color: var(--text); } /* Source badge (ML vs Regle) — distingue l'origine d'une suggestion */ .ml-item-source { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; white-space: nowrap; } .ml-source-ml { background: rgba(74, 20, 140, 0.12); color: #8E24AA; border: 1px solid rgba(142, 36, 170, 0.3); } .ml-source-regle { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } body.light .ml-source-ml { background: rgba(74, 20, 140, 0.08); } body.light .ml-source-regle { background: rgba(245, 158, 11, 0.08); } .ml-explain { display: flex; gap: 14px; margin-top: 12px; padding: 14px 18px; background: linear-gradient(135deg, #4A148C12 0%, #8E24AA08 100%); border: 1px dashed #8E24AA66; border-radius: var(--radius-md); } .ml-explain-icon { font-size: 1.6rem; line-height: 1.2; } .ml-explain-title { font-family: var(--font-brand); font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .ml-explain-text { font-size: 0.82rem; color: var(--muted); line-height: 1.55; } body.light .ml-explain { background: linear-gradient(135deg, #4A148C08 0%, #8E24AA05 100%); } /* Activite 6 mois — tableau detaille en complement (ou remplacement) des suggestions ML. Affiche cycle moyen + ratio_retard live pour chaque ref achetee sur la fenetre 6m. */ .ml-activity { padding: 14px 18px 18px; border-top: 1px solid var(--border); } .ml-activity-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; } .ml-activity-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); max-height: 480px; overflow-y: auto; } .ml-activity-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; } .ml-activity-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg2); text-align: left; padding: 8px 10px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 600; } .ml-activity-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .ml-activity-table tbody tr:last-child td { border-bottom: 0; } .ml-activity-table tbody tr:hover { background: var(--bg2); } @media (max-width: 720px) { /* ── Préco BlitzML : carte lisible sur mobile (plus de débordement) ──────── */ .ml-hero { flex-wrap: wrap; padding: 14px 16px; gap: 10px 12px; } .ml-robot { font-size: 2.2rem; } .ml-hero-title { font-size: 1.15rem; } .ml-hero-pot { margin-left: 0; flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; } .ml-hero-pot strong { font-size: 1.25rem; } .ml-hero-pot-icon { font-size: 1.2rem; } .ml-item { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; } .ml-item-desig { white-space: normal; } /* désignation complète, pas tronquée */ /* 1) Chips « prioritaire · tendance · masquer » sur UNE seule ligne (masquer poussé à droite), au lieu de la colonne verticale qui mangeait 3 lignes. */ .ml-item-left { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; } .ml-item-left .ml-mask-btn { margin-top: 0 !important; margin-left: auto; } /* 2) Chiffres hiérarchisés : rangée 1 = les 3 chiffres d'ACTION mis en avant (à proposer · retard · CA potentiel), en tiles ; rangée 2 = le contexte discret et grisé (j sans achat · cycle moy). Ordre via `order` (la qté est conditionnelle → on ne peut pas se fier à la position dans le DOM). */ .ml-item-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; align-items: stretch; } .ml-item-stats > * { min-width: 0; } .ml-stat { min-width: 0; } .ml-qte-propose { order: 1; min-width: 0; padding: 8px 6px; } .ml-stat-retard { order: 2; } .ml-stat-pot { order: 3; min-width: 0; } .ml-ctx { order: 4; } /* Tiles hero : fond léger + gros chiffres. Contexte : petit et grisé. */ .ml-stat-retard, .ml-stat-pot { background: var(--bg3); border-radius: 12px; padding: 8px 6px; justify-content: center; } .ml-qte-num { font-size: 1.5rem; } .ml-stat-pot .ml-stat-val, .ml-stat-retard .ml-stat-val { font-size: 1.35rem; } .ml-ctx .ml-stat-val { font-size: 1rem; color: var(--muted); } /* Filtre sous-réf : puces qui s'enroulent proprement. */ .ml-sref-filter { flex-wrap: wrap; } /* Historique mensuel : on masque « N fact » → la barre + le CA respirent. */ .histo-fact { display: none !important; } .histo-ca { width: 82px !important; } /* « Créer une commande » : pleine largeur de l'écran sur mobile. Le conteneur #clientDetailAction (flex:0 0 auto en inline) doit prendre toute la ligne quand il s'enroule sous le nom, sinon « width:100% » du bouton = largeur du contenu. */ .client-detail-cmd { justify-content: stretch; } #clientDetailAction { flex: 1 1 100% !important; } .client-cmd-btn { width: 100% !important; } } /* Brand logos (enseignes magasins) */ .brand-logo { width: auto; object-fit: contain; background: #ffffff; border-radius: 6px; padding: 3px 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.10); flex-shrink: 0; } .brand-logo-lg { width: auto; object-fit: contain; background: #ffffff; border-radius: 8px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); flex-shrink: 0; } /* Client portfolio cards (commercial view) */ button.nav-tab { background: transparent; font-family: inherit; } .client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .client-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; gap: 8px; position: relative; } .client-card:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: 0 6px 18px rgba(196,30,58,0.18); } .client-card.has-alert { border-left: 3px solid var(--red); } .client-card.has-retard { border-top: 2px solid var(--orange); } .client-card-name { font-family: var(--font-brand); font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } .client-card-tiers { font-size: 0.7rem; color: var(--muted); letter-spacing: 1px; font-family: var(--font-brand); } /* Séparateurs internes de card. La variante --push absorbe l'espace libre (margin-top:auto) pour coller le groupe « suggestions + CA potentiel » en bas sans laisser un trait flottant — c'est elle qui porte le margin-top:auto, plus .ml-footer. */ .client-card-sep { height: 0; border-top: 1px solid var(--border); margin: 2px 0; } .client-card-sep--push { margin-top: auto; } /* Macaron « CA POTENTIEL » : CA à aller chercher (suggestions BlitzML), en bas de card. Bandeau pleine largeur, accent ambre. */ .client-card-potentiel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 999px; background: linear-gradient(90deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.06) 100%); border: 1px solid rgba(245,158,11,.45); } .client-card-potentiel .ccp-tag { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.6px; color: #b45309; text-transform: uppercase; white-space: nowrap; } body.dark .client-card-potentiel .ccp-tag { color: #fbbf24; } .client-card-potentiel .ccp-val { font-size: 0.92rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } /* KPI 24 mois en tuiles : chaque stat est un pavé lisible (fond + bord) au lieu d'une paire label/valeur à plat — hiérarchie portée par la tuile héro (CA). */ .client-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-size: 0.78rem; } .client-card-stat--wide { grid-column: 1 / -1; } /* Valeur + flèche de tendance alignées sur une ligne dans la card compacte */ .client-card-stats .val { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .client-card-stats .trend-arrow { padding: 1px 6px; font-size: 0.6rem; align-self: center; } .client-card-stat { display: flex; flex-direction: column; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; } .client-card-stat .lbl { display: flex; align-items: center; gap: 4px; font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .client-card-stat .val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); font-size: 0.9rem; } /* Tuile héro « CA facturé » : métrique phare de la card, pleine largeur + accent rouge. */ .client-card-stat--hero { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(196,30,58,.12) 0%, rgba(196,30,58,.03) 100%); border-color: rgba(196,30,58,.32); } .client-card-stat--hero .val { font-size: 1.3rem; } /* Tuile « Dernière commande » : ligne d'info, moins chargée que les KPI chiffrés. */ .client-card-stat--wide .val { font-weight: 600; } .client-card-badges { display: flex; gap: 4px; flex-wrap: wrap; } /* Macaron « OP » : client à 1 seule commande, créé pour une opération */ .client-card-op { display: inline-block; vertical-align: middle; margin-left: 6px; background: rgba(168, 85, 247, .15); color: #a855f7; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 999px; } /* Pastille « contact renseigné » (coin haut-droit de la card) : signale qu'au moins un contact actif existe (contact_client) → proforma par mail possible. */ .client-card-contact { flex: 0 0 auto; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .40); font-size: 0.85rem; } /* Zone d'action de la carte (bouton Commander + devis en cours) : isolée du clic « ouvrir la fiche » (stopPropagation sur le conteneur) pour éviter les missclicks. */ .client-card-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; cursor: default; } .client-cmd-btn { width: 100%; background: var(--red); color: #fff; border: none; padding: 11px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.86rem; transition: filter 0.15s; } .client-cmd-btn:hover { filter: brightness(1.1); } /* Pastille « N devis en cours » sous le bouton Commander */ .client-devis-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-family: inherit; font-size: 0.72rem; font-weight: 600; color: var(--muted); transition: border-color 0.15s, color 0.15s; } .client-devis-badge:hover { border-color: var(--red); color: var(--text); } /* Client inactif (sans commande simulee) */ .client-card.is-inactive { background: var(--bg3); opacity: 0.85; } .client-card.is-inactive .client-card-name { color: var(--muted); } .client-card.is-inactive:hover { opacity: 1; } .inactive-banner { font-size: 0.65rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; background: var(--bg2); border: 1px dashed var(--border); border-radius: 4px; padding: 3px 8px; text-align: center; } /* Segmented filter (actifs / tous / dormants) */ .seg-filter { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg2); } .seg-btn { background: transparent; border: none; padding: 7px 14px; color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s; border-right: 1px solid var(--border); } .seg-btn:last-child { border-right: none; } .seg-btn:hover { color: var(--text); background: var(--bg3); } .seg-btn.active { background: var(--red); color: #fff; } /* Fiche client détaillée : colonne centrée et lisible dans la page (qui monte à 1600px). Sans ça, header + onglets + préco s'étirent bord à bord sur grand écran et l'ensemble paraît décalé. On centre le bloc entier (header d'action inclus) pour qu'il reste aligné avec le contenu. */ #portefeuilleDetail { max-width: 1120px; margin: 0 auto; } /* Onglets de la fiche client détaillée (portefeuille → détail card). flex + wrap : 4 onglets sur une ligne en desktop, se replient sans scroll horizontal en dessous de ~520px. min-height 44px = cible tactile. */ .client-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .client-tab { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg2); color: var(--muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .client-tab:hover { color: var(--text); background: var(--bg3); } .client-tab.active { color: #fff; background: var(--red); border-color: var(--red); } .client-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; } .client-tab.active .client-tab-badge { background: #fff; color: var(--red); } /* Chip toggle "Filtrer par CA alertes" — sous le titre du portefeuille */ .ca-filter-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg2); color: var(--muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .ca-filter-chip:hover { color: var(--text); border-color: var(--text); } .ca-filter-chip.active { background: var(--red); border-color: var(--red); color: #fff; } /* Footer "BlitzML suggestion" sur les cards portefeuille */ .ml-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 0.74rem; line-height: 1.25; border: 1px solid; } .ml-footer-icon { font-size: 1.05rem; line-height: 1; } .ml-footer-bot { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30)); flex-shrink: 0; } .ml-footer-prio .ml-footer-bot { filter: drop-shadow(0 0 4px rgba(196,30,58,0.55)); animation: ml-footer-bot-pulse 2.4s ease-in-out infinite; } @keyframes ml-footer-bot-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .ml-footer-text { flex: 1; min-width: 0; } .ml-footer-text strong { font-weight: 700; } .ml-footer-extra { font-size: 0.68rem; opacity: 0.85; } .ml-footer-prio { background: linear-gradient(90deg, #C41E3A22 0%, #C41E3A0A 100%); color: var(--red); border-color: #C41E3A55; } .ml-footer-surv { background: rgba(0,191,165,0.10); color: #00897B; border-color: rgba(0,191,165,0.45); border-style: dashed; } .ml-footer-none { background: var(--bg3); color: var(--muted); border-color: var(--border); } /* Découverte / COUVERTURE : opportunité (pas urgence) → ton indigo, discret */ .ml-footer-deco { background: rgba(124,92,252,0.10); color: #6A4BE0; border-color: rgba(124,92,252,0.40); border-style: dashed; } body.dark .ml-footer-surv { color: #4DD0C2; } body.dark .ml-footer-deco { color: #A98BFF; } /* Hero KPI tiles (commercial view) */ .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .hero-tile { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radius-md); color: #ffffff; box-shadow: 0 6px 24px rgba(0,0,0,0.15); position: relative; overflow: hidden; } .hero-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 60%); pointer-events: none; } .hero-tile-icon { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } .hero-tile-body { flex: 1; min-width: 0; position: relative; z-index: 1; } .hero-tile-label { font-family: var(--font-brand); font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; } .hero-tile-value { font-family: var(--font-ui); font-size: 2.4rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.25); font-variant-numeric: tabular-nums; } .hero-tile-sub { font-size: 0.78rem; color: rgba(255,255,255,0.80); margin-top: 4px; } .hero-tile-commission { background: linear-gradient(135deg, #1E8449 0%, #27AE60 60%, #2ECC71 100%); border: 1px solid #1E8449; } .hero-tile-commandes { background: linear-gradient(135deg, #1A4A8A 0%, #2980B9 60%, #4A90D9 100%); border: 1px solid #1A4A8A; } .hero-tile-retours { background: linear-gradient(135deg, #8B0000 0%, #C41E3A 60%, #E74C3C 100%); border: 1px solid #8B0000; } /* CA facturé — comparaison période courante vs période précédente équivalente (mois / semaine / année). Cartes neutres (thème-aware), plus sobres que les hero-tiles : la donnée porte l'attention via le delta coloré, pas le fond. Grille fluide (auto-fit) : 3 col → 1 sans media-query (cf. règle responsive). */ .ca-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .ca-kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; } .ca-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .ca-kpi-title { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ca-kpi-delta { font-size: 0.78rem; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); } .ca-kpi-delta.up { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); } .ca-kpi-delta.down { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); } .ca-kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; } .ca-kpi-sub { font-size: 0.74rem; color: var(--muted); margin-top: 4px; } /* Role badge — désormais utilisé uniquement par /pipeline/ comme titre de page (fond défini en inline sur le span). Les macarons de rôle des shells commercial/dirco/dirigeant ont été retirés. */ .role-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 6px; font-family: var(--font-brand); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px; line-height: 1; border: 1px solid rgba(157, 180, 255, 0.22); } .page { display: none; padding: 20px 24px; flex: 1; } .page.active { display: block; animation: fadeIn 0.15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Vue Commercial — bandeau & layout (scopé .view-commercial) ───────────── */ /* Header : barre plus aérée + dégradé subtil + nav en pilule centrée. */ .view-commercial .hdr { height: 64px; padding: 0 28px; background: linear-gradient(180deg, var(--bg2) 0%, color-mix(in srgb, var(--bg2) 88%, var(--bg)) 100%); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.20); } .view-commercial .hdr-left, .view-commercial .hdr-right { flex: 1; } .view-commercial .hdr-right { justify-content: flex-end; } .view-commercial .hdr-logo span { letter-spacing: 1.5px; } /* Conteneur nav : pilule encadrée, ne s'étire pas (reste centrée). */ .view-commercial .hdr-center { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14); } .view-commercial .nav-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; white-space: nowrap; } /* Déconnexion : présente dans la barre flottante mobile uniquement. */ .view-commercial .nav-logout-m { display: none; } .view-commercial .nav-tab:hover { color: var(--text); background: var(--bg3); } .view-commercial .nav-tab.active { color: #fff; background: var(--red); border-color: transparent; box-shadow: 0 2px 10px var(--red-glow); } /* Pages : contenu centré avec une largeur max généreuse (occupe l'espace sur grand écran sans s'étaler bord à bord). */ .view-commercial .page { width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px 28px; } /* ── Vue Commercial — tout ce qui n'est PAS desktop (tablette + téléphone) ──── Le menu quitte le header et devient une barre HORIZONTALE collée en BAS de l'écran (bottom nav), pleine largeur. Header épuré : logo + badge rôle. */ @media (max-width: 1100px) { /* IMPORTANT : on retire le backdrop-filter du header (.hdr a un `backdrop-filter: blur(10px)` global). Un backdrop-filter crée un bloc englobant : sinon la barre `position:fixed` ci-dessous se cale sur le bas du HEADER (donc en haut de page) au lieu du bas de l'écran. */ .view-commercial .hdr { padding: 8px 14px; gap: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; } .view-commercial .hdr-left { display: flex; flex: 1 1 auto; } .view-commercial .hdr-right { display: none; } /* La déconnexion du header est masquée : elle vit en bout de la barre du bas. */ .view-commercial .hdr-logout-m { display: none; } /* Menu = barre horizontale pleine largeur, fixée en bas de l'écran. */ .view-commercial .hdr-center { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; gap: 0; width: 100%; max-width: none; padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); border: none; border-top: 1px solid var(--border); border-radius: 0; background: var(--bg2); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.32); } .view-commercial .nav-tab { flex: 1 1 0; justify-content: center; width: auto; height: 56px; padding: 0; border-radius: 0; gap: 0; } /* Onglet actif : fond discret + liseré rouge en haut (l'emoji ne se teinte pas, le liseré fait le repère — pas de pilule rouge ici). */ .view-commercial .nav-tab.active { background: var(--bg3); color: var(--text); box-shadow: inset 0 2px 0 var(--red); } /* Icône bien visible, titre retiré. */ .view-commercial .nav-ico { font-size: 1.45rem; line-height: 1; } .view-commercial .nav-lbl { display: none; } /* Déconnexion en bout de barre : révélée + nuance visuelle. */ .view-commercial .nav-logout-m { display: inline-flex; } .view-commercial .nav-logout-m .nav-ico { color: var(--red); } /* Marge basse des pages pour ne pas passer sous la barre. */ .view-commercial .page { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } } /* Conteneur scrollable autour des tableaux denses (.cmd-table) : évite que le tableau déborde la page sur petit écran — on scrolle dans le tableau, pas dans toute la mise en page. Inoffensif sur desktop (tableau en 100%). */ .cmd-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Vue Commercial — affinages spécifiques téléphone (la bottom-nav, elle, est gérée plus haut dès ≤1100px) ─────────────────────────────────────────────── */ @media (max-width: 760px) { /* Pages : marges latérales réduites (la marge basse vient du bloc ≤1100). */ .view-commercial .page { padding-left: 12px; padding-right: 12px; padding-top: 14px; } /* KPI hero empilés, valeurs un peu plus petites. */ .view-commercial .hero-grid { grid-template-columns: 1fr; gap: 10px; } .view-commercial .hero-tile { padding: 14px 16px; gap: 12px; } .view-commercial .hero-tile-icon { font-size: 1.9rem; } .view-commercial .hero-tile-value { font-size: 1.9rem; } /* KPI factures : 2 colonnes au lieu de 4 (override du grid inline). */ #facturesKpis { grid-template-columns: repeat(2, 1fr) !important; } /* Tableaux denses : largeur mini pour rester lisibles, le wrap scrolle. */ .view-commercial .cmd-table { min-width: 640px; } /* …sauf l'historique commandes du détail client : on masque Lignes + Poids (secondaires) → 4 colonnes (N° · Date · CA · Palette) qui tiennent sans scroll. */ #clientDetailContent .cmd-table { min-width: 0; } #clientDetailContent .cmd-table th:nth-child(3), #clientDetailContent .cmd-table td:nth-child(3), #clientDetailContent .cmd-table th:nth-child(4), #clientDetailContent .cmd-table td:nth-child(4) { display: none; } /* Calendrier : pastilles + petites pour tenir 7 colonnes sans déborder. */ .view-commercial #calendarGrid { gap: 4px !important; } .view-commercial .calendar-day { width: 36px; height: 36px; margin-right: 0; margin-bottom: 0; } .view-commercial .calendar-day-num { font-size: 0.72rem; } .view-commercial .calendar-day-count { font-size: 0.55rem; } /* Tournée : carte plus basse + actions geo sur toute la largeur. */ .leaflet-host { height: 320px; } .geo-widget-header { padding: 12px 14px; } .geo-widget-h1 { font-size: 1rem; } .geo-widget-robot { font-size: 1.8rem; } .geo-widget-actions { width: 100%; justify-content: space-between; } .tournee-panel { position: static; } } @media (max-width: 480px) { /* Très petits écrans : on masque le nom (déjà visible dans le menu rôle). */ .view-commercial .user-badge { display: none; } /* Barre horizontale un poil plus basse sur très petit écran. */ .view-commercial .nav-tab { height: 52px; padding: 0; } .view-commercial .nav-ico { font-size: 1.35rem; } .view-commercial .hero-tile-value { font-size: 1.7rem; } } /* ── « Mes pièces » — table dense repliée en cartes sur mobile ──────────────── Desktop / tablette (≥861px) : vraie table, scroll horizontal maîtrisé par min-width. Mobile (≤860px) : chaque devient une carte empilée → zéro scroll horizontal. Les libellés et masquages ciblent les colonnes PAR POSITION (nth-child) — même pattern que l'historique client plus haut. L'ordre DOIT rester aligné sur renderFacturesTable() dans commercial.js : 1 N°Cmd · 2 BL · 3 Facture · 4 Date · 5 Client · 6 Lignes · 7 Sous-réfs · 8 CA · 9 Commission · 10 Score · 11 Statut · 12 Origine · 13 Export Si l'ordre change là-bas, mettre à jour les nth-child ci-dessous. */ .factures-table { min-width: 820px; } /* ── Mes pièces : actions de la colonne « Export » ────────────────────────── Proforma / Mail / Masquer / Recommander / Ouvrir-convertir partagent une seule primitive : elles s'empilent et s'étirent à la largeur de la cellule. min-height 38px = cible tactile atteignable au doigt (le gabarit précédent, 0.78rem + 4px de padding, tombait à ~26px). Toute nouvelle action de pièce passe par .piece-act — ne pas réintroduire de style inline par bouton. */ .piece-act-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .piece-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 9px 12px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: var(--text); cursor: pointer; transition: background .12s, filter .12s; } .piece-act:hover:not(:disabled) { background: var(--bg3); } .piece-act:disabled { opacity: 0.5; cursor: not-allowed; } /* Masquer : action de retrait — volontairement en retrait visuel. */ .piece-act.is-muted { background: var(--bg); color: var(--muted); } .piece-act.is-muted:hover:not(:disabled) { background: var(--bg3); color: var(--text); } /* Ouvrir / convertir : action principale d'un devis émis. */ .piece-act.is-primary { background: var(--red); border-color: var(--red); color: #fff; } .piece-act.is-primary:hover:not(:disabled) { filter: brightness(1.08); } /* Supprimer : action destructive et définitive — contour rouge au repos (se distingue du is-primary plein), bascule en plein au survol pour l'intention. */ .piece-act.is-danger { background: transparent; border-color: var(--red-dim); color: var(--red); } .piece-act.is-danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; } /* Le