@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); /* ========================================================== B'Expert SAV — Thème B'Desk Identité : Montserrat, orange #f37021, navy #0c2340, surfaces vitrées, clair/sombre. Chargé EN DERNIER. Remappe les variables legacy (style.css) et dg-* (diagnostic). Hook dark mode : (anti-flash). ========================================================== */ :root { /* --- Tokens B'Desk --- */ --bdesk-orange: #f37021; --bdesk-orange-hover: #ff7e33; --bdesk-orange-dark: #df5d12; --bdesk-orange-soft: #fff5ee; --bdesk-orange-gradient: linear-gradient(135deg, #f37021 0%, #ff833e 100%); --bdesk-navy: #0c2340; --bdesk-navy-2: #16365c; --bdesk-navy-gradient: linear-gradient(135deg, #0c2340 0%, #1a436e 100%); --bdesk-bg: #f5f8fb; --bdesk-green: #10b981; --bdesk-red: #ef4444; --bdesk-ease: cubic-bezier(0.16, 1, 0.3, 1); /* --- Remap legacy style.css --- */ --boulanger-orange: #f37021; --boulanger-orange-dark: #df5d12; --bg: #f5f8fb; --panel: #ffffff; --panel-light: #edf3f8; --accent: #f37021; --accent-dark: #df5d12; --ok: #10b981; --warn: #f37021; --danger: #ef4444; --text: #0d1e32; --text-dim: #586e86; --border: #dbe4ee; --header-bg: #0c2340; --radius: 18px; /* --- Remap diagnostic.css --- */ --dg-orange: #f37021; --dg-orange-dark: #df5d12; --dg-orange-soft: #fff5ee; --dg-green: #10b981; --dg-green-soft: #ecfdf5; --dg-red: #ef4444; --dg-red-soft: #fef2f2; --dg-ink: #0d1e32; --dg-muted: #586e86; --dg-line: #dbe4ee; --dg-card: #ffffff; --dg-wash: #f5f8fb; --dg-font: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif; --dg-shadow: 0 8px 24px -4px rgba(12, 35, 64, .07), 0 2px 6px -1px rgba(12, 35, 64, .04); } html.dark-mode { --bdesk-orange-soft: #3a291f; --bg: #101820; --panel: #17232e; --panel-light: #1d2c38; --text: #edf3f7; --text-dim: #a7b8c7; --border: #304454; --header-bg: #0c2340; --dg-orange-soft: rgba(243, 112, 33, .14); --dg-green-soft: #17352d; --dg-red-soft: #3a2024; --dg-ink: #edf3f7; --dg-muted: #a7b8c7; --dg-line: #304454; --dg-card: #17232e; --dg-wash: #14202a; } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif; background-color: var(--bg); background-image: radial-gradient(at 100% 0%, rgba(243, 112, 33, .05) 0, transparent 50%), radial-gradient(at 0% 100%, rgba(12, 35, 64, .04) 0, transparent 50%); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; } html.dark-mode body { background-image: radial-gradient(at 100% 0%, rgba(243, 112, 33, .08) 0, transparent 50%), radial-gradient(at 0% 100%, rgba(64, 137, 190, .08) 0, transparent 50%); } ::selection { background: rgba(243, 112, 33, .25); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--boulanger-orange); background-clip: content-box; } html.dark-mode ::-webkit-scrollbar-thumb { background: #304454; background-clip: content-box; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(243, 112, 33, .45); outline-offset: 2px; } /* ---------- Sidebar façon B'Desk ---------- */ .sidebar { width: 260px; min-width: 260px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-right: 1px solid rgba(219, 228, 238, .85); box-shadow: 0 2px 12px rgba(12, 35, 64, .03); } html.dark-mode .sidebar { background: rgba(23, 35, 46, .96); border-right-color: #263947; } .sidebar-brand { border-bottom: 1px solid var(--border); padding: 22px 18px; gap: 10px; } .sidebar-brand h1 { color: var(--text); font-size: 18px; font-weight: 800; letter-spacing: -.8px; } .sidebar-brand .accent-word { color: var(--boulanger-orange); } /* Pastille logo dégradé comme B'Desk */ .brand-logo-mark { position: relative; overflow: hidden; display: inline-grid; width: 38px; height: 38px; flex-shrink: 0; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #ff9b5d 0%, #f37021 48%, #df5d12 100%); box-shadow: 0 6px 14px rgba(243, 112, 33, .32), inset 0 1px 0 rgba(255, 255, 255, .35); } .brand-logo-mark::before { position: absolute; top: -45%; left: -25%; width: 150%; height: 55%; content: ""; background: rgba(255, 255, 255, .24); transform: rotate(-35deg); pointer-events: none; } .brand-logo-mark img { position: relative; z-index: 1; width: 24px !important; height: 24px !important; border-radius: 0 !important; object-fit: contain; } .sidebar-nav { padding: 18px 14px; gap: 8px; } .sidebar-link { min-height: 52px; border-radius: 10px; color: var(--text-dim); font-size: 13px; font-weight: 700; letter-spacing: -.2px; transition: all .2s var(--bdesk-ease); } .sidebar-link .link-icon { font-size: 16px; transition: transform .2s ease; } .sidebar-link:hover { background: var(--panel-light); color: var(--text); } .sidebar-link:hover .link-icon { transform: scale(1.15); } .sidebar-link.active { background: var(--dg-orange-soft); color: var(--boulanger-orange-dark); font-weight: 800; } html.dark-mode .sidebar-link.active { color: #ffb37e; } .sidebar-link:active { transform: scale(.98); } .sidebar-footer { border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } /* Bouton thème */ .theme-toggle { width: 100%; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-light); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s var(--bdesk-ease); } .theme-toggle:hover { border-color: var(--boulanger-orange); color: var(--boulanger-orange-dark); } .theme-toggle .tt-track { width: 40px; height: 22px; flex-shrink: 0; border-radius: 999px; background: rgba(12, 35, 64, .14); position: relative; transition: background .2s var(--bdesk-ease); } .theme-toggle .tt-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: left .2s var(--bdesk-ease); display: grid; place-items: center; font-size: 10px; } html.dark-mode .theme-toggle .tt-track { background: linear-gradient(135deg, #0c2340, #1a436e); } html.dark-mode .theme-toggle .tt-thumb { left: 20px; } /* ---------- Boutons ---------- */ .btn { font-family: inherit; border-radius: 12px; transition: all .2s var(--bdesk-ease); } .btn-primary { background: linear-gradient(135deg, #f37021 0%, #ff833e 100%); box-shadow: 0 4px 14px rgba(243, 112, 33, .28); } .btn-primary:hover { background: linear-gradient(135deg, #ff7e33 0%, #f37021 100%); box-shadow: 0 6px 20px rgba(243, 112, 33, .4); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { transform: none !important; box-shadow: none !important; } .btn-secondary:hover { border-color: #cbd5e1; transform: translateY(-1px); } .sidebar-action-btn { border-radius: 12px; font-family: inherit; background: linear-gradient(135deg, #f37021 0%, #ff833e 100%); box-shadow: 0 4px 14px rgba(243, 112, 33, .28); transition: all .2s var(--bdesk-ease); } .sidebar-action-btn:hover { background: linear-gradient(135deg, #ff7e33 0%, #f37021 100%); transform: translateY(-1px); } .sidebar-action-btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text-dim); box-shadow: none; } .sidebar-action-btn.secondary:hover { border-color: var(--boulanger-orange); color: var(--boulanger-orange-dark); } .mobile-menu-toggle { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(12, 35, 64, .12); } /* ---------- Toast admin re-skinné ---------- */ .toast { background: #0c2340 !important; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 12px 32px rgba(12, 35, 64, .28) !important; border-radius: 14px !important; font-family: inherit; font-weight: 700; animation: bdesk-toast-in .3s var(--bdesk-ease); } .toast.error { background: #dc2626 !important; } @keyframes bdesk-toast-in { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Bloc copier : navy B'Desk ---------- */ .copy-preview { background: #0c2340; border: 1px solid #16365c; } html.dark-mode .copy-preview { background: #0a1220; } /* ---------- Footer ---------- */ .bdesk-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1020px; margin: 28px auto 0; padding: 20px 4px 8px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; font-weight: 600; } .bdesk-footer strong { color: var(--text); font-weight: 800; } /* ---------- Cartes : ombres B'Desk ---------- */ .card, .symptom-item, .check-item, .admin-card, .ai-box, .dg-stepper { box-shadow: 0 3px 10px rgba(12, 35, 64, .05); } /* Login admin */ .login-screen { font-family: inherit; } .login-box { box-shadow: 0 16px 36px -6px rgba(12, 35, 64, .11); border: 1px solid var(--border); }