/* ======================================================== DCOMPT — PREMIUM DESKTOP EXPERIENCE ======================================================== IMPORTANT : Tout ce fichier est limité à min-width: 981px. La version MOBILE n'est pas modifiée. ======================================================== */ @media (min-width: 981px) { /* ==================================================== PALETTE — reprise de l'esprit mobile ==================================================== */ :root { --dd-ink: #101828; --dd-title: #0f172a; --dd-muted: #667085; --dd-green: #0eaa78; --dd-green-dark: #064e3b; --dd-green-soft: #e9f8f2; --dd-green-pale: #f2fbf7; --dd-navy: #06243c; --dd-navy-soft: #103850; --dd-red: #dc4c64; --dd-orange: #e8a225; --dd-blue: #3389e8; --dd-bg: #f7faf8; --dd-card: #ffffff; --dd-border: #e1e8e4; --dd-shadow: 0 6px 22px rgba(15, 45, 34, .055); --dd-shadow-hover: 0 10px 30px rgba(15, 45, 34, .09); } /* ==================================================== BASE ==================================================== */ html, body { background: var(--dd-bg) !important; color: var(--dd-ink) !important; } body { font-family: "Inter", "Manrope", "Segoe UI", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .layout { display: grid !important; grid-template-columns: 282px minmax(0, 1fr) !important; min-height: 100vh; background: var(--dd-bg) !important; } .content { min-width: 0 !important; background: linear-gradient( 180deg, #ffffff 0, #f7faf8 180px ) !important; } /* ==================================================== SIDEBAR ==================================================== */ .sidebar { position: sticky !important; top: 0 !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 18px 14px 20px !important; background: linear-gradient( 180deg, #05243b 0%, #062b42 55%, #041e32 100% ) !important; border-right: 1px solid rgba(255,255,255,.05); box-shadow: 6px 0 30px rgba(3,22,36,.08); color: #ffffff !important; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.20) transparent; } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 999px; } /* ==================================================== MARQUE ==================================================== */ .sidebar .brand { display: flex !important; align-items: center !important; gap: 11px !important; min-height: 58px; margin-bottom: 15px !important; padding: 2px 5px 16px !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } .sidebar .brand img, .sidebar .brand-mark { width: 43px !important; height: 43px !important; flex: 0 0 43px; object-fit: cover; border-radius: 12px !important; background: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.14); } .sidebar .brand span { color: #ffffff !important; font-size: 17px !important; font-weight: 850 !important; letter-spacing: -.02em; } /* ==================================================== PLAN ==================================================== */ .sidebar .portfolio-mini { margin: 0 0 14px !important; padding: 10px 12px !important; min-height: 48px; border: 1px solid rgba(14,170,120,.24) !important; border-radius: 13px !important; background: linear-gradient( 135deg, #f2fff9, #ffffff ) !important; box-shadow: 0 4px 14px rgba(0,0,0,.08); } .sidebar .portfolio-mini span { color: var(--dd-green) !important; font-size: 10px !important; font-weight: 900 !important; } .sidebar .portfolio-mini strong { color: var(--dd-title) !important; font-size: 11px !important; font-weight: 850 !important; } /* ==================================================== UTILISATEUR ==================================================== */ .sidebar .user-box { margin: 0 0 15px !important; padding: 10px !important; gap: 9px !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 13px !important; background: rgba(255,255,255,.055) !important; } .sidebar .user-box img, .sidebar .user-box-logo { width: 38px !important; height: 38px !important; border-radius: 10px !important; } .sidebar .user-box strong { color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; } .sidebar .user-box span { color: #9ed7c4 !important; font-size: 9px !important; font-weight: 650 !important; } /* ==================================================== GROUPES NAV ==================================================== */ .sidebar .nav { display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 5px 0 16px !important; } .sidebar .nav-section { margin: 13px 9px 5px !important; color: #72c9aa !important; font-size: 8px !important; font-weight: 900 !important; letter-spacing: .13em !important; text-transform: uppercase; } /* ==================================================== BOUTONS SIDEBAR ==================================================== */ .sidebar .nav button { position: relative; display: flex !important; align-items: center !important; width: 100% !important; min-height: 39px !important; gap: 9px !important; padding: 5px 9px !important; border: 1px solid transparent !important; border-radius: 11px !important; background: transparent !important; color: #dbe9e6 !important; text-align: left !important; font-size: 10.5px !important; font-weight: 720 !important; line-height: 1.15 !important; white-space: normal !important; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important; } .sidebar .nav button:hover { background: rgba(255,255,255,.075) !important; border-color: rgba(255,255,255,.08) !important; color: #ffffff !important; transform: translateX(2px); } .sidebar .nav button.active { background: linear-gradient( 135deg, rgba(14,170,120,.28), rgba(14,170,120,.16) ) !important; border-color: rgba(68,226,173,.23) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 #35d49e; } .sidebar .nav button.locked { opacity: .55; } /* ==================================================== EMOJI NAV ==================================================== */ .sidebar .nav-icon { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 29px !important; height: 29px !important; min-width: 29px !important; flex: 0 0 29px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; background: rgba(255,255,255,.055) !important; color: #ffffff !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .sidebar .nav button.active .nav-icon { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.13) !important; } /* ==================================================== LOGOUT ==================================================== */ .sidebar .logout { width: 100% !important; min-height: 38px !important; margin-top: 8px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 10px !important; background: rgba(255,255,255,.055) !important; color: #f1c8c8 !important; font-size: 10px !important; font-weight: 750 !important; } /* ==================================================== TOPBAR ==================================================== */ .topbar { position: sticky !important; top: 0 !important; z-index: 100 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 72px !important; gap: 12px !important; padding: 11px 26px !important; margin: 0 !important; border-bottom: 1px solid var(--dd-border) !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 3px 12px rgba(15,45,34,.035); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .topbar-left { display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 260px !important; gap: 8px !important; } /* Horloge secondaire plus discrète */ .clock-button { display: none !important; } /* ==================================================== RECHERCHE ==================================================== */ .topbar .search-box { display: flex !important; align-items: center !important; width: clamp(260px,30vw,390px) !important; min-height: 42px !important; gap: 8px !important; padding: 0 12px !important; border: 1px solid #dfe7e3 !important; border-radius: 12px !important; background: #f9fbfa !important; color: #75817a !important; box-shadow: inset 0 1px 2px rgba(16,24,40,.02); } .topbar .search-box:focus-within { border-color: rgba(14,170,120,.55) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(14,170,120,.08); } .topbar .search-box input { width: 100% !important; min-width: 0 !important; border: 0 !important; outline: none !important; background: transparent !important; color: var(--dd-title) !important; font-size: 11px !important; font-weight: 600 !important; } .topbar .search-box input::placeholder { color: #98a29d !important; opacity: 1 !important; } /* ==================================================== TOPBAR RIGHT ==================================================== */ .topbar-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; min-width: 0 !important; } .topbar-title { color: var(--dd-muted) !important; font-size: 9px !important; } /* ==================================================== BUSINESS SWITCHER ==================================================== */ .topbar .business-switcher { display: grid !important; grid-template-columns: auto minmax(125px,185px) auto !important; align-items: center !important; min-width: 255px !important; min-height: 43px !important; gap: 6px !important; padding: 5px 9px !important; border: 1px solid var(--dd-border) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(15,45,34,.025); } .business-switcher-label { color: #7a8680 !important; font-size: 8px !important; font-weight: 750 !important; letter-spacing: .08em !important; } .business-switcher select { color: var(--dd-title) !important; font-size: 11px !important; font-weight: 800 !important; } .business-count { color: var(--dd-green) !important; font-size: 9px !important; font-weight: 900 !important; } /* ==================================================== NOTIFICATIONS TOPBAR ==================================================== */ .premium-icon-button { width: 42px !important; height: 42px !important; min-width: 42px !important; border: 1px solid var(--dd-border) !important; border-radius: 12px !important; background: #ffffff !important; font-size: 18px !important; box-shadow: 0 2px 7px rgba(15,45,34,.035); } .premium-icon-button:hover { background: var(--dd-green-pale) !important; border-color: #b8e9d8 !important; } /* ==================================================== LANGUE ==================================================== */ .mini-language-switch { padding: 3px !important; border: 1px solid var(--dd-border) !important; border-radius: 999px !important; background: #f5f8f6 !important; } .mini-language-switch button { min-width: 37px !important; height: 34px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #68756e !important; font-size: 9px !important; font-weight: 850 !important; } .mini-language-switch button.active { background: var(--dd-green) !important; color: #ffffff !important; box-shadow: 0 3px 8px rgba(14,170,120,.20); } /* ==================================================== PAGE TITLE ==================================================== */ .page-title { padding: 22px 28px 17px !important; margin: 0 !important; border-bottom: 1px solid var(--dd-border) !important; background: rgba(255,255,255,.84) !important; } .page-title h1 { margin: 0 !important; color: var(--dd-title) !important; font-size: clamp(25px,2.2vw,32px) !important; font-weight: 850 !important; line-height: 1.08 !important; letter-spacing: -.035em !important; } .page-title p { margin: 6px 0 0 !important; color: var(--dd-muted) !important; font-size: 11px !important; font-weight: 500 !important; } /* ==================================================== CONTENU PRINCIPAL ==================================================== */ .content > .panel, .content > .premium-hero-panel, .content > .metrics, .content > .grid-2, .content > .grid-3, .content > .form-grid { margin-left: 28px !important; margin-right: 28px !important; } .content > .premium-hero-panel { margin-top: 22px !important; } .content > .panel { margin-top: 18px !important; } /* ==================================================== CARDS ==================================================== */ .panel { border: 1px solid var(--dd-border) !important; border-radius: 19px !important; background: #ffffff !important; box-shadow: var(--dd-shadow) !important; } .panel:hover { box-shadow: var(--dd-shadow-hover); } .panel-head { gap: 10px !important; } .panel h1, .panel h2, .panel h3, .panel strong { color: var(--dd-title); } .panel p, .panel .muted { color: var(--dd-muted); } /* ==================================================== TYPOGRAPHIE ==================================================== */ .content h1, .content h2, .content h3 { color: var(--dd-title); letter-spacing: -.02em; } .content h2 { font-weight: 820; } .content .eyebrow { color: var(--dd-green) !important; font-size: 8px !important; font-weight: 900 !important; letter-spacing: .12em !important; } /* ==================================================== HERO PREMIUM / NOTIFICATIONS ==================================================== */ .premium-hero-panel { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 24px !important; padding: 25px !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 22px !important; background: linear-gradient( 135deg, #064e3b, #075743 ) !important; color: #ffffff !important; box-shadow: 0 13px 30px rgba(6,78,59,.14) !important; } .premium-hero-panel h1, .premium-hero-panel h2, .premium-hero-panel h3, .premium-hero-panel strong { color: #ffffff !important; } .premium-hero-panel .eyebrow { color: #5ee6b9 !important; } .premium-hero-panel p { color: #d6eee6 !important; font-size: 12px !important; line-height: 1.5 !important; } .premium-hero-panel .toolbar { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: flex-end !important; } .premium-hero-panel button { min-height: 38px !important; padding: 0 13px !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 10px !important; background: rgba(255,255,255,.08) !important; color: #ffffff !important; font-size: 10px !important; font-weight: 780 !important; } .premium-hero-panel button:last-child { background: #ffffff !important; color: #087755 !important; } /* ==================================================== NOTIFICATION LIST ==================================================== */ .premium-notification-list { display: grid !important; gap: 10px !important; } .premium-notification { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 18px !important; min-height: 86px !important; padding: 15px 18px !important; border: 1px solid #e8eeeb !important; border-left: 5px solid #cad4cf !important; border-radius: 15px !important; background: #ffffff !important; box-shadow: 0 3px 12px rgba(15,45,34,.035); } .premium-notification.bad { border-left-color: var(--dd-red) !important; background: #fffafb !important; } .premium-notification.warn { border-left-color: var(--dd-orange) !important; background: #fffdf8 !important; } .premium-notification.info { border-left-color: var(--dd-blue) !important; background: #fafcff !important; } .premium-notification strong { display: block; color: #17231d !important; font-size: 12px !important; font-weight: 820 !important; } .premium-notification p { margin: 5px 0 0 !important; color: #738078 !important; font-size: 10.5px !important; } .premium-notification .toolbar { display: flex !important; gap: 6px !important; flex-wrap: nowrap !important; } .premium-notification .toolbar button { min-height: 35px !important; padding: 0 11px !important; border: 1px solid #dce6e1 !important; border-radius: 9px !important; background: #f6faf8 !important; color: #40554a !important; font-size: 9px !important; font-weight: 750 !important; white-space: nowrap !important; } .premium-notification .toolbar button:first-child { border-color: var(--dd-green) !important; background: var(--dd-green) !important; color: #ffffff !important; } /* ==================================================== BOUTONS ==================================================== */ .content button, .premium-modal button { font-family: inherit; } .content .primary { border-color: var(--dd-green) !important; background: var(--dd-green) !important; color: #ffffff !important; } .content .ghost { border-color: #dbe5e0 !important; background: #ffffff !important; color: #176b50 !important; } .add-button { width: 42px !important; height: 42px !important; min-width: 42px !important; border: 0 !important; border-radius: 12px !important; background: var(--dd-green) !important; color: #ffffff !important; font-size: 20px !important; box-shadow: 0 4px 10px rgba(14,170,120,.18); } /* ==================================================== FORMULAIRES ==================================================== */ .content label { color: #4b5e54 !important; font-size: 10px !important; font-weight: 750 !important; } .content input, .content select, .content textarea { min-height: 40px; border: 1px solid #dce5e1 !important; border-radius: 10px !important; background: #ffffff !important; color: var(--dd-title) !important; font-size: 11px !important; } .content input:focus, .content select:focus, .content textarea:focus { border-color: var(--dd-green) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(14,170,120,.08) !important; } /* ==================================================== TABLEAUX ==================================================== */ .table-wrap { border: 1px solid #e3ebe7 !important; border-radius: 13px !important; overflow: auto !important; } table { background: #ffffff; } th { color: #617168 !important; background: #f7faf8 !important; font-size: 9px !important; font-weight: 850 !important; } td { color: #25332b !important; font-size: 10.5px !important; } tbody tr:hover { background: #f7fcfa !important; } /* ==================================================== KPI / STATS ==================================================== */ .metric, .stat-card, .premium-stat { border: 1px solid var(--dd-border) !important; border-radius: 17px !important; background: #ffffff !important; box-shadow: var(--dd-shadow) !important; } .metric strong, .stat-card strong, .premium-stat strong { color: var(--dd-title) !important; } .metric span, .metric small, .stat-card p, .premium-stat p { color: var(--dd-muted) !important; } /* ==================================================== QUICK ACTION OVERLAY ==================================================== */ .premium-quick-grid button { border: 1px solid #e2eae6 !important; border-radius: 14px !important; background: #ffffff !important; color: var(--dd-title) !important; } .premium-quick-grid button:hover { border-color: #bde7d7 !important; background: var(--dd-green-pale) !important; } .premium-quick-grid button > span:first-child { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; font-size: 24px !important; } /* ==================================================== MODALES ==================================================== */ .premium-overlay-backdrop { background: rgba(6,36,60,.50) !important; backdrop-filter: blur(6px); } .premium-modal { border: 1px solid var(--dd-border) !important; border-radius: 21px !important; background: #ffffff !important; box-shadow: 0 25px 65px rgba(6,36,60,.22) !important; } /* ==================================================== GRAPHIQUES ==================================================== */ .chart { border-radius: 14px; } .chart svg { max-width: 100%; } /* ==================================================== IA / DARK PANELS ==================================================== */ .premium-ai-card, .smart-hero, .dashboard-ai-card { background: var(--dd-navy) !important; color: #ffffff !important; } .premium-ai-card h1, .premium-ai-card h2, .premium-ai-card h3, .premium-ai-card strong, .smart-hero h1, .smart-hero h2, .dashboard-ai-card h1, .dashboard-ai-card h2 { color: #ffffff !important; } .premium-ai-card p, .smart-hero p, .dashboard-ai-card p { color: #c8d9e2 !important; } /* ==================================================== CACHER NAVIGATION MOBILE SUR DESKTOP ==================================================== */ .mobile-bottom-nav, .mobile-menu-button, .mobile-sidebar-close, .mobile-nav-backdrop, .mobile-header-title, .mobile-sidebar-language, .mobile-user-email, .mobile-business-switcher { display: none !important; } } /* ======================================================== DESKTOP COMPACT — petits laptops uniquement Toujours > 980px. ======================================================== */ @media (min-width: 981px) and (max-width: 1180px) { .layout { grid-template-columns: 248px minmax(0,1fr) !important; } .topbar { padding-left: 18px !important; padding-right: 18px !important; } .topbar .search-box { width: 235px !important; } .topbar-title { display: none !important; } .topbar .business-switcher { min-width: 220px !important; grid-template-columns: auto minmax(100px,145px) auto !important; } .content > .panel, .content > .premium-hero-panel, .content > .metrics, .content > .grid-2, .content > .grid-3, .content > .form-grid { margin-left: 20px !important; margin-right: 20px !important; } .page-title { padding-left: 20px !important; padding-right: 20px !important; } }