/* ================================================================ Smart Insider — Premium Theme v3 Injecté dans via after_request hook. Inspiré : Linear / Vercel / Notion — moderne, épuré, envie de bosser. ================================================================ */ /* ── Fonts ─────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── Design tokens ─────────────────────────────────────────────── */ :root { /* Indigo signature */ --p: #6366f1; --p-dark: #4f46e5; --p-xd: #4338ca; --p-soft: rgba(99,102,241,.12); --p-glow: rgba(99,102,241,.30); /* Surface */ --bg: #f4f5f9; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f3f4f6; --border: rgba(15,23,42,.09); --border-2: rgba(15,23,42,.05); /* Text */ --t1: #0d1117; --t2: #4b5563; --t3: #9ca3af; /* Semantic */ --green: #10b981; --green-s: rgba(16,185,129,.15); --amber: #f59e0b; --amber-s: rgba(245,158,11,.15); --red: #ef4444; --red-s: rgba(239,68,68,.15); --blue: #3b82f6; --blue-s: rgba(59,130,246,.15); --cyan: #06b6d4; --cyan-s: rgba(6,182,212,.15); --violet: #8b5cf6; --violet-s:rgba(139,92,246,.15); /* Radius */ --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl:28px; /* Shadows */ --s-xs: 0 1px 2px rgba(15,23,42,.05); --s-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --s-md: 0 4px 12px rgba(15,23,42,.10), 0 2px 4px rgba(15,23,42,.04); --s-lg: 0 10px 30px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05); --s-xl: 0 20px 50px rgba(15,23,42,.15), 0 8px 16px rgba(15,23,42,.06); --s-p: 0 4px 18px var(--p-glow); --s-g: 0 4px 18px rgba(16,185,129,.35); --s-r: 0 4px 18px rgba(239,68,68,.35); --s-a: 0 4px 18px rgba(245,158,11,.30); --s-c: 0 4px 18px rgba(6,182,212,.35); /* Motion */ --ease: cubic-bezier(.16,1,.3,1); --ease-q: cubic-bezier(.4,0,.2,1); --ease-sp: cubic-bezier(.34,1.56,.64,1); --dur: .2s; --dur-s: .15s; } /* ================================================================ RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 14px !important; line-height: 1.6 !important; background: var(--bg) !important; color: var(--t1) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; min-height: 100vh; } /* Grain de fond subtil */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 900px 600px at -10% -20%, rgba(99,102,241,.07) 0%, transparent 70%), radial-gradient(ellipse 600px 500px at 110% 100%, rgba(16,185,129,.05) 0%, transparent 70%); pointer-events: none; z-index: 0; } main, header { position: relative; z-index: 1; } ::selection { background: rgba(99,102,241,.18); color: var(--t1); } /* ================================================================ SCROLLBAR ================================================================ */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(15,23,42,.15); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.28); } * { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.15) transparent; } /* ================================================================ TYPOGRAPHIE ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.025em !important; color: var(--t1) !important; line-height: 1.25 !important; } h1 { font-size: 1.6rem !important; font-weight: 800 !important; } h2 { font-size: 1.15rem !important; } p { line-height: 1.6; } label { font-weight: 500 !important; color: var(--t2) !important; } /* ================================================================ NAVBAR — glassmorphism premium ================================================================ */ .nav-bar { background: rgba(255,255,255,.78) !important; backdrop-filter: blur(20px) saturate(200%) brightness(102%) !important; -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(102%) !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 8px rgba(15,23,42,.06) !important; height: 58px !important; } .nav-logo { font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; background: linear-gradient(135deg, #6366f1 0%, #a78bfa 60%, #818cf8 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; transition: opacity var(--dur-s) !important; } .nav-logo:hover { opacity: .8 !important; } .nav-tab { border-radius: var(--r-sm) !important; font-weight: 500 !important; font-size: .82rem !important; transition: background var(--dur-s) var(--ease-q), color var(--dur-s) var(--ease-q), transform var(--dur-s) var(--ease-q) !important; } .nav-tab:hover { background: rgba(99,102,241,.08) !important; color: var(--p-dark) !important; transform: translateY(-1px) !important; } .nav-tab.active-backoffice { background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(99,102,241,.07)) !important; color: var(--p-dark) !important; border-color: rgba(99,102,241,.25) !important; box-shadow: 0 2px 8px rgba(99,102,241,.12) !important; font-weight: 600 !important; } .nav-tab.active-tech { background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.07)) !important; color: #065f46 !important; border-color: rgba(16,185,129,.25) !important; font-weight: 600 !important; } .nav-tab.active-commercial { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.07)) !important; color: #92400e !important; border-color: rgba(245,158,11,.25) !important; font-weight: 600 !important; } .nav-sub-item { border-radius: var(--r-xs) !important; font-size: .79rem !important; font-weight: 400 !important; transition: all var(--dur-s) var(--ease-q) !important; } .nav-sub-item:hover { background: rgba(99,102,241,.08) !important; color: var(--p-dark) !important; } .nav-sub-item.active { background: rgba(99,102,241,.12) !important; color: var(--p-dark) !important; font-weight: 600 !important; } .nav-icon-btn { border-radius: var(--r-sm) !important; transition: background var(--dur-s), transform var(--dur-s) var(--ease-sp) !important; } .nav-icon-btn:hover { background: rgba(99,102,241,.1) !important; color: var(--p-dark) !important; transform: translateY(-1px) scale(1.05) !important; } .nav-dropdown { border-radius: var(--r-lg) !important; border: 1px solid rgba(15,23,42,.07) !important; box-shadow: var(--s-xl) !important; padding: 6px !important; animation: ddIn .2s var(--ease) both; } @keyframes ddIn { from { opacity:0; transform:translateY(-8px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } } .nav-dropdown a { border-radius: var(--r-sm) !important; margin: 1px 0 !important; transition: background var(--dur-s) !important; } .nav-dropdown a:hover { background: rgba(99,102,241,.07) !important; color: var(--p-dark) !important; } .nav-logout { border-radius: var(--r-sm) !important; font-weight: 500 !important; font-size: .79rem !important; transition: all var(--dur-s) var(--ease-q) !important; } .nav-logout:hover { background: var(--red-s) !important; border-color: var(--red) !important; color: #b91c1c !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(239,68,68,.15) !important; } #notifBadge { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 0 0 2px white, 0 2px 6px rgba(239,68,68,.5) !important; animation: badgePulse 2.5s var(--ease) infinite !important; } @keyframes badgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px white, 0 2px 6px rgba(239,68,68,.5); } 50% { transform: scale(1.15); box-shadow: 0 0 0 2px white, 0 4px 12px rgba(239,68,68,.6); } } /* ================================================================ CARTES & WIDGETS ================================================================ */ .widget, .card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--s-sm) !important; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease) !important; animation: slideUp .45s var(--ease) both; } .widget:nth-child(2) { animation-delay:.07s; } .widget:nth-child(3) { animation-delay:.14s; } .widget:nth-child(4) { animation-delay:.21s; } .widget:hover, .card:hover { box-shadow: var(--s-lg) !important; transform: translateY(-3px) !important; border-color: rgba(99,102,241,.18) !important; } @keyframes slideUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } .widget-header { background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%) !important; border-bottom: 1px solid rgba(15,23,42,.05) !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; padding: 12px 18px !important; } .widget-title { font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--t2) !important; } .widget-count { background: linear-gradient(135deg, var(--p) 0%, var(--p-dark) 100%) !important; box-shadow: 0 2px 6px var(--p-glow) !important; } .empty-widget { color: var(--t3) !important; } /* ================================================================ BOUTONS — effets premium ================================================================ */ /* Base commune */ button, .btn, [role="button"], input[type="submit"], input[type="button"], a.btn-detail, a.btn-sync { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: -.01em !important; cursor: pointer !important; transition: transform var(--dur-s) var(--ease-sp), box-shadow var(--dur-s) var(--ease-q), filter var(--dur-s) var(--ease-q), background var(--dur-s) var(--ease-q) !important; } /* Bouton submit — indigo avec glow + shimmer */ button[type="submit"], .btn-primary, input[type="submit"] { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%) !important; background-size: 200% auto !important; color: #fff !important; border: none !important; border-radius: var(--r-sm) !important; padding: 10px 20px !important; box-shadow: var(--s-p), inset 0 1px 0 rgba(255,255,255,.15) !important; transition: background-position var(--dur) var(--ease-q), transform var(--dur-s) var(--ease-sp), box-shadow var(--dur-s) var(--ease-q) !important; } button[type="submit"]:hover, .btn-primary:hover, input[type="submit"]:hover { background-position: right center !important; transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; } button[type="submit"]:active, input[type="submit"]:active { transform: translateY(0) scale(.97) !important; box-shadow: 0 2px 8px rgba(99,102,241,.3) !important; } /* Shimmer */ button[type="submit"]::before, .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%); transition: left .6s var(--ease-q); } button[type="submit"]:hover::before, .btn-primary:hover::before { left: 150%; } /* Bouton cyan — sync */ .btn-sync { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #0ea5e9, #0284c7) !important; color: #fff !important; border: none !important; border-radius: var(--r-sm) !important; box-shadow: var(--s-c), inset 0 1px 0 rgba(255,255,255,.15) !important; } .btn-sync:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(6,182,212,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; filter: brightness(1.05) !important; } .btn-sync:active { transform: translateY(0) scale(.97) !important; } /* Bouton détail — outline */ .btn-detail { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: var(--surface) !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-xs) !important; color: var(--t2) !important; font-size: .78rem !important; font-weight: 500 !important; padding: 5px 12px !important; box-shadow: var(--s-xs) !important; text-decoration: none !important; } .btn-detail:hover { background: rgba(99,102,241,.06) !important; border-color: rgba(99,102,241,.35) !important; color: var(--p-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(99,102,241,.15) !important; } .btn-detail:active { transform: translateY(0) scale(.97) !important; } /* Bouton logout rouge */ button.nav-logout, a.nav-logout { border-radius: var(--r-sm) !important; } /* ================================================================ FORMULAIRES ================================================================ */ input, select, textarea { font-family: 'Inter', sans-serif !important; font-size: .875rem !important; border-radius: var(--r-sm) !important; border: 1.5px solid rgba(15,23,42,.12) !important; background: var(--surface) !important; color: var(--t1) !important; transition: border-color var(--dur-s) var(--ease-q), box-shadow var(--dur-s) var(--ease-q), background var(--dur-s) !important; } input::placeholder, textarea::placeholder { color: var(--t3) !important; } input:hover, select:hover, textarea:hover { border-color: rgba(99,102,241,.3) !important; } input:focus, select:focus, textarea:focus { border-color: var(--p) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.15), 0 1px 3px rgba(15,23,42,.06) !important; outline: none !important; background: #fff !important; } /* ================================================================ FILTRES ================================================================ */ .filter-btn { border-radius: 99px !important; font-weight: 500 !important; font-size: .77rem !important; transition: all var(--dur-s) var(--ease-sp) !important; } .filter-btn:hover { transform: translateY(-1px) scale(1.02) !important; box-shadow: var(--s-sm) !important; } .filter-btn:active { transform: scale(.97) !important; } .filter-btn.active-statut { background: linear-gradient(135deg, var(--p), var(--p-dark)) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--s-p) !important; transform: translateY(-1px) !important; } .filter-btn.active-pec-oui { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--s-g) !important; transform: translateY(-1px) !important; } .filter-btn.active-pec-non { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--s-r) !important; transform: translateY(-1px) !important; } .filter-select { border-radius: var(--r-sm) !important; border: 1.5px solid rgba(15,23,42,.12) !important; font-weight: 500 !important; } .filter-chip { background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(99,102,241,.06)) !important; border: 1px solid rgba(99,102,241,.25) !important; color: var(--p-dark) !important; border-radius: 99px !important; font-weight: 500 !important; } /* ================================================================ TABLEAUX ================================================================ */ .card table, table { border-collapse: collapse !important; } th { background: linear-gradient(180deg, #fafbfd 0%, #f4f5f8 100%) !important; font-size: .69rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--t3) !important; padding: 11px 18px !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; } td { padding: 13px 18px !important; border-bottom: 1px solid rgba(15,23,42,.05) !important; font-size: .865rem !important; color: var(--t1) !important; vertical-align: middle !important; transition: background var(--dur-s) !important; } tr:last-child td { border-bottom: none !important; } tbody tr { transition: background var(--dur-s) var(--ease-q) !important; } tbody tr:hover td { background: rgba(99,102,241,.04) !important; cursor: pointer; } /* Ligne cliquable — indicateur */ tbody tr:has(a) td:first-child::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 99px; background: transparent; vertical-align: middle; margin-right: 6px; transition: background var(--dur-s), transform var(--dur-s) var(--ease-sp); } tbody tr:has(a):hover td:first-child::before { background: var(--p); transform: scale(2.5); } /* ================================================================ BADGES ================================================================ */ .badge-statut { display: inline-flex !important; align-items: center !important; border-radius: 99px !important; font-size: .69rem !important; font-weight: 700 !important; letter-spacing: .03em !important; padding: 3px 10px !important; text-transform: uppercase !important; border: none !important; } .badge-statut.nouveau { background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; color: #1e40af !important; box-shadow: 0 1px 4px rgba(59,130,246,.2) !important; } .badge-statut.en_cours { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #92400e !important; box-shadow: 0 1px 4px rgba(245,158,11,.2) !important; } .badge-statut.traite { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #065f46 !important; box-shadow: 0 1px 4px rgba(16,185,129,.2) !important; } .badge-statut.cloture { background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important; color: #374151 !important; } .badge-statut.bloquee { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; color: #991b1b !important; box-shadow: 0 1px 4px rgba(239,68,68,.2) !important; } .pec-badge { border-radius: 99px !important; font-size: .69rem !important; font-weight: 700 !important; border: none !important; } .pec-ok { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #065f46 !important; box-shadow: 0 1px 4px rgba(16,185,129,.2) !important; } .pec-non { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; color: #991b1b !important; box-shadow: 0 1px 4px rgba(239,68,68,.2) !important; } .badge-cmd { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #92400e !important; border-radius: var(--r-xs) !important; font-weight: 700 !important; letter-spacing: .03em !important; } .badge-proj { background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important; color: #5b21b6 !important; border-radius: var(--r-xs) !important; font-weight: 700 !important; } /* ================================================================ ALERTES ================================================================ */ .alert { border-radius: var(--r-lg) !important; border: none !important; font-weight: 500 !important; padding: 12px 16px !important; font-size: .865rem !important; } .alert.success { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #065f46 !important; box-shadow: 0 4px 16px rgba(16,185,129,.2) !important; } .alert.error, .error { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; color: #991b1b !important; border: none !important; box-shadow: 0 4px 16px rgba(239,68,68,.2) !important; border-radius: var(--r-lg) !important; } /* ================================================================ BUNDLE ROWS ================================================================ */ .bundle-row { border-radius: var(--r-sm) !important; transition: background var(--dur-s) var(--ease-q), box-shadow var(--dur-s) var(--ease-q), transform var(--dur-s) var(--ease-sp) !important; text-decoration: none !important; } .bundle-row:hover { background: rgba(99,102,241,.05) !important; box-shadow: 0 2px 8px rgba(99,102,241,.1) !important; transform: translateX(3px) !important; } .bundle-tech { color: var(--p-dark) !important; font-weight: 600 !important; } .bundle-ref { font-weight: 700 !important; font-size: .85rem !important; } /* ================================================================ PAGE LOGIN ================================================================ */ body:has(.card input[type="password"]) { background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 40%, #0f1729 100%) !important; } body:has(.card input[type="password"])::after { background: radial-gradient(ellipse 800px 500px at 0% 0%, rgba(99,102,241,.2) 0%, transparent 60%), radial-gradient(ellipse 600px 400px at 100% 100%, rgba(139,92,246,.15) 0%, transparent 60%) !important; } .card { background: rgba(255,255,255,.97) !important; border-radius: var(--r-xl) !important; border: 1px solid rgba(255,255,255,.3) !important; box-shadow: var(--s-xl), 0 0 0 1px rgba(255,255,255,.05) !important; } .logo-area { gap: 12px !important; } .logo-icon { background: linear-gradient(135deg, var(--p), var(--p-dark)) !important; box-shadow: var(--s-p) !important; border-radius: var(--r-sm) !important; transition: transform var(--dur) var(--ease-sp) !important; } .logo-icon:hover { transform: rotate(-5deg) scale(1.05) !important; } /* ================================================================ PAGE HOME (dark) ================================================================ */ .access-card { border-radius: var(--r-xl) !important; transition: all .22s var(--ease) !important; position: relative; overflow: hidden; } .access-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 100%); opacity: 0; transition: opacity var(--dur) !important; } .access-card:hover::before { opacity: 1 !important; } .access-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.3) !important; } .logo-icon.admin { background: rgba(99,102,241,.2) !important; } /* ================================================================ ANIMATIONS ENTRÉE PAGE ================================================================ */ main { animation: pageIn .45s var(--ease) both !important; } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Stagger pour les rows de tableau */ tbody tr { animation: rowIn .3s var(--ease) both; } tbody tr:nth-child(1) { animation-delay:.04s; } tbody tr:nth-child(2) { animation-delay:.07s; } tbody tr:nth-child(3) { animation-delay:.10s; } tbody tr:nth-child(4) { animation-delay:.13s; } tbody tr:nth-child(5) { animation-delay:.16s; } tbody tr:nth-child(6) { animation-delay:.19s; } tbody tr:nth-child(7) { animation-delay:.22s; } tbody tr:nth-child(8) { animation-delay:.25s; } tbody tr:nth-child(9) { animation-delay:.28s; } tbody tr:nth-child(10) { animation-delay:.31s; } @keyframes rowIn { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } } /* ================================================================ INTERACTIONS JAVASCRIPT HELPERS ================================================================ */ .si-ripple { position: relative; overflow: hidden; } .si-ripple-wave { position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(0); animation: ripple .55s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* ================================================================ RÉDUCTION DE MOUVEMENT ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }