:root { --aura-layer-notifications-pill: 9000; --aura-layer-messages-panel: 10300; --aura-layer-notifications-sheet: 10200; --aura-layer-aether-start: 11000; --ui-space-1: 0.25rem; --ui-space-2: 0.5rem; --ui-space-3: 0.75rem; --ui-space-4: 1rem; --ui-space-5: 1.5rem; --ui-space-6: 2rem; --ui-card-padding: var(--ui-space-4); /* radius */ --ui-radius-sm: 0.375rem; --ui-radius-md: 0.75rem; --ui-radius-lg: 1.25rem; --ui-radius-pill: 999px; /* elevation / shadow */ --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --ui-shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08); --ui-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.14); --ui-shadow-xl: 0 7px 18px rgba(0, 0, 0, 0.12); --ui-focus-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); --ui-focus-ring-soft: 2px solid color-mix(in srgb, #60a5fa 52%, rgba(255, 255, 255, 0.55)); /* contrast / text */ --ui-text-primary: #ffffff; --ui-text-primary-inverse: #ffffff; --ui-text-muted: rgba(255, 255, 255, 0.76); --ui-text-on-accent: #ffffff; --ui-surface-muted: var(--ui-surface-2); --ui-border-subtle: rgba(255, 255, 255, 0.12); --ui-border-strong: rgba(255, 255, 255, 0.2); --ui-surface-1: rgba(255, 255, 255, 0.04); --ui-surface-2: rgba(255, 255, 255, 0.08); --ui-surface-3: rgba(255, 255, 255, 0.12); /* typography */ --ui-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; --ui-font-size-sm: 0.875rem; --ui-font-size-md: 1rem; --ui-font-size-lg: 1.125rem; --ui-line-height-tight: 1.2; --ui-line-height-normal: 1.5; --ui-font-weight-regular: 400; --ui-font-weight-medium: 500; --ui-font-weight-semibold: 600; --ui-font-weight-bold: 700; --ui-motion-fast: 0.16s; --ui-motion-medium: 0.32s; --ui-ease-emphasized: cubic-bezier(0.2, 0.7, 0.22, 1); /* legacy / app tokens */ --gold-light: #F5A623; --primary-color: #444; --secondary-color: #777; --card-title: #333; --icons-lines: #3D3D3D; --buttons: #F5A623; --bs-text-secondary: #ffffff; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-danger: #dc3545; --bs-warning: #ffc107; --bs-info: #0dcaf0; --bs-primary-light: #b97dff; --ui-status-success-bg: rgba(25, 135, 84, 0.22); --ui-status-success-border: rgba(25, 135, 84, 0.45); --ui-status-success-text: #d1ffe8; --ui-stock-meta-text: rgba(255, 255, 255, 0.76); --ui-stock-meta-sub-text: #67efb8; --ui-stock-meta-separator-text: rgba(255, 255, 255, 0.48); --ui-stock-meta-virtual-text: #5fd6ff; --ui-status-warning-bg: rgba(255, 193, 7, 0.22); --ui-status-warning-border: rgba(255, 193, 7, 0.45); --ui-status-warning-text: #ffe9a8; --ui-status-danger-bg: rgba(220, 53, 69, 0.22); --ui-status-danger-border: rgba(220, 53, 69, 0.45); --ui-status-danger-text: #ffd9de; --ui-shadow-card: var(--ui-shadow-lg); --ui-shadow-card-hover: var(--ui-shadow-xl); --ui-motion-lift-sm: translateY(-1px); --ui-motion-duration-sm: 0.18s; --ui-motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ui-transition-lift-shadow: transform var(--ui-motion-duration-sm) var(--ui-motion-ease-standard), box-shadow var(--ui-motion-duration-sm) var(--ui-motion-ease-standard); /* short premium document card set */ --ui-card-radius-md: 18px; --ui-card-radius-lg: 20px; --ui-card-shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.08); --ui-card-shadow-soft-hover: 0 9px 22px rgba(15, 23, 42, 0.11); --ui-card-space-y: 0.875rem; --ui-card-space-y-comfortable: 1rem; --ui-card-surface: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.08)) 90%, transparent); --ui-card-surface-border: color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.18)) 84%, transparent); --ui-card-surface-blur: var(--ui-glass-blur-soft, blur(10px) saturate(120%)); --ui-dropdown-blur: var(--ui-glass-blur-soft, blur(16px) saturate(130%)); --ui-info-bg: rgba(13, 202, 240, 0.2); --ui-info-border: rgba(13, 202, 240, 0.45); --ui-status-info-bg: var(--ui-info-bg); --ui-status-info-border: var(--ui-info-border); --ui-status-info-text: #b8f4ff; --ui-status-progress-bg: rgba(139, 92, 246, 0.26); --ui-status-progress-border: rgba(139, 92, 246, 0.52); --ui-status-progress-text: #6d28d9; --ui-status-received-bg: rgba(59, 130, 246, 0.28); --ui-status-received-border: rgba(59, 130, 246, 0.56); --ui-status-received-text: #1d4ed8; --ui-attention-accent-start: #ffd76a; --ui-attention-accent-end: #ffbe3d; --ui-status-pulse: rgba(40, 167, 69, 0.4); --notif-accent: #c4b5fd; --notif-accent-soft: rgba(167, 139, 250, 0.2); --marketing-topbar-dot: #c4b5fd; --marketing-topbar-dot-soft: rgba(167, 139, 250, 0.2); --dashboard-shell-radius: 32px; --dashboard-module-radius: 24px; --notif-surface-start: rgba(14, 14, 20, 0.72); --notif-surface-end: rgba(12, 12, 16, 0.52); --notif-surface-border: color-mix(in srgb, rgba(255, 255, 255, 0.92) 12%, transparent); --notif-text: rgba(248, 250, 252, 0.96); --notif-text-muted: rgba(226, 232, 240, 0.72); --notif-important-bg: rgba(167, 139, 250, 0.38); --notif-important-ring: rgba(196, 181, 253, 0.72); --notif-sheet-surface: rgba(10, 10, 16, 0.9); --notif-item-surface: color-mix(in srgb, rgba(255, 255, 255, 0.92) 7%, transparent); /* repair-order premium layer */ --ro-pill: var(--ui-radius-pill); --ro-accent-color: var(--bs-primary); --ro-text: var(--ui-text-primary, #ffffff); --ro-interaction-lift: translateY(-1px); --ro-focus-ring: 0 0 0 0.22rem color-mix(in srgb, var(--ro-accent-color) 36%, transparent); --ro-btn-transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; --ro-theme-surface-gradient: linear-gradient(160deg, color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, .08)) 90%, transparent), color-mix(in srgb, var(--ui-surface-2, rgba(255, 255, 255, .14)) 88%, transparent) ); --ro-theme-border: color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, .28)) 82%, transparent); --ro-theme-shadow: var(--ui-shadow-md); --ro-theme-text-gradient: linear-gradient(90deg, var(--ui-text-primary, #fff), color-mix(in srgb, var(--ro-accent-color) 38%, var(--ui-text-primary, #fff) 62%) ); /* payment badges */ --pm-text: #f8fafc; --pm-bg-default-start: rgba(255, 255, 255, 0.2); --pm-bg-default-end: rgba(255, 255, 255, 0.08); --pm-border: rgba(255, 255, 255, 0.28); --pm-shadow: 0 6px 16px rgba(15, 23, 42, 0.14); --pm-accent-cash: #7ee8c5; --pm-accent-credit-card: #8ab4ff; --pm-accent-check: #f7b6ff; --pm-accent-bank-transfer: #a7f3d0; --pm-accent-paypal: #7dc6ff; --pm-accent-gift-card: #ffcc80; --pm-accent-installment-4x: #f9a8d4; --pm-accent-other: #c4b5fd; /* POS semantic palette (Apple-like calm grays) */ --pos-category-palette-size: 12; --pos-category-tile-default-bg: color-mix(in srgb, #dbeafe 82%, rgba(255, 255, 255, 0.18)); --pos-category-tile-text: #0f172a; --pos-category-tile-meta-text: color-mix(in srgb, #0f172a 72%, #475569 28%); --pos-category-tile-border: color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent); --pos-category-tile-border-hover: color-mix(in srgb, rgba(15, 23, 42, 0.24) 66%, transparent); --pos-category-pastel-glass-01: color-mix(in srgb, #ffd7e5 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-02: color-mix(in srgb, #ffe7c7 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-03: color-mix(in srgb, #fff1bf 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-04: color-mix(in srgb, #d7f4e4 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-05: color-mix(in srgb, #d7ebff 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-06: color-mix(in srgb, #e4ddff 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-07: color-mix(in srgb, #ffd9cf 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-08: color-mix(in srgb, #d8f4ef 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-09: color-mix(in srgb, #dfe5ff 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-10: color-mix(in srgb, #f8dfff 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-11: color-mix(in srgb, #fce7c2 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-glass-12: color-mix(in srgb, #dff3d6 82%, rgba(255, 255, 255, 0.18)); --pos-category-pastel-velvet-01: color-mix(in srgb, #ffd7e5 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-02: color-mix(in srgb, #ffe7c7 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-03: color-mix(in srgb, #fff1bf 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-04: color-mix(in srgb, #d7f4e4 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-05: color-mix(in srgb, #d7ebff 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-06: color-mix(in srgb, #e4ddff 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-07: color-mix(in srgb, #ffd9cf 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-08: color-mix(in srgb, #d8f4ef 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-09: color-mix(in srgb, #dfe5ff 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-10: color-mix(in srgb, #f8dfff 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-11: color-mix(in srgb, #fce7c2 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-velvet-12: color-mix(in srgb, #dff3d6 78%, rgba(15, 23, 42, 0.08)); --pos-category-pastel-current-01: var(--pos-category-pastel-glass-01); --pos-category-pastel-current-02: var(--pos-category-pastel-glass-02); --pos-category-pastel-current-03: var(--pos-category-pastel-glass-03); --pos-category-pastel-current-04: var(--pos-category-pastel-glass-04); --pos-category-pastel-current-05: var(--pos-category-pastel-glass-05); --pos-category-pastel-current-06: var(--pos-category-pastel-glass-06); --pos-category-pastel-current-07: var(--pos-category-pastel-glass-07); --pos-category-pastel-current-08: var(--pos-category-pastel-glass-08); --pos-category-pastel-current-09: var(--pos-category-pastel-glass-09); --pos-category-pastel-current-10: var(--pos-category-pastel-glass-10); --pos-category-pastel-current-11: var(--pos-category-pastel-glass-11); --pos-category-pastel-current-12: var(--pos-category-pastel-glass-12); --pos-theme-vibrant-bg-start: color-mix(in srgb, var(--bs-primary) 50%, #0a1738 50%); --pos-theme-vibrant-bg-mid: color-mix(in srgb, var(--bs-primary) 22%, #070f2a 78%); --pos-theme-vibrant-bg-end: color-mix(in srgb, var(--ui-surface-1) 45%, #050916 55%); --pos-theme-vibrant-glow-1: color-mix(in srgb, var(--bs-info) 42%, transparent); --pos-theme-vibrant-glow-2: color-mix(in srgb, var(--bs-primary-light) 36%, transparent); --pos-theme-vibrant-text: color-mix(in srgb, var(--ui-text-primary) 92%, #dbeafe 8%); --pos-theme-contrast-bg: #020617; --pos-theme-contrast-text: #f8fafc; --pos-theme-contrast-border: rgba(248, 250, 252, 0.6); --pos-scan-match-outline: #22c55e; --pos-payment-method-active-text: var(--ui-on-accent, var(--ui-text-primary)); --pos-premium-badge-text: var(--ui-text-primary); --pos-split-card-border: rgba(255, 255, 255, 0.15); --pos-split-card-start: rgba(59, 130, 246, 0.22); --pos-split-card-end: rgba(16, 185, 129, 0.16); --pos-split-card-warning-start: rgba(148, 163, 184, 0.24); --pos-split-card-warning-end: rgba(100, 116, 139, 0.18); --pos-split-card-ok-start: rgba(16, 185, 129, 0.25); --pos-split-card-ok-end: rgba(14, 165, 233, 0.16); --pos-validation-dot-amber: #94a3b8; --pos-validation-dot-amber-ring: rgba(148, 163, 184, 0.18); --pos-validation-dot-green: #22c55e; --pos-validation-dot-green-ring: rgba(34, 197, 94, 0.16); --pos-validation-dot-red: #ef4444; --pos-validation-dot-red-ring: rgba(239, 68, 68, 0.18); /* POS typography scale (iOS-inspired) */ --pos-type-display: clamp(1.55rem, 1.1rem + 1.1vw, 2.1rem); --pos-type-title: clamp(1.1rem, .95rem + .45vw, 1.35rem); --pos-type-subtitle: .95rem; --pos-type-meta: .78rem; --pos-type-label: .86rem; --pos-type-track-tight: -0.015em; --pos-type-track-normal: 0.01em; } body.ui-material-glass { --ro-theme-surface-gradient: linear-gradient(140deg, color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, .22)) 78%, transparent), color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, .16)) 88%, transparent) ); --ro-theme-border: color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, .3)) 82%, transparent); } body.ui-material-velvet { --ro-theme-surface-gradient: linear-gradient(150deg, color-mix(in srgb, var(--ui-surface-1, rgba(42, 27, 27, .9)) 90%, transparent), color-mix(in srgb, var(--ui-surface-2, rgba(26, 17, 17, .9)) 88%, transparent) ); --ro-theme-border: color-mix(in srgb, var(--ui-surface-border, rgba(255, 223, 196, .28)) 78%, transparent); --ro-theme-shadow: 0 8px 20px color-mix(in srgb, var(--ui-text-primary, #000) 24%, transparent); --ro-theme-text-gradient: linear-gradient(95deg, color-mix(in srgb, var(--ro-accent-color) 45%, var(--ui-status-warning-text, #f59e0b) 55%), color-mix(in srgb, var(--ro-accent-color) 35%, var(--ui-status-danger-text, #f472b6) 65%) 52%, color-mix(in srgb, var(--ro-accent-color) 55%, var(--ui-text-primary, #38bdf8) 45%) ); --pos-category-pastel-current-01: var(--pos-category-pastel-velvet-01); --pos-category-pastel-current-02: var(--pos-category-pastel-velvet-02); --pos-category-pastel-current-03: var(--pos-category-pastel-velvet-03); --pos-category-pastel-current-04: var(--pos-category-pastel-velvet-04); --pos-category-pastel-current-05: var(--pos-category-pastel-velvet-05); --pos-category-pastel-current-06: var(--pos-category-pastel-velvet-06); --pos-category-pastel-current-07: var(--pos-category-pastel-velvet-07); --pos-category-pastel-current-08: var(--pos-category-pastel-velvet-08); --pos-category-pastel-current-09: var(--pos-category-pastel-velvet-09); --pos-category-pastel-current-10: var(--pos-category-pastel-velvet-10); --pos-category-pastel-current-11: var(--pos-category-pastel-velvet-11); --pos-category-pastel-current-12: var(--pos-category-pastel-velvet-12); } /* Sidebar desktop: rail compact qui s'ouvre sans bouger le contenu */ :root { --sidebar-rail-width: 80px; --sidebar-expanded-width: 268px; --sidebar-icon-size: 24px; --sidebar-anim-duration: 520ms; --sidebar-anim-ease: cubic-bezier(0.22, 1, 0.36, 1); --sidebar-open-delay: 90ms; --sidebar-closed-radius: 40px; --sidebar-open-radius: 32px; --sidebar-label-delay: 0ms; --sidebar-logo-delay: 0ms; /* Rail latéral : surface shell sapphire (header index) — pas obsidian */ --aura-sidebar-glass-bg: var(--aura-doc-shell-surface-bg, var(--aura-doc-header-contract-bg, var(--doc-card-bg))); --aura-sidebar-glass-border: var(--aura-doc-shell-surface-border, var(--aura-doc-header-contract-border, var(--doc-card-border))); --aura-sidebar-glass-blur: var(--aura-doc-shell-surface-blur, var(--aura-doc-header-contract-blur, var(--doc-card-blur))); --aura-sidebar-glass-shadow: var(--aura-doc-shell-surface-shadow, var(--aura-doc-header-contract-shadow, var(--doc-card-shadow))); /* Cartes posées sur une coque documentaire : teinte proche sidebar, blur allégé (un seul passage) */ --aura-sidebar-glass-bg-nested: color-mix(in srgb, var(--aura-doc-shell-surface-bg, var(--aura-doc-header-contract-bg, var(--doc-card-bg))) 92%, rgba(255, 255, 255, 0.04)); --aura-sidebar-glass-blur-nested: var(--aura-doc-shell-surface-blur, var(--aura-doc-header-contract-blur, var(--doc-card-blur))); /* * --aura-sidebar-tint-obsidian : teinte charcoal historique du rail latéral (dashboard Clients / Projets actifs). * color-mix(in srgb, var(--ui-surface-bg, rgba(0, 0, 0, 0.42)) 78%, rgba(12, 12, 14, 0.84)); */ --aura-sidebar-tint-obsidian: color-mix(in srgb, var(--ui-surface-bg, rgba(0, 0, 0, 0.42)) 78%, rgba(12, 12, 14, 0.84)); --aura-dashboard-surface-tint: var(--aura-sidebar-tint-obsidian); --aura-dashboard-surface-tint-hover: color-mix(in srgb, var(--aura-sidebar-tint-obsidian) 80%, rgba(8, 8, 10, 0.34)); --aura-dashboard-surface-bg: var(--aura-dashboard-surface-tint); --aura-dashboard-surface-border: color-mix(in srgb, rgba(255, 255, 255, 0.92) 9%, transparent); --aura-dashboard-surface-shadow: 0 6px 20px rgba(0, 0, 0, 0.26); --aura-dashboard-surface-blur: blur(12px) saturate(1.08); /* Voile Clients / Projets actifs — référence pour tout le dashboard */ --aura-dashboard-surface-overlay: linear-gradient(118deg, rgba(10, 10, 12, 0.88) 0%, rgba(10, 10, 12, 0.5) 36%, rgba(10, 10, 12, 0.24) 58%, rgba(10, 10, 12, 0.12) 78%, rgba(10, 10, 12, 0.06) 100%), linear-gradient(180deg, rgba(10, 10, 12, 0.05), rgba(10, 10, 12, 0.4) 100%); } input, .form-control { background: rgba(215, 215, 215, 0.15); border: 1px solid rgba(90, 90, 90, 0.85); color: white; } /* Sidebar */ .sidebar { --sidebar-nav-inline: 0.45rem; --sidebar-icon-inset: calc((var(--sidebar-rail-width) - var(--sidebar-icon-size)) / 2 - 2px - var(--sidebar-nav-inline)); position: sticky; top: 120px; width: var(--sidebar-rail-width); height: auto; overflow: visible; padding-left: 0; padding-right: 0; box-sizing: border-box; border-radius: var(--sidebar-closed-radius); background: var(--aura-sidebar-glass-bg); backdrop-filter: var(--aura-sidebar-glass-blur); -webkit-backdrop-filter: var(--aura-sidebar-glass-blur); border: 1px solid var(--aura-sidebar-glass-border); box-shadow: var(--aura-sidebar-glass-shadow); transition: width var(--sidebar-anim-duration) var(--sidebar-anim-ease), background-color 420ms var(--sidebar-anim-ease), border-radius var(--sidebar-anim-duration) var(--sidebar-anim-ease), box-shadow 420ms var(--sidebar-anim-ease), transform var(--sidebar-anim-duration) var(--sidebar-anim-ease); transition-delay: 0ms; will-change: width, box-shadow; z-index: 1060; } .sidebar:hover, .sidebar:focus-within { --sidebar-label-delay: 90ms; --sidebar-logo-delay: 120ms; } .sidebar .nav, .sidebar .nav-item, .sidebar .nav-link { width: 100%; box-sizing: border-box; } .sidebar .nav { padding-inline: var(--sidebar-nav-inline); } .sidebar .nav-link { display: flex; align-items: center; justify-content: flex-start; gap: 0; min-height: 48px; padding: .76rem 0.55rem .76rem var(--sidebar-icon-inset); border: 1px solid transparent; border-radius: 16px; white-space: nowrap; overflow: hidden; transition: padding-right var(--sidebar-anim-duration) var(--sidebar-anim-ease), gap var(--sidebar-anim-duration) var(--sidebar-anim-ease), background-color 260ms ease, border-color 260ms ease, border-radius var(--sidebar-anim-duration) var(--sidebar-anim-ease), color 180ms ease; } .sidebar .nav-link:hover, .sidebar .nav-link:focus-visible { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.045); border-radius: 18px; box-shadow: none; transform: none; } .sidebar .sidebar-icon-box { flex: 0 0 var(--sidebar-icon-size); width: var(--sidebar-icon-size); height: var(--sidebar-icon-size); aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 0; background: transparent; border: 0; box-shadow: none; padding: 0; transition: transform var(--sidebar-anim-duration) var(--sidebar-anim-ease), opacity 180ms ease; } .sidebar .sidebar-icon { font-size: 22px; line-height: 1; color: inherit; transition: transform var(--sidebar-anim-duration) var(--sidebar-anim-ease), opacity 180ms ease, color 180ms ease, filter 220ms ease; } /* Pictos menu latéral : gris atténué (aligné topbar dashboard), page active en blanc + halo */ .sidebar .nav-item:not(.active-tab) > .nav-link { color: rgba(203, 213, 225, 0.58); } .sidebar .nav-item:not(.active-tab) > .nav-link:hover, .sidebar .nav-item:not(.active-tab) > .nav-link:focus-visible { color: rgba(226, 232, 240, 0.72); } .sidebar .nav-item.active-tab > .nav-link { color: var(--ui-text-primary, #fff); overflow: visible; } .sidebar .nav-item.active-tab > .nav-link:hover, .sidebar .nav-item.active-tab > .nav-link:focus-visible { background: transparent; border-color: transparent; } .sidebar .nav-item.active-tab .sidebar-icon { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.62)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.32)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.16)); } .sidebar .sidebar-link-label { display: inline-block; max-width: 0; opacity: 0; transform: translateX(-8px); overflow: hidden; transition: max-width var(--sidebar-anim-duration) var(--sidebar-anim-ease) var(--sidebar-label-delay), opacity 260ms ease var(--sidebar-label-delay), transform var(--sidebar-anim-duration) var(--sidebar-anim-ease) var(--sidebar-label-delay); } .sidebar:hover .sidebar-link-label, .sidebar:focus-within .sidebar-link-label { max-width: 16rem; opacity: 1; transform: translateX(0); } .sidebar-mode-expandable .sidebar:hover .nav-link, .sidebar-mode-expandable .sidebar:focus-within .nav-link { justify-content: flex-start; gap: .75rem; padding-left: var(--sidebar-icon-inset); padding-right: 1rem; } .sidebar:not(:hover):not(:focus-within) .nav-link, .sidebar-mode-standard .sidebar .nav-link, .sidebar-mode-standard .sidebar:hover .nav-link, .sidebar-mode-standard .sidebar:focus-within .nav-link { justify-content: flex-start; gap: 0; padding-left: var(--sidebar-icon-inset); padding-right: .55rem; } .sidebar .header-logo-zone, .sidebar .blockchain-logo-container, .sidebar .blockchain-logo { overflow: hidden; } .sidebar .header-logo-zone { max-height: 0; opacity: 0; transform: translateY(8px) scale(0.96); transition: max-height var(--sidebar-anim-duration) var(--sidebar-anim-ease) var(--sidebar-logo-delay), opacity 260ms ease var(--sidebar-logo-delay), transform var(--sidebar-anim-duration) var(--sidebar-anim-ease) var(--sidebar-logo-delay); } .sidebar:hover .header-logo-zone, .sidebar:focus-within .header-logo-zone { max-height: 22rem; opacity: 1; transform: translateY(0) scale(1); } .sidebar .active-tab { background: transparent; border-radius: 14px; } .sidebar-mode-expandable .sidebar:hover .active-tab, .sidebar-mode-expandable .sidebar:focus-within .active-tab { background-color: transparent; } .sidebar:not(:hover):not(:focus-within) .sidebar-icon-box { transform: scale(1); } .sidebar-mode-expandable .sidebar { width: var(--sidebar-rail-width); background: var(--aura-sidebar-glass-bg); backdrop-filter: var(--aura-sidebar-glass-blur); -webkit-backdrop-filter: var(--aura-sidebar-glass-blur); border: 1px solid var(--aura-sidebar-glass-border); box-shadow: var(--aura-sidebar-glass-shadow); border-radius: var(--sidebar-closed-radius); } .sidebar-mode-expandable .sidebar:hover, .sidebar-mode-expandable .sidebar:focus-within { width: var(--sidebar-expanded-width); overflow-x: hidden; overflow-y: auto; background: var(--aura-doc-shell-surface-bg-hover, var(--aura-doc-header-contract-bg-hover, var(--aura-sidebar-glass-bg))); border-radius: var(--sidebar-open-radius); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.025); transition-delay: var(--sidebar-open-delay); } .sidebar-mode-expandable .sidebar:hover .nav-item.active-tab > .nav-link, .sidebar-mode-expandable .sidebar:focus-within .nav-item.active-tab > .nav-link { overflow: hidden; } .sidebar-mode-expandable .sidebar .sidebar-link-label { max-width: 0; opacity: 0; transform: translateX(-8px); } .sidebar-mode-expandable .sidebar:hover .sidebar-link-label, .sidebar-mode-expandable .sidebar:focus-within .sidebar-link-label { max-width: 16rem; opacity: 1; transform: translateX(0); } .sidebar-mode-expandable .sidebar .header-logo-zone { max-height: 0; opacity: 0; transform: translateY(8px) scale(0.96); } .sidebar-mode-expandable .sidebar:hover .header-logo-zone, .sidebar-mode-expandable .sidebar:focus-within .header-logo-zone { max-height: 22rem; opacity: 1; transform: translateY(0) scale(1); } .sidebar-mode-standard .sidebar { width: var(--sidebar-rail-width); background: var(--aura-sidebar-glass-bg); backdrop-filter: var(--aura-sidebar-glass-blur); -webkit-backdrop-filter: var(--aura-sidebar-glass-blur); border: 1px solid var(--aura-sidebar-glass-border); box-shadow: var(--aura-sidebar-glass-shadow); border-radius: var(--sidebar-closed-radius); } .sidebar-mode-standard .sidebar:hover, .sidebar-mode-standard .sidebar:focus-within { width: var(--sidebar-rail-width); background: var(--aura-sidebar-glass-bg); border-radius: var(--sidebar-closed-radius); box-shadow: var(--aura-sidebar-glass-shadow); } .sidebar-mode-standard .sidebar .nav-link { justify-content: flex-start; gap: 0; padding-left: var(--sidebar-icon-inset); padding-right: .55rem; } .sidebar-mode-standard .sidebar .sidebar-link-label { max-width: 0; opacity: 0; transform: translateX(-8px); } .sidebar-mode-standard .sidebar .header-logo-zone { max-height: 0; opacity: 0; transform: translateY(8px) scale(0.96); } .sidebar-mode-standard .sidebar .nav-link:hover, .sidebar-mode-standard .sidebar .nav-link:focus-visible { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.045); box-shadow: none; transform: none; } .sidebar-mode-standard .sidebar:hover .sidebar-link-label, .sidebar-mode-standard .sidebar:focus-within .sidebar-link-label { max-width: 0; opacity: 0; transform: translateX(-8px); } .sidebar-mode-standard .sidebar:hover .header-logo-zone, .sidebar-mode-standard .sidebar:focus-within .header-logo-zone { max-height: 0; opacity: 0; transform: translateY(8px) scale(0.96); } .main-content { position: relative; z-index: 0; padding: 0px; margin-bottom: 140px; } .container { padding-left: 0px; padding-right: 0px; } a.topbar-date-label, a.topbar-date-label:hover, a.topbar-date-label:focus, a.topbar-date-label:focus-visible { color: inherit; text-decoration: none; } @media screen and (min-width: 1460px) { body { font-size: 14px; } .sidebar { --sidebar-rail-width: 74px; } .sidebar-icon { font-size: 18px; } } @media (max-width: 767px) { .container { padding-left: 8px; padding-right: 8px; } .topbar-shell { padding-top: .35rem !important; padding-bottom: .2rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } .topbar-row { gap: .35rem; } .topbar-date { flex: 1 1 auto; min-width: 0; padding-left: 0 !important; padding-right: .2rem !important; display: flex; align-items: center; justify-content: flex-start; text-align: left; } .topbar-date > span, .topbar-date > a.topbar-date-label { font-size: .72rem; line-height: 1.05; letter-spacing: .01em; } .topbar-controls { flex: 0 0 auto; margin-left: auto; gap: .35rem !important; padding-left: .25rem !important; padding-right: .1rem !important; justify-content: flex-end; } .topbar-controls .toggle-btn { width: 31px !important; height: 31px !important; min-width: 31px; min-height: 31px; } .topbar-controls .toggle-btn i { font-size: .88rem; } .notification-fab { position: relative; left: auto; bottom: auto; transform: none; z-index: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .topbar-controls .topbar-actions .toggle-btn, .topbar-controls .topbar-actions .topbar-action-btn, .notification-fab #notification-btn { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; padding: 0; gap: 0; background: transparent; box-shadow: none; color: inherit; } .notification-fab #notification-btn::after { content: none; } .notification-fab #unread-count { top: 0; right: 0; left: auto; transform: translate(42%, -42%); } .topbar-controls .dropdown-toggle, .topbar-controls .topbar-avatar-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } .topbar-controls .topbar-avatar-badge { width: 26px !important; height: 26px !important; flex: 0 0 26px; font-size: 0.68rem !important; } .topbar-avatar .dropdown-menu { right: .25rem; left: auto; transform: translateX(0); } } /* Cards */ .card { border-radius: 12px; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Boutons */ .btn-primary { background-color: #6c63ff; border: none; border-radius: 20px; padding: 10px 20px; font-size: 14px; transition: background-color 0.2s ease; } .btn-primary:hover { background-color: #5a52e0; } .header-top-shell { flex-wrap: wrap; } .header-top-title-group { min-width: 0; } .header-top-title { font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em; } .header-top-actions { flex: 0 0 auto; } .header-top-action-btn { border-radius: 999px; } .header-top-custom { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 78%, transparent); border: 1px solid color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.18)) 82%, transparent); color: var(--ui-text-muted, rgba(255, 255, 255, 0.76)); font-size: .9rem; } .toggle-btn { color: #fff; background: transparent; } .topbar-action-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 auto; padding: 0; } .topbar-action-btn i { font-size: 1rem; pointer-events: none; } .topbar-actions .topbar-action-btn .visually-hidden, .topbar-actions .topbar-marketing-dot, .topbar-notification-badge { pointer-events: none; } .topbar-action-btn--marketing { position: relative; } .topbar-marketing-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 999px; background: var(--marketing-topbar-dot, #c4b5fd); box-shadow: 0 0 0 3px var(--marketing-topbar-dot-soft, rgba(167, 139, 250, 0.2)); } .topbar-action-btn.is-active { background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.18)) 88%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.24)) 88%, transparent); } .topbar-appearance-panel__inner { padding: 14px 16px; border-radius: 22px; background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 90%, transparent); border: 1px solid color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.18)) 84%, transparent); box-shadow: var(--ui-shadow-md, 0 18px 44px rgba(0, 0, 0, 0.16)); backdrop-filter: blur(18px); } .topbar-material-switch { display: flex; justify-content: center; } .topbar-material-switch__form { width: 100%; } .topbar-material-chips { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; } .topbar-material-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.2)) 82%, transparent); background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 88%, transparent); color: var(--ui-text-primary, #fff); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .topbar-material-chip:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.14)); } .topbar-material-chip__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ui-accent, rgba(255, 255, 255, 0.18)) 18%, transparent); color: inherit; flex: 0 0 auto; } .topbar-material-chip__copy { display: grid; gap: 1px; min-width: 0; } .topbar-material-chip__copy strong { font-size: .9rem; line-height: 1.1; } .topbar-material-chip__copy span { font-size: .72rem; line-height: 1.15; color: var(--ui-text-muted, rgba(255, 255, 255, 0.72)); } .topbar-material-chips .btn-check:checked + .topbar-material-chip { border-color: color-mix(in srgb, var(--brand-primary, #84ccff) 48%, transparent); background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.18)) 90%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #84ccff) 24%, transparent), var(--ui-shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.14)); } .topbar-appearance-panel__background-blur .topbar-material-switch__form { width: 100%; } .topbar-appearance-blur-switch.doc-page__segmented-control { width: 100% !important; max-width: 17.5rem; padding: 0.14rem; gap: 0.2rem; } .topbar-appearance-blur-switch .doc-page__segmented-item { flex: 1 1 0; min-width: 0; display: flex; } .topbar-appearance-blur-switch .doc-page__segmented-chip { flex: 1 1 auto; width: 100%; min-height: 1.58rem; padding: 0.22rem 1.05rem; font-size: 0.8rem; font-weight: 600; line-height: 1.1; } .topbar-appearance-blur-switch .doc-page__segmented-input:checked + .doc-page__segmented-chip { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16); } .topbar-action-btn--notification { position: relative; } .topbar-notification-badge { top: 6px; left: 25px; height: 18px; padding-top: 4px; } .topbar-avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; } .topbar-avatar-badge { width: 28px; height: 28px; flex: 0 0 28px; font-size: 0.72rem; line-height: 1; } .topbar-avatar-badge .bi { font-size: 0.82rem; } .topbar-background-selector { display: block; } .topbar-background-option { padding: 0; border: 0; background: transparent; } .topbar-background-preview { width: 100px; height: 60px; object-fit: cover; border: 2px solid transparent; } .topbar-background-option.is-active .topbar-background-preview { border-color: #6c63ff; } .topbar-shell { position: relative; z-index: 1048; } .topbar-row { min-width: 0; } .topbar-controls { min-width: 0; } .topbar-avatar { flex: 0 0 auto; } .topbar-avatar .dropdown-menu { min-width: 11rem; } .topbar-avatar .dropdown-item { display: flex; align-items: center; gap: .55rem; } .topbar-avatar .dropdown-item .topbar-avatar-menu-icon { width: 1rem; flex: 0 0 1rem; font-size: .95rem; text-align: center; opacity: .78; } .topbar-avatar .dropdown-item.text-danger .topbar-avatar-menu-icon { opacity: .92; } .revenue-share-due-banner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .85rem .75rem 0; padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, .18)) 72%, rgba(214, 198, 167, .32)); border-radius: 18px; background: color-mix(in srgb, var(--ui-card-surface, rgba(255, 255, 255, .12)) 86%, rgba(214, 198, 167, .18)); color: var(--ui-text, #f7f3ea); backdrop-filter: var(--ui-card-surface-blur, blur(18px) saturate(120%)); -webkit-backdrop-filter: var(--ui-card-surface-blur, blur(18px) saturate(120%)); } .revenue-share-due-banner__copy { display: grid; gap: .1rem; min-width: 0; } .revenue-share-due-banner__eyebrow { color: var(--ui-muted, rgba(247, 243, 234, .66)); font-size: .72rem; font-weight: 700; } .revenue-share-due-banner__copy strong { font-size: .92rem; font-weight: 750; line-height: 1.2; } .revenue-share-due-banner__action { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: .45rem .75rem; border-radius: 999px; background: color-mix(in srgb, #d6c6a7 90%, white); color: #161616; font-size: .84rem; font-weight: 800; text-decoration: none; } .revenue-share-due-banner a.revenue-share-due-banner__action, .glassmorphism .revenue-share-due-banner__action, .revenue-share-due-banner a.revenue-share-due-banner__action:hover, .glassmorphism .revenue-share-due-banner__action:hover, .revenue-share-due-banner a.revenue-share-due-banner__action:focus-visible, .glassmorphism .revenue-share-due-banner__action:focus-visible { background: #f4ead8; color: #111214; } .revenue-share-due-banner__action:hover, .revenue-share-due-banner__action:focus-visible { background: #fff4df; color: #111214; box-shadow: 0 8px 18px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .68); } .revenue-share-due-banner__action:focus-visible { outline: 2px solid rgba(244, 234, 216, .86); outline-offset: 3px; } @media (max-width: 767.98px) { .topbar-shell { padding-top: .35rem !important; padding-bottom: .2rem !important; padding-left: 10px !important; padding-right: 10px !important; } .topbar-row { gap: .35rem; } .topbar-date { flex: 1 1 auto; min-width: 0; padding-right: .1rem !important; } .topbar-date > span, .topbar-date > a.topbar-date-label { font-size: .72rem; line-height: 1.05; letter-spacing: .01em; } .topbar-controls { flex: 0 0 auto; gap: .28rem !important; padding-right: .1rem !important; } .topbar-controls .toggle-btn, .topbar-controls .topbar-action-btn { width: 31px !important; height: 31px !important; min-width: 31px; min-height: 31px; } .topbar-controls .toggle-btn i, .topbar-controls .topbar-action-btn i { font-size: .88rem; } .topbar-controls .dropdown-toggle, .topbar-controls .topbar-avatar-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } .topbar-controls .topbar-avatar-badge { width: 26px !important; height: 26px !important; flex: 0 0 26px; font-size: 0.68rem !important; } .revenue-share-due-banner { align-items: flex-start; margin: .7rem .2rem 0; padding: .68rem; border-radius: 16px; } .revenue-share-due-banner__copy strong { font-size: .84rem; } .topbar-material-switch { justify-content: stretch; } .topbar-appearance-panel__inner { padding: 12px; border-radius: 18px; } .topbar-material-switch__form { display: block !important; } .topbar-material-chips { display: grid; width: 100%; gap: 8px; } .topbar-material-chip { min-height: 42px; padding: 8px 12px; gap: 8px; } .topbar-material-chip__icon { width: 24px; height: 24px; } .topbar-material-chip__copy strong { font-size: .84rem; } .topbar-material-chip__copy span { font-size: .67rem; } .topbar-avatar .dropdown-menu { right: 0; left: auto; transform: translateX(0); } .header-top-shell { align-items: flex-start !important; } .header-top-title { font-size: 1.2rem; } .header-top-actions { width: 100%; justify-content: flex-start !important; } } /* Modules */ .module { font-size: 15px; border-radius: var(--dashboard-module-radius); padding: 10px 25px 20px 25px !important; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .module:hover { } .module-title { text-align: left; } .modal { z-index: 1080 !important; } .modal-backdrop { z-index: 1070 !important; } /* Overlay messages : HTML embarqué dans le shell, CSS lazy — ne pas peindre l’empty-state au reload. */ #chatContainer.collapsed:not(.messages-standalone) { display: none !important; } #message-context-menu { display: none; } /* Bouton Dashboard */ .dashboard-button { width: 60px; height: 60px; border-radius: 60px; } /* Menu Mobile */ #mobileMenu { display: none; transition: left 0.3s ease-in-out; } #mobileMenu.active { display: block; } .mobile-menu-overlay { position: fixed; inset: 0; z-index: 1050; display: none; padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px)); background: rgba(3, 7, 18, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; } .mobile-menu-overlay.is-open { display: flex; } .mobile-menu-panel { width: min(100%, 24rem); max-height: 100%; margin-left: auto; padding: 0.85rem; border: 1px solid var(--ui-border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 1.25rem; background: var(--ui-surface-bg, rgba(12, 16, 24, 0.92)); box-shadow: var(--ui-surface-shadow, 0 6px 16px rgba(16, 24, 40, 0.12)); display: flex; flex-direction: column; gap: 0.75rem; } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-shrink: 0; } .mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, white 28%, var(--ui-border-subtle, rgba(255, 255, 255, 0.12))); border-radius: 999px; background: color-mix(in srgb, white 14%, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12))); color: #f8fbff; line-height: 1; box-shadow: 0 1px 0 color-mix(in srgb, white 10%, transparent); opacity: 1; filter: none; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .mobile-menu-close i { font-size: 1rem; line-height: 1; color: inherit; } .mobile-menu-close:hover, .mobile-menu-close:focus, .mobile-menu-close:focus-visible { color: #ffffff; border-color: color-mix(in srgb, white 42%, transparent); background: color-mix(in srgb, white 22%, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12))); opacity: 1; filter: none; transform: translateY(-1px); } .mobile-menu-body { display: flex; flex-direction: column; gap: 0.85rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .mobile-menu-section-label { margin: 0 0 0.45rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-muted, rgba(236, 244, 255, 0.82)); } .mobile-menu-divider { height: 1px; margin: 0.1rem 0; background: color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.12)) 88%, transparent); } .mobile-menu-groups { display: flex; flex-direction: column; gap: 0.55rem; } .mobile-menu-group { --mobile-menu-group-accent: color-mix(in srgb, var(--ui-accent, #7db7ff) 72%, white); --mobile-menu-group-accent-soft: color-mix(in srgb, var(--mobile-menu-group-accent) 18%, transparent); --mobile-menu-group-accent-border: color-mix(in srgb, var(--mobile-menu-group-accent) 34%, transparent); display: flex; flex-direction: column; gap: 0.45rem; padding: 0.55rem 0.58rem 0.62rem; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.12)) 82%, var(--mobile-menu-group-accent-border)); background: linear-gradient( 155deg, color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 72%, transparent), color-mix(in srgb, var(--ui-surface-bg, rgba(12, 16, 24, 0.92)) 94%, var(--mobile-menu-group-accent-soft) 6%) ); box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent); } .mobile-menu-group--commercial { --mobile-menu-group-accent: #9db0ff; } .mobile-menu-group--operations { --mobile-menu-group-accent: #6fd4c7; } .mobile-menu-group--tools { --mobile-menu-group-accent: #d8b56a; } .mobile-menu-group__head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .mobile-menu-group-label { display: inline-flex; align-items: center; margin: 0; padding: 0.22rem 0.62rem; border-radius: 999px; border: 1px solid var(--mobile-menu-group-accent-border); background: color-mix(in srgb, var(--mobile-menu-group-accent-soft) 88%, transparent); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--mobile-menu-group-accent) 72%, white); } .mobile-menu-pill-list, .mobile-menu-link-grid { display: flex; flex-wrap: wrap; gap: 0.38rem; } .mobile-menu-pill, .mobile-menu-link { display: inline-flex; align-items: center; gap: 0.38rem; min-height: 2.15rem; padding: 0.24rem 0.62rem 0.24rem 0.24rem; border-radius: 999px; color: var(--ui-text-primary, #ffffff); text-decoration: none; background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 58%, transparent); border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.12)) 78%, var(--mobile-menu-group-accent-border)); box-shadow: 0 1px 0 color-mix(in srgb, white 6%, transparent); transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease; } .mobile-menu-pill__icon, .mobile-menu-link__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: color-mix(in srgb, var(--mobile-menu-group-accent-soft) 90%, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12))); border: 1px solid color-mix(in srgb, var(--mobile-menu-group-accent-border) 72%, transparent); color: color-mix(in srgb, var(--mobile-menu-group-accent) 78%, white); } .mobile-menu-pill__icon i, .mobile-menu-link__icon i { font-size: 0.76rem; line-height: 1; } .mobile-menu-pill__label, .mobile-menu-link__label { min-width: 0; font-size: 0.74rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .mobile-menu-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.38rem; flex-shrink: 0; padding-top: 0.1rem; } .mobile-menu-footer-link { display: flex; align-items: center; justify-content: center; gap: 0.38rem; min-height: 2.35rem; padding: 0.35rem 0.5rem; border-radius: 0.625rem; background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 62%, transparent); border: 1px solid var(--ui-border-subtle, rgba(255, 255, 255, 0.12)); color: var(--ui-text-primary, #ffffff); text-decoration: none; font-size: 0.74rem; font-weight: 600; } .mobile-menu-footer-link i { font-size: 0.82rem; line-height: 1; } .mobile-menu-footer-link--danger { color: var(--bs-danger-text-emphasis, #dc3545); border-color: color-mix(in srgb, var(--bs-danger, #dc3545) 22%, var(--ui-border-subtle, rgba(255, 255, 255, 0.12))); } .mobile-menu-title { font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--ui-text-primary, #ffffff); } .mobile-menu-link:hover, .mobile-menu-link:focus, .mobile-menu-pill:hover, .mobile-menu-pill:focus, .mobile-menu-footer-link:hover, .mobile-menu-footer-link:focus, .mobile-menu-quick-card:hover, .mobile-menu-quick-card:focus { color: var(--ui-text-primary, #ffffff); border-color: color-mix(in srgb, var(--mobile-menu-group-accent-border, var(--ui-border-strong, rgba(255, 255, 255, 0.2))) 88%, var(--ui-border-strong, rgba(255, 255, 255, 0.2))); background: color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)) 82%, var(--mobile-menu-group-accent, var(--ui-accent, #7db7ff)) 18%); transform: translateY(-1px); } .mobile-menu-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .mobile-menu-quick-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 4.25rem; padding: 0.45rem 0.35rem; border-radius: 0.875rem; background: var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.12)); border: 1px solid var(--ui-border-subtle, rgba(255, 255, 255, 0.12)); color: var(--ui-text-primary, #ffffff); text-decoration: none; text-align: center; } .mobile-menu-quick-card i { font-size: 1rem; line-height: 1; } .mobile-menu-quick-card span { font-size: 0.68rem; line-height: 1.15; font-weight: 600; } .mobile-menu-quick-card__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; } .mobile-menu-quick-card__signal { position: absolute; top: -0.02rem; right: -0.06rem; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--ui-attention-accent-end, #f5a623); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24); pointer-events: none; } body.mobile-menu-open { overflow: hidden; } /* Menu en bas */ .bottom-menu { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; min-height: 68px; padding: .55rem .65rem .7rem; display: none; z-index: 1045; border-radius: 60px; background: rgba(28, 28, 30, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); overflow: hidden; } #bottomMenu { gap: .25rem; } .bottom-menu .nav-link, .bottom-menu .btn { min-height: 48px; padding: .2rem .4rem; border-radius: 18px; color: inherit; } .bottom-menu .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-decoration: none; } .bottom-menu .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; background: transparent; border: 0; box-shadow: none; } .bottom-menu .btn img { display: block; margin: 0 auto; } .bottom-menu .nav-link:hover, .bottom-menu .nav-link:focus, .bottom-menu .btn:hover, .bottom-menu .btn:focus { background: rgba(255, 255, 255, 0.08); } .bottom-menu .nav-link.is-active .ui-mobile-menu-icon, .bottom-menu .nav-link.is-active .ui-mobile-menu-label { color: var(--ui-text-primary, #fff); font-weight: 700; } .bottom-menu .nav-link.is-active { background: rgba(255, 255, 255, 0.12); } .bottom-menu { transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .bottom-menu.is-scrolling-down { opacity: .92; transform: translateY(6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10); } .bottom-menu.is-scrolling-up { opacity: 1; transform: translateY(0); } .product-list { z-index: 1000; background-color: rgba(28, 28, 30, 0.94); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; } .product-list .list-group-item { background-color: rgba(28, 28, 30, 0.94); color: #fff; } .product-list .list-group-item:hover, .product-list .list-group-item:focus { background-color: rgba(58, 58, 60, 0.96); color: #fff; } body.ui-material-glass .product-list { background: linear-gradient(160deg, rgba(21, 24, 32, 0.96), rgba(30, 34, 45, 0.93)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 20px rgba(6, 8, 12, 0.28); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } body.ui-material-glass .product-list .list-group-item { background-color: rgba(19, 22, 30, 0.95) !important; border-color: rgba(255, 255, 255, 0.08); color: #fff; } body.ui-material-glass .product-list .list-group-item:hover, body.ui-material-glass .product-list .list-group-item:focus { background-color: rgba(37, 42, 56, 0.97) !important; color: #fff; } :root { --document-surface-bg: linear-gradient(180deg, color-mix(in srgb, rgba(255, 255, 255, 0.92) 7%, transparent), transparent 42%), color-mix(in srgb, rgba(0, 0, 0, 0.42) 88%, rgba(18, 18, 20, 0.72)); --document-surface-bg-hover: linear-gradient(180deg, color-mix(in srgb, rgba(255, 255, 255, 0.92) 9%, transparent), transparent 42%), color-mix(in srgb, rgba(0, 0, 0, 0.42) 92%, rgba(18, 18, 20, 0.78)); --document-card-bg: var(--document-surface-bg); --document-card-bg-hover: var(--document-surface-bg-hover); --document-card-bg-hero: var(--document-surface-bg); --document-card-bg-hero-hover: var(--document-surface-bg-hover); --document-card-bg-subtle: var(--document-card-bg); --document-card-bg-subtle-hover: var(--document-card-bg-hover); --document-surface-border: color-mix(in srgb, rgba(255, 255, 255, 0.92) 10%, transparent); --document-surface-border-hover: color-mix(in srgb, rgba(255, 255, 255, 0.92) 14%, transparent); --document-surface-text: #fff; --document-surface-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); --document-surface-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.28); --document-card-shadow-hero: 0 8px 22px rgba(6, 8, 12, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06); --document-card-shadow-hero-hover: 0 10px 26px rgba(6, 8, 12, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.08); --document-card-shadow-subtle: var(--document-surface-shadow); --document-card-shadow-subtle-hover: var(--document-surface-shadow-hover); --document-list-row-bg: var(--document-card-bg); --document-list-row-bg-hover: var(--document-card-bg-hover); --document-list-row-border: var(--document-surface-border); --document-list-row-border-hover: var(--document-surface-border-hover); --document-list-row-text: var(--document-surface-text); --document-list-row-shadow: var(--document-surface-shadow); --document-list-row-shadow-hover: var(--document-surface-shadow-hover); } .glassmorphism { background: var(--ui-surface-bg, rgba(180, 180, 180, 0.15)); border: 1px solid var(--ui-surface-border, rgba(255, 255, 255, 0.18)); backdrop-filter: var(--ui-glass-blur, blur(30px)); -webkit-backdrop-filter: var(--ui-glass-blur, blur(30px)); box-shadow: var(--ui-surface-shadow, 0 4px 6px rgba(0, 0, 0, 0.1)); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; color: var(--ui-text-primary, #222); } .glassmorphism a:hover { text-decoration: underline; } .glassmorphism strong { font-weight: bold; } .banner { background-color: rgba(110, 110, 110, 0.75); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .banner a:hover { text-decoration: underline; } .banner strong { font-weight: 600; } .trial-banner.alert-dismissible { position: relative; padding-right: 3rem; } .trial-banner.alert-dismissible .btn-close { position: absolute; right: .75rem; left: auto; top: 50%; transform: translateY(-50%); filter: invert(1) grayscale(100%) brightness(200%); opacity: 1; } @media (max-width: 991.98px) { .bottom-menu { display: flex; } } @media (max-width: 576px) { .bottom-menu { left: .65rem; right: .65rem; bottom: calc(.65rem + env(safe-area-inset-bottom, 0px)); min-height: 46px; padding: .18rem .24rem .22rem; } .bottom-menu .nav-link, .bottom-menu .btn { min-height: 42px; padding: .14rem .3rem; } .bottom-menu .ui-mobile-menu-label { font-size: 11px; line-height: 1.05; white-space: nowrap; } .bottom-menu .ui-mobile-menu-badge { min-height: 1.45rem; padding: .16rem .48rem; font-size: .66rem; } .bottom-menu .ui-mobile-menu-icon { font-size: 22px; } } /* Responsivité */ @media (max-width: 767.98px) { .mobile-menu-overlay { padding: max(0.35rem, env(safe-area-inset-top, 0px)) max(0.35rem, env(safe-area-inset-right, 0px)) max(0.35rem, env(safe-area-inset-bottom, 0px)) max(0.35rem, env(safe-area-inset-left, 0px)); } .mobile-menu-panel { width: 100%; margin-left: 0; border-radius: 1.125rem; } .mobile-menu-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .module { flex: 1 1 calc(50% - 20px); } } @media (max-width: 380px) { .mobile-menu-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mobile-menu-link-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .module { flex: 1 1 100%; } } .btn-glass { padding: 10px 15px; background: rgba(255, 255, 255, 0.1); /* Fond glassmorphism */ backdrop-filter: blur(10px); /* Effet de flou */ -webkit-backdrop-filter: blur(10px); border-radius: 50px; /* Rounded-pill */ border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure subtile */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */ } @media (min-width: 992px) { .finances-module { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; border: 0px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; } } /* Bouton flottant pour mobile */ .floating-btn { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--doc-mobile-buttons-vv-offset, 0px)); right: 15px; width: 55px; height: 55px; background-color: #6c63ff; /* Couleur primaire, ajustez selon votre thème */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1065; text-decoration: none; font-size: 24px; } body.document-mobile-actions-low .floating-btn { bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--doc-mobile-buttons-vv-offset, 0px)); } /* Masquer par défaut sur desktop */ .floating-btn { display: none; } /* Afficher uniquement sur mobile (max-width: 768px peut être ajusté) */ @media (max-width: 767.98px) { .floating-btn { display: flex; } } /* Styles pour le menu flottant */ /*.floating-menu { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); width: 530px; height: 70px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; display: flex; justify-content: center; align-items: center; padding: 10px 0; }*/ .floating-menu { /*position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);*/ width: 560px; height: 62px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; padding: 7px 1.35rem; } .menu-row { display: flex; width: 100%; justify-content: space-around; text-align: center; } .menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 78px; text-decoration: none; color: inherit; } .menu-icon { position: relative; width: 36px; height: 36px; border-radius: 10px; display: flex; justify-content: center; align-items: center; } .menu-icon__signal { position: absolute; top: 0.18rem; right: 0.16rem; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--ui-attention-accent-end, #f5a623); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24); pointer-events: none; } .menu-icon i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 18px; line-height: 1; color: white; } .menu-label { margin-top: -5px; font-size: 11px; color: white; font-weight: 500; } .floating-menu-wrapper { position: fixed; bottom: 30px; /* CENTRAGE GLOBAL des deux blocs */ left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 100; /*gap: 12px;*/ /* espace entre les deux blocs, remplace ms-3 si tu veux */ } .mini-menu-pos { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); padding: 7px 1.35rem; height: 62px; display: flex; align-items: center; justify-content: center; } .mini-menu-pos .menu-icon i { font-size: 18px; } .mini-menu-pos .menu-label { margin-left: 0; margin-top: -5px; font-size: 11px; color: white; font-weight: 500; } .back-button { position: fixed; top: 20px; left: 25px; z-index: 1000; display: inline-block; transition: transform 0.22s ease, filter 0.22s ease; } .back-button--inline, .aura-more-options__trigger { width: var(--doc-header-action-size, 42px); height: var(--doc-header-action-size, 42px); min-width: var(--doc-header-action-size, 42px); min-height: var(--doc-header-action-size, 42px); max-width: var(--doc-header-action-size, 42px); max-height: var(--doc-header-action-size, 42px); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--doc-header-action-size, 42px); padding: 0; line-height: 0; box-sizing: border-box; } .back-button--inline { position: static; top: auto; left: auto; z-index: auto; } .back-button img, .glass-button img, img.glass-button { display: block; transform-origin: center center; transition: transform 0.22s ease, filter 0.22s ease; will-change: transform, filter; } .back-button--inline img, .aura-more-options__trigger img, .aura-more-options__icon, .doc-header-contract__icon-btn img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform 0.22s ease, filter 0.22s ease; will-change: transform, filter; } .back-button:is(:hover, :focus-visible) img, .glass-button:is(:hover, :focus-visible) img, img.glass-button:is(:hover, :focus-visible), .aura-more-options__trigger:is(:hover, :focus-visible) img, .doc-header-contract__icon-btn:is(:hover, :focus-visible) img { transform: scale(1.08); filter: saturate(1.32) brightness(1.1); cursor: pointer; } .glass-button, .btn-glass { transition: background 0.22s ease, filter 0.22s ease; } @media (prefers-reduced-motion: reduce) { .back-button:is(:hover, :focus-visible) img, .glass-button:is(:hover, :focus-visible) img, img.glass-button:is(:hover, :focus-visible), .aura-more-options__trigger:is(:hover, :focus-visible) img, .doc-header-contract__icon-btn:is(:hover, :focus-visible) img { transform: none; } } #actionsDropdown:focus, #actionsDropdown:active { outline: none !important; /* Supprime l'outline bleu */ box-shadow: none !important; /* Supprime tout ombre ou cadre */ } /* Glassmorphism pour les dropdown menus */ :root { --ui-dropdown-bg: rgba(18, 10, 32, 0.72); --ui-dropdown-border: rgba(255, 255, 255, 0.14); --ui-dropdown-shadow: 0 7px 18px rgba(10, 14, 24, 0.12); --ui-dropdown-text: #f8fafc; --ui-dropdown-hover-bg: rgba(255, 255, 255, 0.08); --ui-dropdown-active-bg: rgba(201, 166, 255, 0.18); --ui-dropdown-blur: blur(22px) saturate(160%); } .dropdown-menu { min-width: 14rem; max-width: min(92vw, 22rem); padding: .45rem; border: 1px solid var(--ui-dropdown-border); border-radius: 18px; background: var(--ui-dropdown-bg) !important; backdrop-filter: var(--ui-dropdown-blur); -webkit-backdrop-filter: var(--ui-dropdown-blur); box-shadow: var(--ui-dropdown-shadow); overflow: hidden; z-index: 2020 !important; opacity: 0; } .dropdown-menu.show { opacity: 1; } @media (prefers-reduced-motion: reduce) { .dropdown-menu { transition: none; } } .dropdown-menu .dropdown-item { color: var(--ui-dropdown-text); border-radius: 12px; padding: .72rem .92rem; font-size: 1rem; transition: background-color .16s ease, color .16s ease; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:focus-visible { background: var(--ui-dropdown-hover-bg); color: var(--ui-dropdown-text); } .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: var(--ui-dropdown-active-bg); color: var(--ui-dropdown-text); } .bg-secondary { background: rgba(100, 100, 100, 0.3) !important; color: #ffffff !important; } .bg-primary { background: rgba(100, 100, 255, 0.3) !important; color: #ffffff !important; } .bg-warning { background: rgba(255, 200, 0, 0.3) !important; color: #ffffff !important; } .bg-success { background: rgba(0, 200, 100, 0.38) !important; color: #ffffff !important; } .remove-line { background: none; } .remove-line img:hover { filter: brightness(1.4) drop-shadow(0 0 6px rgba(255, 0, 0, 0.3)); transform: scale(1.05); transition: all 0.2s ease; cursor: pointer; } @media screen and (min-width: 1400px) { .mini-menu-pos { height: 52px; padding: 6px 13px; } .mini-menu-pos .menu-label { font-size: 8px; margin-top: -4px; } .mini-menu-pos .menu-icon i { font-size: 16px; } } @media screen and (min-width: 1400px) { .btn { font-size: 14px; } .module { font-size: 13px; } .floating-menu { width: 520px; height: 52px; padding-left: 1.15rem; padding-right: 1.15rem; } .menu-icon { width: 34px; height: 28px; } .menu-icon i { width: 18px; height: 18px; font-size: 16px; } .menu-label { font-size: 8px; } .form-check-input[type=checkbox] { zoom: 0.8; } } /* === Uniformisation spacing/radius via tokens.css === */ .card, .glassmorphism, .modal-content, .dropdown-menu, .offcanvas, .accordion-item { border-radius: var(--ui-radius-md) !important; } .card, .glassmorphism { padding: var(--ui-card-padding); } .card .card-body, .modal .modal-body, .offcanvas .offcanvas-body { padding: var(--ui-card-padding); } .form-control, .form-select, .input-group-text, .badge, .pagination .page-link, .nav-tabs .nav-link, .nav-pills .nav-link { border-radius: var(--ui-radius-sm) !important; } .btn { border-radius: 60px; } .form-control, .form-select, .input-group-text { min-height: 42px; padding: 0.55rem 0.8rem; } @media (max-width: 767.98px) { :root { --ui-card-padding: var(--ui-space-3); } } /* === Utilitaires d'intégration bi-style (glass / velvet) === */ .ui-clickable { cursor: pointer; } .product-search-result-item { transition: background-color .16s ease, transform .16s ease; } .product-search-result-item__price { font-variant-numeric: tabular-nums; } .product-search-result-item:hover, .product-search-result-item:focus { background-color: rgba(111, 66, 193, 0.12); transform: translateX(2px); } .ui-surface-rounded, .rounded-4, .rounded-5 { border-radius: var(--ui-radius-md) !important; } .ui-bottom-menu { color: var(--ui-text-primary) !important; z-index: 1045; } .ui-mobile-menu-icon { font-size: 22px; } .ui-mobile-menu-label { font-size: 11px; color: var(--ui-text-muted); } .ui-mobile-menu-label-strong { color: var(--ui-text-primary); } .ui-mobile-menu-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: .22rem .6rem; border-radius: 999px; letter-spacing: .04em; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--ui-text-primary, #fff); background: linear-gradient( 135deg, color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255,255,255,.18)) 86%, transparent) 0%, color-mix(in srgb, var(--ui-surface-bg, rgba(255,255,255,.08)) 74%, transparent) 100% ); border: 1px solid color-mix(in srgb, var(--ui-surface-border, rgba(255,255,255,.2)) 84%, transparent); box-shadow: 0 1px 10px rgba(15, 23, 42, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bottom-menu .nav-link--service-desk .ui-mobile-menu-icon { color: #7dd3fc; } .bottom-menu .nav-link--service-desk:hover .ui-mobile-menu-badge, .bottom-menu .nav-link--service-desk:focus .ui-mobile-menu-badge { background: linear-gradient( 135deg, color-mix(in srgb, rgba(125, 211, 252, .32) 88%, transparent) 0%, color-mix(in srgb, rgba(56, 189, 248, .18) 78%, transparent) 100% ); } .ui-mobile-list-surface { background-color: color-mix(in srgb, var(--ui-surface-bg) 75%, #111 25%); } /* Utilitaires UI partagés */ .u-hidden { display: none !important; } .ui-status-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; border: 1px solid var(--ui-border-subtle); font-size: 12px; font-weight: 600; } .ui-status-badge--success { background: var(--ui-status-success-bg); border-color: var(--ui-status-success-border); color: var(--ui-status-success-text); } .ui-status-badge--warning { background: var(--ui-status-warning-bg); border-color: var(--ui-status-warning-border); color: var(--ui-status-warning-text); } .ui-status-badge--danger { background: var(--ui-status-danger-bg); border-color: var(--ui-status-danger-border); color: var(--ui-status-danger-text); } .ui-focusable:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); } /* Stock meta harmonisé (quotes / BC client / factures) */ .line-stock-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; color: var(--ui-stock-meta-text); } .line-stock-meta__item { display: inline-flex; align-items: baseline; gap: .25rem; } .line-stock-meta__label { font-weight: 500; } .line-stock-meta__value { font-weight: 600; } .line-stock-meta__item--critical { color: var(--ui-status-warning-text); } .line-stock-meta__label--critical, .line-stock-meta__value--critical { font-weight: 700; } .line-stock-meta__item--sub { color: var(--ui-stock-meta-sub-text); } .line-stock-meta__item--sub .line-stock-meta__label, .line-stock-meta__item--sub .line-stock-meta__value, .line-stock-meta__item--sub .line-stock-meta__suffix { font-size: .95em; font-weight: 500; } .line-stock-meta__item--sub .line-stock-meta__value { font-weight: 600; } .line-stock-meta__sep { color: var(--ui-stock-meta-separator-text); } .line-stock-meta__status { display: inline-flex; align-items: center; margin-left: .2rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid transparent; font-size: .75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .line-stock-meta--ok { color: var(--ui-status-success-text); } .line-stock-meta--ok .line-stock-meta__status { background: var(--ui-status-success-bg); border-color: var(--ui-status-success-border); color: var(--ui-status-success-text); } .line-stock-meta--warn { color: var(--ui-status-warning-text); } .line-stock-meta--warn .line-stock-meta__status { background: var(--ui-status-warning-bg); border-color: var(--ui-status-warning-border); color: var(--ui-status-warning-text); } .line-stock-meta--critical { color: var(--ui-status-danger-text); } .line-stock-meta--critical .line-stock-meta__status { background: var(--ui-status-danger-bg); border-color: var(--ui-status-danger-border); color: var(--ui-status-danger-text); } .line-stock-meta--virtual { color: var(--ui-stock-meta-virtual-text); } .common-scroll-sentinel{width:100%;height:1px;} .common-scroll-sentinel.is-loading{opacity:.55;} .common-infinite-dock { position: fixed; right: 14px; bottom: 16px; z-index: 1040; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: rgba(18, 22, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; } .common-infinite-dock.is-hidden { display: none; } .common-infinite-dock__page { font-size: .8rem; opacity: .9; } .common-infinite-dock__top { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: inherit; border-radius: 999px; padding: 4px 10px; font-size: .78rem; } .compact-product-status-pill { transform: scale(0.98); opacity: 0; transition: transform 150ms ease, opacity 150ms ease; will-change: transform, opacity; } .compact-product-status-pill.compact-product-status-pill--visible { transform: scale(1); opacity: 1; } .compact-product-status-pill.compact-product-status-pill--leaving { transform: scale(0.98); opacity: 0; } @media (prefers-reduced-motion: reduce) { .compact-product-status-pill { transition: none; } } /* Badge premium homogène pour les modes de paiement (quotes/clientOrder/invoices). */ .pm-badge.premium-payment-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .68rem; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--pm-text, #f8fafc); border: 1px solid var(--pm-border, rgba(255,255,255,.22)); background: linear-gradient(135deg, var(--pm-bg-default-start, rgba(255,255,255,.16)) 0%, var(--pm-bg-default-end, rgba(255,255,255,.10)) 100%); box-shadow: var(--pm-shadow, 0 1px 10px rgba(15, 23, 42, .22)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } /* Badge premium de statut de numérotation facture (Temporaire / Final). */ .invoice-number-badge { --invoice-number-accent: #9aa4b2; display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--ui-text-primary); border: 1px solid color-mix(in srgb, var(--invoice-number-accent) 38%, rgba(255, 255, 255, .28)); background: linear-gradient( 135deg, color-mix(in srgb, var(--invoice-number-accent) 22%, rgba(255, 255, 255, .16)) 0%, color-mix(in srgb, var(--invoice-number-accent) 10%, rgba(255, 255, 255, .08)) 100% ); box-shadow: 0 8px 22px color-mix(in srgb, var(--invoice-number-accent) 24%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .invoice-number-badge i { font-size: .82rem; opacity: .92; } .invoice-number-badge:hover { transform: translateY(-1px); box-shadow: 0 7px 18px color-mix(in srgb, var(--invoice-number-accent) 22%, transparent); } .invoice-number-badge--final { --invoice-number-accent: #34d399; } .invoice-number-badge--temporary { --invoice-number-accent: #f59e0b; } .invoice-number-badge--none { --invoice-number-accent: #94a3b8; } .pm-badge.premium-payment-badge i { font-size: .82rem; opacity: .9; } .pm-badge.premium-payment-badge:hover { transform: translateY(-1px); box-shadow: 0 7px 18px color-mix(in srgb, var(--pm-accent, #b97dff) 24%, transparent); border-color: color-mix(in srgb, var(--pm-accent, #b97dff) 45%, var(--pm-border, rgba(255,255,255,.28)) 55%); } .pm-badge--cash { --pm-accent: var(--pm-accent-cash, #7ee8c5); } .pm-badge--credit_card { --pm-accent: var(--pm-accent-credit-card, #8ab4ff); } .pm-badge--check { --pm-accent: var(--pm-accent-check, #f7b6ff); } .pm-badge--bank_transfer { --pm-accent: var(--pm-accent-bank-transfer, #a7f3d0); } .pm-badge--paypal { --pm-accent: var(--pm-accent-paypal, #7dc6ff); } .pm-badge--gift_card { --pm-accent: var(--pm-accent-gift-card, #ffcc80); } .pm-badge--installment_4x { --pm-accent: var(--pm-accent-installment-4x, #f9a8d4); } .pm-badge--other { --pm-accent: var(--pm-accent-other, #c4b5fd); } .pm-badge--cash, .pm-badge--credit_card, .pm-badge--check, .pm-badge--bank_transfer, .pm-badge--paypal, .pm-badge--gift_card, .pm-badge--installment_4x, .pm-badge--other { background: linear-gradient( 135deg, color-mix(in srgb, var(--pm-accent) 32%, rgba(255,255,255,.18)) 0%, color-mix(in srgb, var(--pm-accent) 16%, rgba(255,255,255,.06)) 100% ); } .module-payment-timeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; align-items: end; } .module-payment-timeline__item { text-align: center; } .module-payment-timeline__bar { display: inline-block; width: 100%; border-radius: 999px; background: linear-gradient(180deg, var(--pm-accent-other, #b97dff), color-mix(in srgb, var(--pm-accent-other, #b97dff) 40%, #ffffff 60%)); opacity: .78; box-shadow: 0 8px 18px color-mix(in srgb, var(--pm-accent-other, #b97dff) 30%, transparent); transition: transform .18s ease, opacity .18s ease; } .module-payment-timeline__bar.is-today { opacity: 1; transform: translateY(-1px); } .module-payment-timeline__label { display: block; font-size: .67rem; opacity: .78; margin-top: .22rem; } /* Payment mode cards selector (common component). */ .aura-payment-mode { --aura-payment-ring: color-mix(in srgb, var(--ui-accent, #9ec5ff) 55%, #ffffff 45%); --aura-payment-bg: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, .1)) 88%, transparent); --aura-payment-border: color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, .24)) 75%, transparent); } .aura-payment-mode__select-wrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .aura-payment-mode__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; } .aura-payment-mode__card { border: 1px solid var(--aura-payment-border); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--aura-payment-bg) 86%, transparent), color-mix(in srgb, var(--aura-payment-bg) 65%, transparent)); color: var(--ui-text-primary, #f8fafc); min-height: 72px; display: grid; align-content: center; justify-items: start; gap: .35rem; text-align: left; padding: .72rem .84rem; transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease, background .25s ease; box-shadow: 0 6px 14px rgba(15, 23, 42, .14); } .aura-payment-mode__card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--aura-payment-ring) 56%, transparent); } .aura-payment-mode__card:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aura-payment-ring) 44%, transparent), 0 10px 26px rgba(15, 23, 42, .24); } .aura-payment-mode__card.is-selected { border-color: color-mix(in srgb, var(--aura-payment-ring) 66%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--aura-payment-ring) 45%, transparent), 0 12px 28px rgba(15, 23, 42, .26); background: linear-gradient(160deg, color-mix(in srgb, var(--aura-payment-ring) 26%, var(--aura-payment-bg)), color-mix(in srgb, var(--aura-payment-ring) 14%, var(--aura-payment-bg))); } .aura-payment-mode__icon { font-size: 1.04rem; opacity: .96; } .aura-payment-mode__label { font-size: .92rem; line-height: 1.2; font-weight: 600; letter-spacing: .01em; } .aura-payment-mode__cards--compact { gap: .56rem; } .aura-payment-mode__cards--compact .aura-payment-mode__card { min-height: 62px; padding: .56rem .68rem; } @media (min-width: 768px) { .aura-payment-mode__cards, .aura-payment-mode__cards--line { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .aura-payment-mode__card { transition: none; } } /* Dock mobile global — aligné sur AETHER */ @media (max-width: 991.98px) { :root { --aura-mobile-gold: #c9a962; } #bottomMenu.bottom-menu { left: 0; right: 0; bottom: 0; width: 100%; min-height: 64px; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px)); gap: 0.15rem; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 22px 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; background: rgba(16, 16, 18, 0.82); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28); overflow: visible; z-index: 1046; } #bottomMenu.bottom-menu > [class*="col"] { width: 100%; max-width: none; padding: 0; min-width: 0; } #bottomMenu.bottom-menu .nav-link, #bottomMenu.bottom-menu .btn { width: 100%; min-height: 52px; height: auto; padding: 0.15rem 0.1rem; border-radius: 0; gap: 0.18rem; color: rgba(255, 255, 255, 0.48); font-size: 11px !important; font-weight: 550; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; } #bottomMenu.bottom-menu .nav-link:hover, #bottomMenu.bottom-menu .nav-link:focus, #bottomMenu.bottom-menu .btn:hover, #bottomMenu.bottom-menu .btn:focus { background: transparent; color: rgba(255, 255, 255, 0.62); } #bottomMenu.bottom-menu .ui-mobile-menu-icon, #bottomMenu.bottom-menu .nav-link .bi, #bottomMenu.bottom-menu .nav-link i { font-size: 22px !important; line-height: 1; color: inherit; } #bottomMenu.bottom-menu .ui-mobile-menu-label, #bottomMenu.bottom-menu .ui-mobile-menu-label-strong { max-width: 100%; overflow: hidden; display: block; white-space: normal !important; font-size: 10px !important; line-height: 1.15; color: inherit; font-weight: inherit; } #bottomMenu.bottom-menu .nav-link.is-active, #bottomMenu.bottom-menu .nav-link.is-active .ui-mobile-menu-icon, #bottomMenu.bottom-menu .nav-link.is-active .ui-mobile-menu-label { color: color-mix(in srgb, var(--aura-mobile-gold) 78%, white); font-weight: 550; background: transparent; } #bottomMenu.bottom-menu .btn img { width: 32px; height: auto; } body:has(#bottomMenu.bottom-menu) { --pill-bottom-offset-mobile: calc(4.75rem + env(safe-area-inset-bottom, 0px) + 0.75rem); } } @media (max-width: 991.98px) and (display-mode: standalone) { body:has(#bottomMenu.bottom-menu) { --pill-bottom-offset-mobile: calc(5rem + env(safe-area-inset-bottom, 0px) + 0.85rem); } } @media (max-width: 576px) { #bottomMenu.bottom-menu { left: 0; right: 0; bottom: 0; min-height: 64px; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px)); } #bottomMenu.bottom-menu .nav-link, #bottomMenu.bottom-menu .btn { min-height: 52px; height: auto; padding: 0.15rem 0.1rem; } #bottomMenu.bottom-menu .ui-mobile-menu-label, #bottomMenu.bottom-menu .ui-mobile-menu-label-strong { font-size: 11px !important; } #bottomMenu.bottom-menu .ui-mobile-menu-icon, #bottomMenu.bottom-menu .nav-link .bi, #bottomMenu.bottom-menu .nav-link i { font-size: 22px !important; } } /* * Matériaux visuels globaux * - glass: rendu translucide (glassmorphism) * - velvet: rendu premium sombre * - paper: clair épuré (surfaces plates, monochrome) * */ body.ui-material-glass { /* Sidebar : surface shell sapphire (alignée header index documentaire) */ --aura-sidebar-glass-bg: var(--aura-doc-shell-surface-bg, var(--aura-doc-header-contract-bg, var(--doc-card-bg))); --aura-sidebar-glass-bg-nested: color-mix(in srgb, var(--aura-doc-shell-surface-bg, var(--aura-doc-header-contract-bg, var(--doc-card-bg))) 92%, rgba(255, 255, 255, 0.04)); --aura-sidebar-glass-border: var(--aura-doc-shell-surface-border, var(--aura-doc-header-contract-border, var(--doc-card-border))); --aura-sidebar-glass-blur: var(--aura-doc-shell-surface-blur, var(--aura-doc-header-contract-blur, var(--doc-card-blur))); --aura-sidebar-glass-shadow: var(--aura-doc-shell-surface-shadow, var(--aura-doc-header-contract-shadow, var(--doc-card-shadow))); --ui-surface-bg: rgba(16, 18, 22, 0.66); --ui-surface-bg-strong: rgba(10, 12, 16, 0.8); --ui-surface-1: rgba(18, 20, 26, 0.24); --ui-surface-2: rgba(18, 20, 26, 0.36); --ui-surface-3: rgba(18, 20, 26, 0.48); --ui-surface-border: rgba(255, 255, 255, 0.18); --ui-surface-shadow: 0 6px 16px rgba(2, 4, 8, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08); --ui-surface-shadow-hover: 0 14px 30px rgba(2, 4, 8, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1); --ui-text-primary: #ffffff; --ui-text-muted: rgba(255, 255, 255, 0.72); --ui-link: #ffffff; --ui-accent: #7db7ff; --ui-accent-2: #4f8cff; --ui-on-accent: #ffffff; --ui-glass-blur: blur(40px); --ui-glass-blur-soft: blur(40px); --ui-dropdown-blur: blur(40px) saturate(150%); --bs-primary-light: #7db7ff; --surface-glass-bg: color-mix(in srgb, var(--ui-surface-bg, rgba(16, 18, 22, 0.66)) 74%, transparent); --surface-card-bg: linear-gradient( 160deg, color-mix(in srgb, var(--ui-surface-bg, rgba(16, 18, 22, 0.66)) 66%, transparent), color-mix(in srgb, var(--ui-surface-bg-strong, rgba(10, 12, 16, 0.8)) 58%, transparent) ); --surface-border: 1px solid color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.18)) 76%, transparent); --surface-shadow: 0 8px 20px rgba(2, 4, 8, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07); --surface-shadow-hover: 0 12px 26px rgba(2, 4, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.09); --surface-blur: blur(30px) saturate(160%); --ui-card-surface: color-mix(in srgb, var(--ui-surface-bg, rgba(16, 18, 22, 0.66)) 68%, transparent); --ui-card-surface-border: color-mix(in srgb, var(--ui-surface-border, rgba(255, 255, 255, 0.18)) 72%, transparent); --ui-card-surface-blur: blur(30px) saturate(165%); --ui-card-surface-blur-hero: blur(34px) saturate(170%); --ui-card-surface-blur-subtle: blur(26px) saturate(150%); --aura-glass-card-surface-border: var(--glass-stroke, color-mix(in srgb, rgba(255, 255, 255, 0.92) 12%, transparent)); --aura-glass-card-surface-bg: linear-gradient(180deg, color-mix(in srgb, rgba(255, 255, 255, 0.92) 10%, transparent), transparent 42%), color-mix(in srgb, var(--ui-surface-bg, rgba(0, 0, 0, 0.42)) 80%, rgba(255, 255, 255, 0.16)); --aura-glass-card-surface-bg-hover: linear-gradient(180deg, color-mix(in srgb, rgba(255, 255, 255, 0.92) 12%, transparent), transparent 42%), color-mix(in srgb, var(--ui-surface-bg, rgba(0, 0, 0, 0.42)) 84%, rgba(255, 255, 255, 0.20)); --aura-glass-card-surface-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); --aura-glass-card-surface-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.26); --aura-glass-card-surface-blur: var(--ui-glass-blur-soft, blur(12px)); --aura-glass-shell-surface-bg: color-mix(in srgb, rgba(255, 255, 255, 0.08) 100%, transparent); --aura-glass-shell-surface-bg-hover: color-mix(in srgb, rgba(255, 255, 255, 0.11) 100%, transparent); --aura-glass-shell-surface-border: color-mix(in srgb, rgba(255, 255, 255, 0.12) 55%, transparent); --aura-glass-shell-surface-border-hover: color-mix(in srgb, rgba(255, 255, 255, 0.14) 55%, transparent); --aura-glass-shell-surface-shadow: none; --aura-glass-shell-surface-shadow-hover: none; --aura-glass-shell-surface-blur: none; --document-surface-bg: var(--aura-glass-card-surface-bg); --document-surface-bg-hover: var(--aura-glass-card-surface-bg-hover); --document-surface-border: var(--aura-glass-card-surface-border); --document-surface-border-hover: color-mix(in srgb, var(--aura-glass-card-surface-border) 72%, rgba(255, 255, 255, 0.24)); --document-surface-shadow: var(--aura-glass-card-surface-shadow); --document-surface-shadow-hover: var(--aura-glass-card-surface-shadow-hover); --document-card-bg: var(--aura-glass-card-surface-bg); --document-card-bg-hover: var(--aura-glass-card-surface-bg-hover); --document-card-bg-hero: var(--aura-glass-card-surface-bg); --document-card-bg-hero-hover: var(--aura-glass-card-surface-bg-hover); color: var(--ui-text-primary); } body.ui-material-glass::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; /*background: radial-gradient(circle at 14% 14%, rgba(164, 212, 255, 0.2), transparent 34%), radial-gradient(circle at 88% 10%, rgba(205, 232, 255, 0.22), transparent 30%), radial-gradient(circle at 68% 82%, rgba(167, 189, 255, 0.2), transparent 38%);*/ } body.ui-material-glass:not(.ui-background-blur)::before { content: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.ui-material-glass.ui-background-blur { isolation: auto; } body.ui-material-glass.ui-background-blur::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: rgba(10, 12, 16, 0.05); backdrop-filter: blur(5px) brightness(0.91) saturate(0.995); -webkit-backdrop-filter: blur(5px) brightness(0.91) saturate(0.995); } body.ui-material-velvet { --ui-neon-bg-1: #111214; --ui-neon-bg-2: #1a1b1f; --ui-neon-bg-3: #232428; --ui-surface-bg: rgba(31, 32, 35, 0.94); --ui-surface-bg-strong: rgba(42, 44, 49, 0.98); --ui-surface-border: rgba(205, 178, 148, 0.24); --ui-surface-shadow: 0 8px 18px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 243, 227, 0.06); --ui-text-primary: #f2efe8; --ui-text-muted: #b6afa3; --ui-link: #edd1ad; --ui-accent: #efd2ae; --ui-accent-2: #e7be90; --ui-on-accent: #161214; --ui-dropdown-blur: blur(24px) saturate(130%); color: var(--ui-text-primary); background: radial-gradient(circle at 14% 10%, rgba(239, 210, 174, 0.14), transparent 38%), radial-gradient(circle at 86% 12%, rgba(120, 112, 98, 0.18), transparent 36%), linear-gradient(135deg, var(--ui-neon-bg-1), var(--ui-neon-bg-2) 52%, var(--ui-neon-bg-3)); background-attachment: fixed; } body.ui-material-velvet * { /*-webkit-backdrop-filter: none !important; backdrop-filter: none !important;*/ } body.ui-material-paper { --ui-surface-bg: #ffffff; --ui-surface-bg-strong: #f5f5f7; --ui-surface-1: rgba(0, 0, 0, 0.025); --ui-surface-2: rgba(0, 0, 0, 0.04); --ui-surface-3: rgba(0, 0, 0, 0.07); --ui-surface-border: rgba(0, 0, 0, 0.08); --ui-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --ui-surface-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06); --ui-text-primary: #1d1d1f; --ui-text-muted: rgba(29, 29, 31, 0.56); --ui-link: #1d1d1f; --ui-accent: #1d1d1f; --ui-accent-2: #424245; --ui-on-accent: #ffffff; --ui-glass-blur: none; --ui-glass-blur-soft: none; --ui-dropdown-blur: none; --bs-primary-light: #424245; --surface-glass-bg: #ffffff; --surface-card-bg: #ffffff; --surface-border: 1px solid rgba(0, 0, 0, 0.08); --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --surface-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06); --surface-blur: none; --ui-card-surface: #ffffff; --ui-card-surface-border: rgba(0, 0, 0, 0.08); --ui-card-surface-blur: none; --ui-card-surface-blur-hero: none; --ui-card-surface-blur-subtle: none; --aura-glass-card-surface-border: rgba(0, 0, 0, 0.08); --aura-glass-card-surface-bg: #ffffff; --aura-glass-card-surface-bg-hover: #fafafa; --aura-glass-card-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --aura-glass-card-surface-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06); --aura-glass-card-surface-blur: none; --aura-glass-shell-surface-bg: #ffffff; --aura-glass-shell-surface-bg-hover: #fafafa; --aura-glass-shell-surface-border: rgba(0, 0, 0, 0.07); --aura-glass-shell-surface-border-hover: rgba(0, 0, 0, 0.12); --aura-glass-shell-surface-shadow: none; --aura-glass-shell-surface-shadow-hover: none; --aura-glass-shell-surface-blur: none; --document-surface-bg: #ffffff; --document-surface-bg-hover: #fafafa; --document-surface-border: rgba(0, 0, 0, 0.08); --document-surface-border-hover: rgba(0, 0, 0, 0.12); --document-surface-shadow: none; --document-surface-shadow-hover: none; --document-card-bg: #ffffff; --document-card-bg-hover: #fafafa; --document-card-bg-hero: #ffffff; --document-card-bg-hero-hover: #fafafa; color: var(--ui-text-primary); background: #f5f5f7 !important; background-attachment: fixed; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } html:has(body.ui-material-paper) { background: #f5f5f7 !important; background-image: none !important; } body.ui-material-paper::before { content: none !important; display: none !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) :where( .glassmorphism, .card, .dropdown-menu, .modal-content, .offcanvas, .list-group-item, .navbar, /* Champs documentaires : coque .doc-client-field porte la surface, pas le contrôle. */ .form-control:not(.doc-client-field-control), .form-select:not(.doc-client-field-control), .input-group-text, .nav-tabs .nav-link, .nav-pills .nav-link, .alert, .popover, .tooltip-inner, .accordion-item, .accordion-button, .progress, .pagination .page-link, .fc, .swal2-popup, .select2-container--default .select2-selection--single, .select2-dropdown, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select ) { background: var(--ui-surface-bg) !important; border-color: var(--ui-surface-border) !important; color: var(--ui-text-primary); box-shadow: var(--ui-surface-shadow) !important; } body.ui-material-glass .card { background: var(--surface-card-bg) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--surface-shadow) !important; } body.ui-material-glass :where( .glassmorphism, .dropdown-menu, .modal-content, .offcanvas, .list-group-item, .navbar, .form-control:not(.doc-client-field-control), .form-select:not(.doc-client-field-control), .input-group-text, .nav-tabs .nav-link, .nav-pills .nav-link, .alert, .badge, .popover, .tooltip-inner, .accordion-item, .accordion-button, .progress, .pagination .page-link, .fc, .swal2-popup, .select2-container--default .select2-selection--single, .select2-dropdown, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select ) { -webkit-backdrop-filter: var(--ui-glass-blur); backdrop-filter: var(--ui-glass-blur); color: var(--ui-text-primary); } body.ui-material-glass :where(.group-pill, .bottom-menu) { background: color-mix(in srgb, var(--ui-surface-bg) 76%, transparent) !important; border: 1px solid var(--ui-surface-border) !important; box-shadow: var(--ui-surface-shadow) !important; -webkit-backdrop-filter: var(--ui-glass-blur-soft) !important; backdrop-filter: var(--ui-glass-blur-soft) !important; color: var(--ui-text-primary) !important; } body.ui-material-glass :where(.group-pill) { overflow: hidden; } body.ui-material-glass .group-pill .pill-gap-group > .btn { background: color-mix(in srgb, var(--ui-surface-bg-strong) 64%, transparent) !important; border: 1px solid color-mix(in srgb, var(--ui-surface-border) 80%, transparent) !important; color: var(--ui-text-primary) !important; box-shadow: none !important; -webkit-backdrop-filter: var(--ui-glass-blur-soft); backdrop-filter: var(--ui-glass-blur-soft); } body.ui-material-glass .group-pill .pill-gap-group > .btn:hover, body.ui-material-glass .group-pill .pill-gap-group > .btn:focus-visible { background: color-mix(in srgb, var(--ui-surface-bg-strong) 84%, transparent) !important; border-color: color-mix(in srgb, var(--ui-surface-border) 92%, transparent) !important; transform: translateY(-1px); } body.ui-material-glass .group-pill .pill-gap-group > .btn.active { background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important; border-color: color-mix(in srgb, var(--ui-accent) 56%, #ffffff 44%) !important; color: var(--ui-on-accent) !important; box-shadow: var(--ui-surface-shadow-hover) !important; } body.ui-material-glass :where(.bottom-menu) { border-top-color: var(--ui-surface-border) !important; border-bottom-color: color-mix(in srgb, var(--ui-surface-border) 45%, transparent) !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) :where(.card-header) { background: transparent !important; border-color: var(--ui-surface-border) !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) :where( .modal-header, .accordion-button:not(.collapsed) ) { background: var(--ui-surface-bg-strong) !important; border-color: var(--ui-surface-border) !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) :where( .btn-primary, .badge.text-bg-primary, .page-item.active .page-link ) { background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important; border-color: color-mix(in srgb, var(--ui-accent) 62%, #ffffff 38%) !important; color: var(--ui-on-accent) !important; text-shadow: none; } body.ui-material-paper :where( .btn-primary, .badge.text-bg-primary, .page-item.active .page-link ) { background: #111111 !important; border-color: #111111 !important; color: #ffffff !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) :where( .text-muted, .form-text, small, .small, .text-secondary ) { color: var(--ui-text-muted) !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) :where( a, .nav-link, .btn-link ) { color: var(--ui-link); } body.ui-material-glass :where(.btn, .nav-pills .nav-link, .dropdown-item, .list-group-item, .pagination .page-link) { transition: box-shadow .22s ease, transform .22s ease, background-color .22s ease, border-color .22s ease; } body.ui-material-glass :where(.btn:hover, .nav-pills .nav-link:hover, .list-group-item:hover, .pagination .page-link:hover) { box-shadow: var(--ui-surface-shadow-hover) !important; } body.ui-material-glass :where(.btn:hover, .nav-pills .nav-link:hover, .pagination .page-link:hover) { transform: translateY(-1px); } body.ui-material-glass :is( .aura-more-options__trigger, .doc-header-contract__icon-btn.btn, .quote-top-actions__action.btn, .invoice-toolbar__action.btn, .client-order-main-card__action.btn, .ro-doc-top-actions__action.btn, .credit-note-edit-header__action.btn, .purchase-order-header__action.btn, .delivery-note-icon-action.btn ):is(:hover, :focus-visible) { transform: none; box-shadow: none !important; } body.ui-material-glass :where(.table > :not(caption) > * > *) { background-clip: padding-box; } body.ui-material-glass :where(.table-hover > tbody > tr:hover > *) { background-color: rgba(255, 255, 255, 0.22) !important; } body.ui-material-glass :where(.dropdown-item:hover, .dropdown-item:focus, .list-group-item.active, .nav-pills .nav-link.active) { background-color: rgba(255, 255, 255, 0.24) !important; border-color: rgba(255, 255, 255, 0.45) !important; } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) .main-content { margin-bottom: 112px; } @media (max-width: 768px) { body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) .main-content { margin-bottom: 96px !important; padding-left: .75rem; padding-right: .75rem; } } body:is(.ui-material-glass, .ui-material-velvet, .ui-material-paper) #mobileMenu.is-open { display: flex !important; } /* Alertes Bootstrap contextuelles en mode glassmorphism */ body.ui-material-glass .alert, body.ui-material-velvet .alert, body.ui-material-paper .alert { position: relative; border-width: 1px; border-style: solid; border-radius: 16px; overflow: hidden; } body.ui-material-glass .ui-alert, body.ui-material-velvet .ui-alert, body.ui-material-paper .ui-alert, body.ui-material-glass .ui-alert-inline, body.ui-material-velvet .ui-alert-inline, body.ui-material-paper .ui-alert-inline { border-radius: 12px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } body.ui-material-glass .alert::before, body.ui-material-velvet .alert::before, body.ui-material-paper .alert::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03)); opacity: 0.7; } body.ui-material-glass .alert > *, body.ui-material-velvet .alert > *, body.ui-material-paper .alert > * { position: relative; z-index: 1; } body.ui-material-glass :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark), body.ui-material-velvet :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark), body.ui-material-paper :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark) { --alert-tone: rgba(255, 255, 255, 0.5); color: color-mix(in srgb, var(--ui-text-primary, #e5eefc) 74%, var(--alert-tone) 26%) !important; border-color: color-mix(in srgb, var(--alert-tone) 72%, var(--ui-surface-border, rgba(255, 255, 255, 0.18)) 28%) !important; background: radial-gradient(circle at 10% -16%, color-mix(in srgb, var(--alert-tone) 42%, transparent 58%), transparent 50%), radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--alert-tone) 18%, transparent 82%), transparent 32%), linear-gradient( 145deg, color-mix(in srgb, var(--ui-surface-bg, rgba(16, 18, 22, 0.82)) 66%, var(--alert-tone) 34%), color-mix(in srgb, var(--ui-surface-bg-strong, rgba(10, 12, 16, 0.9)) 78%, var(--alert-tone) 22%) ) !important; box-shadow: 0 18px 34px color-mix(in srgb, rgba(0, 0, 0, 0.44) 72%, var(--alert-tone) 28%), 0 0 0 1px color-mix(in srgb, var(--alert-tone) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } body.ui-material-glass .alert-success, body.ui-material-velvet .alert-success, body.ui-material-paper .alert-success { --alert-tone: color-mix(in srgb, var(--ui-status-success-border, rgba(25, 135, 84, 0.45)) 68%, #34d399 32%); } body.ui-material-glass .alert-info, body.ui-material-velvet .alert-info, body.ui-material-paper .alert-info { --alert-tone: color-mix(in srgb, rgba(59, 130, 246, 0.72) 68%, #7dd3fc 32%); } body.ui-material-glass .alert-warning, body.ui-material-velvet .alert-warning, body.ui-material-paper .alert-warning { --alert-tone: color-mix(in srgb, var(--ui-status-warning-border, rgba(255, 193, 7, 0.45)) 66%, #fbbf24 34%); } body.ui-material-glass .alert-danger, body.ui-material-velvet .alert-danger, body.ui-material-paper .alert-danger { --alert-tone: color-mix(in srgb, var(--ui-status-danger-border, rgba(220, 53, 69, 0.45)) 68%, #fb7185 32%); } body.ui-material-glass .alert-primary, body.ui-material-velvet .alert-primary, body.ui-material-paper .alert-primary { --alert-tone: color-mix(in srgb, rgba(99, 102, 241, 0.78) 68%, #a5b4fc 32%); } body.ui-material-glass .alert-secondary, body.ui-material-velvet .alert-secondary, body.ui-material-paper .alert-secondary { --alert-tone: rgb(148, 163, 184); } body.ui-material-glass .alert-light, body.ui-material-velvet .alert-light, body.ui-material-paper .alert-light { --alert-tone: rgb(226, 232, 240); } body.ui-material-glass .alert-dark, body.ui-material-velvet .alert-dark, body.ui-material-paper .alert-dark { --alert-tone: rgb(51, 65, 85); } /* Icône automatique + animation douce */ body.ui-material-glass :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark), body.ui-material-velvet :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark), body.ui-material-paper :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark) { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0-11a1 1 0 1 0 0 2 1 1 0 0 0 0-2m1 7V7H7v4z'/%3E%3C/svg%3E"); padding-left: 2.8rem; animation: alert-glass-in .32s cubic-bezier(.22, .8, .28, 1) both; } body.ui-material-glass :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark)::after, body.ui-material-velvet :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark)::after, body.ui-material-paper :where(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark)::after { content: ""; position: absolute; left: .95rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); background: color-mix(in srgb, var(--ui-text-primary, #f8fafc) 68%, var(--alert-tone) 32%); -webkit-mask-image: var(--alert-icon); mask-image: var(--alert-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; z-index: 2; opacity: 1; } body.ui-material-glass .alert-success, body.ui-material-velvet .alert-success, body.ui-material-paper .alert-success { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.97 11.03a.75.75 0 0 0 1.08-.022l3.992-4.99a.75.75 0 1 0-1.15-.964L7.44 9.282 5.384 7.225a.75.75 0 0 0-1.06 1.06z'/%3E%3C/svg%3E"); } /* Flash dismissible : croix bien à droite, contraste lisible sur glass */ body.ui-material-glass .alert.alert-dismissible, body.ui-material-velvet .alert.alert-dismissible, body.ui-material-paper .alert.alert-dismissible, .alert.aura-flash.alert-dismissible { position: relative; padding-right: 3.1rem !important; } body.ui-material-glass .alert.alert-dismissible .btn-close, body.ui-material-velvet .alert.alert-dismissible .btn-close, body.ui-material-paper .alert.alert-dismissible .btn-close, .alert.aura-flash.alert-dismissible .btn-close, .alert.aura-flash .aura-flash__close { position: absolute; top: 50%; right: 0.85rem; left: auto; bottom: auto; transform: translateY(-50%); margin: 0; padding: 0.45rem; z-index: 5; box-sizing: content-box; width: 0.7em; height: 0.7em; opacity: 0.92; /* Croix claire sur fond glass sombre (SVG btn-close noir → invert) */ filter: invert(1) grayscale(1) brightness(1.85); background-color: transparent; } body.ui-material-glass .alert.alert-dismissible .btn-close:hover, body.ui-material-velvet .alert.alert-dismissible .btn-close:hover, body.ui-material-paper .alert.alert-dismissible .btn-close:hover, .alert.aura-flash.alert-dismissible .btn-close:hover, .alert.aura-flash .aura-flash__close:hover { opacity: 1; filter: invert(1) grayscale(1) brightness(2.1); } /* Paper : fond clair → croix sombre, pas d’invert global */ body.ui-material-paper .alert.alert-dismissible .btn-close, body.ui-material-paper .alert.aura-flash .aura-flash__close { filter: none; opacity: 0.72; } body.ui-material-paper .alert.alert-dismissible .btn-close:hover, body.ui-material-paper .alert.aura-flash .aura-flash__close:hover { filter: none; opacity: 1; } /* Modales : croix lisible (évite stock.css / theme-dark qui masquent le SVG Bootstrap) */ body:is(.ui-material-glass, .ui-material-velvet) .modal .modal-header .btn-close { --bs-btn-close-opacity: 0.88; --bs-btn-close-hover-opacity: 1; --bs-btn-close-focus-opacity: 1; --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8fafc'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); filter: none; opacity: var(--bs-btn-close-opacity); background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat !important; } body:is(.ui-material-glass, .ui-material-velvet) .modal .modal-header .btn-close:hover, body:is(.ui-material-glass, .ui-material-velvet) .modal .modal-header .btn-close:focus-visible { opacity: var(--bs-btn-close-hover-opacity); } body.ui-material-paper .modal .modal-header .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23334155'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); filter: none; opacity: 0.76; background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat !important; } body.ui-material-paper .modal .modal-header .btn-close:hover, body.ui-material-paper .modal .modal-header .btn-close:focus-visible { opacity: 1; } body.ui-material-glass .alert-info, body.ui-material-velvet .alert-info, body.ui-material-paper .alert-info { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-11.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287 1.346-1.334 1.969-2.428 1.969-.89 0-1.505-.434-1.505-1.245 0-.215.035-.46.088-.705l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 4.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E"); } body.ui-material-glass .alert-warning, body.ui-material-velvet .alert-warning, body.ui-material-paper .alert-warning { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.036.11.027.133a.13.13 0 0 1-.06.06.14.14 0 0 1-.066.017H1.123a.14.14 0 0 1-.066-.017.13.13 0 0 1-.06-.06c-.01-.024-.01-.074.027-.133L7.884 2.073a.15.15 0 0 1 .054-.057M8 5c-.535 0-.954.462-.9.995l.35 3.507a.55.55 0 0 0 1.1 0l.35-3.507A.9.9 0 0 0 8 5m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E"); } body.ui-material-glass .alert-danger, body.ui-material-velvet .alert-danger, body.ui-material-paper .alert-danger { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M11.46.146a.5.5 0 0 1 .353.146l4.04 4.04a.5.5 0 0 1 .147.354v6.627a.5.5 0 0 1-.146.353l-4.041 4.041a.5.5 0 0 1-.354.146H4.686a.5.5 0 0 1-.353-.146L.292 11.667a.5.5 0 0 1-.146-.353V4.686a.5.5 0 0 1 .146-.353L4.333.292A.5.5 0 0 1 4.686.146zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/%3E%3C/svg%3E"); } /* Paper: surfaces plates, pas de blur glass */ body.ui-material-paper :where( .glassmorphism, .card, .dropdown-menu, .modal-content, .offcanvas, .sidebar ) { background: #ffffff !important; border-color: rgba(17, 17, 17, 0.12) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.ui-material-paper .card { background: #ffffff !important; } @keyframes alert-glass-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.ui-material-glass .alert, body.ui-material-velvet .alert { animation: none; } } /* Mode compact mobile (activer en ajoutant .alerts-compact-mobile au body) */ @media (max-width: 576px) { body.alerts-compact-mobile .alert { padding-top: .55rem; padding-bottom: .55rem; padding-right: .7rem; padding-left: 2.2rem; font-size: .875rem; line-height: 1.3; border-radius: 12px; } body.alerts-compact-mobile .alert::after { left: .72rem; width: .9rem; height: .9rem; } } body.ui-material-glass :where(.form-control:focus, .form-select:focus, .accordion-button:focus, .btn:focus, .btn:focus-visible) { border-color: color-mix(in srgb, var(--ui-accent) 65%, #ffffff 35%) !important; box-shadow: 0 0 0 .2rem rgba(145, 191, 255, 0.28), var(--ui-surface-shadow) !important; } :where(.pill-gap-group) { display: flex !important; flex-wrap: wrap; gap: .45rem; } :where(.pill-gap-group) > .btn { border-radius: 999px !important; } body.ui-glow-soft { --ui-surface-shadow: 0 5px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 243, 227, 0.05); } body.ui-glow-medium { --ui-surface-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 243, 227, 0.06); } body.ui-glow-strong { --ui-surface-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 8px rgba(239, 210, 174, 0.1), inset 0 1px 0 rgba(255, 243, 227, 0.08); } .aura-dialog { position: fixed; inset: 0; z-index: 1085; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--ui-text-primary, #0f172a) 24%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.18s ease; } .aura-dialog.is-visible { opacity: 1; } .aura-dialog__panel { width: min(92vw, 420px); border-radius: 20px; padding: 1.15rem 1.2rem 1rem; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.22)) 86%, transparent); background: color-mix(in srgb, var(--ui-surface-bg-strong, #f6f7f9) 94%, #ffffff); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); color: var(--ui-text-primary, #0f172a); } .aura-dialog__panel--wide { width: min(92vw, 460px); } .aura-dialog__kicker { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-text-muted, #64748b); } .aura-dialog__title { margin: 0 0 0.55rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; } .aura-dialog__message { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ui-text-muted, #64748b); white-space: pre-line; } .aura-dialog__field { margin-top: 0.9rem; } .aura-dialog__field-label { display: block; margin-bottom: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--ui-text-muted, #64748b); } .aura-dialog__input { width: 100%; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.24)) 80%, transparent); background: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.08)) 88%, transparent); color: var(--ui-text-primary, #0f172a); padding: 0.55rem 0.7rem; font-size: 0.92rem; } .aura-dialog__input:focus { outline: none; border-color: color-mix(in srgb, var(--apple-blue, #007aff) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-blue, #007aff) 18%, transparent); } .aura-dialog__input.is-invalid { border-color: color-mix(in srgb, #ff453a 70%, transparent); } .aura-dialog__error { margin-top: 0.35rem; font-size: 0.78rem; color: #ff453a; } .aura-dialog__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; } .aura-dialog__pill { border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.24)) 80%, transparent); background: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.08)) 88%, transparent); color: var(--ui-text-primary, #0f172a); padding: 0.38rem 0.78rem; font-size: 0.82rem; font-weight: 600; line-height: 1.2; cursor: pointer; } .aura-dialog__pill.is-selected { border-color: color-mix(in srgb, var(--apple-blue, #007aff) 55%, transparent); background: color-mix(in srgb, var(--apple-blue, #007aff) 16%, transparent); } .aura-dialog__pill--stacked { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; border-radius: 14px; padding: 0.42rem 0.78rem 0.4rem; } .aura-dialog__pill-hint { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ui-text-muted, #64748b); } .aura-dialog__outcome { margin: 0.85rem 0 0; padding: 0.7rem 0.78rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.24)) 80%, transparent); background: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.08)) 88%, transparent); font-size: 0.82rem; line-height: 1.45; color: var(--ui-text-primary, #0f172a); white-space: pre-line; } .aura-dialog__actions [data-aura-dialog-ok]:disabled { opacity: 0.45; cursor: not-allowed; } .aura-dialog__choice { margin-top: 0.9rem; } .aura-dialog__checkbox { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--ui-text-primary, #0f172a); cursor: pointer; } .aura-dialog__checkbox input { margin-top: 0.18rem; flex: 0 0 auto; } .aura-dialog__panel--stack { width: min(92vw, 24.5rem); max-height: min(88vh, 36rem); display: flex; flex-direction: column; } .aura-dialog__panel--stack .aura-dialog__title { margin-bottom: 1rem; text-align: center; } .aura-dialog__actions-stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; min-height: 0; overflow: auto; } .aura-dialog__action { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; min-height: 2.85rem; margin: 0; padding: 0.72rem 1.1rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); background: #ffffff; color: #111111; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); cursor: pointer; filter: none; transform: none; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .aura-dialog__action i { font-size: 1.05rem; line-height: 1; flex: 0 0 auto; } .aura-dialog__action-copy { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; min-width: 0; } .aura-dialog__action-label { line-height: 1.2; } .aura-dialog__action-hint { font-size: 0.76rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: #64748b; opacity: 1; } .aura-dialog__action--explained { align-items: center; justify-content: flex-start; min-height: 3.55rem; border-radius: 18px; padding: 0.85rem 1.15rem; text-align: left; } .aura-dialog__action--explained .aura-dialog__action-copy { align-items: flex-start; } .aura-dialog__action:hover, .aura-dialog__action:focus, .aura-dialog__action:focus-visible { color: #111111; background: #ffffff; border-color: rgba(15, 23, 42, 0.22); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); filter: none; transform: none; outline: none; } .aura-dialog__action:focus-visible { box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12), 0 0 0 3px color-mix(in srgb, rgba(15, 23, 42, 0.16) 70%, transparent); } .aura-dialog__action--secondary { border-color: color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: var(--ui-text-primary, #0f172a); box-shadow: none; filter: none; } .aura-dialog__action--secondary:hover, .aura-dialog__action--secondary:focus, .aura-dialog__action--secondary:focus-visible { color: var(--ui-text-primary, #0f172a); background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 32%, transparent); filter: none; transform: none; box-shadow: none; outline: none; } .aura-dialog__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } .aura-dialog__actions--stack-footer { justify-content: center; margin-top: 0.85rem; } .aura-dialog__actions--stack-footer .aura-dialog__back { min-width: 0; color: var(--ui-text-muted, #64748b); text-decoration: none; } .aura-dialog__actions--stack-footer .aura-dialog__back:hover { color: var(--ui-text-primary, #0f172a); text-decoration: underline; } .aura-dialog__actions .btn { border-radius: 999px; min-width: 5.5rem; font-weight: 600; } .aura-success { position: fixed; inset: 0; z-index: 1086; display: grid; place-items: center; padding: 1rem; } .aura-success::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, #06080c 62%, transparent); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); opacity: 0; transition: opacity 0.22s ease; } body.ui-material-velvet.pos-shell .aura-success::before, body.ui-material-velvet .aura-success::before { background: color-mix(in srgb, #050608 68%, transparent); } .aura-success.is-visible::before { opacity: 1; } .aura-success__dialog { position: relative; z-index: 1; width: min(92vw, 420px); padding: 1.5rem 1.35rem 1.25rem; border-radius: 22px; text-align: center; background: linear-gradient( 160deg, color-mix(in srgb, rgb(24, 27, 34) 97%, #22c55e 3%), color-mix(in srgb, rgb(16, 18, 24) 98%, #000 2%) ); border: 1px solid color-mix(in srgb, #22c55e 22%, var(--ui-border-subtle, #d1d5db)); box-shadow: 0 18px 42px rgba(2, 4, 8, 0.34), var(--pos-surface-shadow, 0 14px 36px color-mix(in srgb, #0f172a 18%, transparent)); color: var(--ui-text-primary, var(--pos-premium-text, #f5f5f5)); opacity: 0; transform: scale(0.94) translateY(8px); transition: opacity 0.2s ease, transform 0.24s ease; } body.ui-material-velvet.pos-shell .aura-success__dialog, body.ui-material-velvet .aura-success__dialog { background: linear-gradient( 160deg, color-mix(in srgb, var(--pos-surface-bg-strong, rgb(31, 32, 35)) 99%, #1a2e22 1%), color-mix(in srgb, var(--pos-surface-bg, rgb(24, 25, 28)) 98%, #0f1115 2%) ); } .aura-success.is-visible .aura-success__dialog { opacity: 1; transform: scale(1) translateY(0); } .aura-success.is-pulse .aura-success__dialog { animation: auraSuccessPulse 0.38s ease; } @keyframes auraSuccessPulse { 0% { transform: scale(1) translateY(0); } 40% { transform: scale(1.025) translateY(0); } 100% { transform: scale(1) translateY(0); } } .aura-success__icon { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto 0.85rem; border-radius: 999px; background: color-mix(in srgb, #22c55e 18%, transparent); border: 1px solid color-mix(in srgb, #22c55e 42%, transparent); color: #16a34a; font-size: 1.55rem; opacity: 0; transform: scale(0.55); } .aura-success.is-visible .aura-success__icon { animation: auraSuccessIconPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards; } @keyframes auraSuccessIconPop { 0% { opacity: 0; transform: scale(0.55); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } .aura-success__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #16a34a 82%, var(--ui-text-muted, var(--pos-premium-muted))); } .aura-success__title { margin: 0; font-size: clamp(1.15rem, 4vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .aura-success__context { margin: 0.45rem 0 0; font-size: 0.84rem; color: var(--ui-text-muted, var(--pos-premium-muted)); } .aura-success__story { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.65rem; align-items: center; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--pos-premium-border, #d1d5db)) 55%, transparent); background: color-mix(in srgb, var(--ui-surface-bg, var(--pos-surface-2, rgba(255, 255, 255, 0.1))) 78%, transparent); text-align: left; } .aura-success__story-from, .aura-success__story-to { display: grid; gap: 0.15rem; min-width: 0; } .aura-success__story-label { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-text-muted, var(--pos-premium-muted)); } .aura-success__story-from strong { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: line-through; opacity: 0.72; font-weight: 600; } .aura-success__story-to strong { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 1.05rem; font-weight: 700; } .aura-success__story-arrow { font-size: 1.15rem; color: var(--ui-text-muted, var(--pos-premium-muted)); opacity: 0; transform: translateX(-10px); } .aura-success.is-visible .aura-success__story-arrow { animation: auraSuccessArrowSlide 0.42s ease 0.28s forwards; } @keyframes auraSuccessArrowSlide { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } .aura-success__story-to.is-reveal { opacity: 0; transform: scale(0.94); } .aura-success.is-visible .aura-success__story-to.is-reveal { animation: auraSuccessToReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards; } @keyframes auraSuccessToReveal { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } } .aura-success__highlight { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--pos-premium-border, #d1d5db)) 55%, transparent); background: color-mix(in srgb, var(--ui-surface-bg, var(--pos-surface-2, rgba(255, 255, 255, 0.1))) 78%, transparent); font-size: 0.95rem; line-height: 1.45; text-align: left; } .aura-success__highlight strong { font-weight: 700; } .aura-success__amount { margin: 0.85rem 0 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; } .aura-success__amount-label { display: block; margin-bottom: 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-text-muted, var(--pos-premium-muted)); } .aura-success__note { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--ui-text-muted, var(--pos-premium-muted)); } .aura-success__warning { margin: 0.45rem 0 0; font-size: 0.82rem; color: #d97706; } .aura-success__cta { margin-top: 1rem; min-width: 8.5rem; border-radius: 999px; font-weight: 600; } :root { --premium-space-1: var(--ui-space-2, 0.5rem); --premium-space-2: var(--ui-space-3, 0.75rem); --premium-space-3: var(--ui-space-4, 1rem); --premium-space-4: var(--ui-space-5, 1.5rem); --premium-space-5: var(--ui-space-6, 2rem); --premium-radius-sm: var(--ui-radius-sm, 0.5rem); --premium-radius-md: var(--ui-radius-md, 0.875rem); --premium-radius-lg: var(--ui-radius-lg, 1.25rem); --premium-radius-pill: var(--ui-radius-pill, 999px); --premium-shadow-soft: 0 5px 14px rgba(15, 23, 42, 0.06); --premium-shadow-soft-hover: 0 8px 20px rgba(15, 23, 42, 0.09); --premium-border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.18)) 82%, transparent); --premium-surface: linear-gradient( 150deg, color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.09)) 88%, transparent), color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.16)) 78%, transparent) ); --premium-surface-elevated: linear-gradient( 160deg, color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.11)) 84%, transparent), color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.22)) 72%, transparent) ); --premium-text-main: var(--ui-text-primary, #0f172a); --premium-text-muted: var(--ui-text-muted, #64748b); --premium-font: var(--ui-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif); } .premium-shell, .premium-card, .premium-table-wrap { border-radius: var(--premium-radius-lg); border: var(--premium-border); background: var(--premium-surface); box-shadow: var(--premium-shadow-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .premium-card:hover, .premium-shell:hover { box-shadow: var(--premium-shadow-soft-hover); } .premium-section-title { margin: 0; font-family: var(--premium-font); font-weight: 640; letter-spacing: 0.01em; color: var(--premium-text-main); } .premium-section-subtitle { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--premium-text-muted); } .premium-section-lead { margin: 0.2rem 0 0; font-size: 0.82rem; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--premium-text-muted); } .aura-media-rail { display: flex; gap: var(--premium-space-2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 0.15rem; } .aura-media-rail__item { flex: 0 0 auto; scroll-snap-align: start; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.16)) 72%, transparent); border-radius: var(--premium-radius-md); background: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.07)) 90%, transparent); transition: border-color var(--surface-motion-duration, 0.18s) ease, box-shadow var(--surface-motion-duration, 0.18s) ease; } .aura-media-rail__item.is-active, .aura-media-rail__item[aria-current="true"] { border-color: color-mix(in srgb, var(--ui-text-primary, #ffffff) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-text-primary, #ffffff) 22%, transparent); } .premium-kpi-grid { display: grid; gap: var(--premium-space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); } .premium-kpi-card { border-radius: var(--premium-radius-md); border: var(--premium-border); background: var(--premium-surface-elevated); padding: 0.8rem 0.95rem; } .premium-kpi-label { display: block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--premium-text-muted); } .premium-kpi-value { display: block; margin-top: 0.25rem; font-size: 1.03rem; font-weight: 640; color: var(--premium-text-main); } .premium-table { margin-bottom: 0; } .premium-table thead th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--premium-text-muted); border-bottom-color: color-mix(in srgb, var(--premium-text-muted) 24%, transparent); } .premium-table tbody td { border-bottom-color: color-mix(in srgb, var(--premium-text-muted) 16%, transparent); } .premium-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: var(--premium-radius-pill) !important; font-size: 0.74rem; font-weight: 600; border: 1px solid transparent; } .premium-status-badge--success { color: var(--ui-status-success-text, #166534); background: var(--ui-status-success-bg, rgba(22, 163, 74, 0.2)); border-color: var(--ui-status-success-border, rgba(22, 163, 74, 0.38)); } .premium-status-badge--warning { color: var(--ui-status-warning-text, #92400e); background: var(--ui-status-warning-bg, rgba(245, 158, 11, 0.2)); border-color: var(--ui-status-warning-border, rgba(245, 158, 11, 0.38)); } .premium-status-badge--danger { color: var(--ui-status-danger-text, #991b1b); background: var(--ui-status-danger-bg, rgba(220, 38, 38, 0.2)); border-color: var(--ui-status-danger-border, rgba(220, 38, 38, 0.38)); } .premium-status-badge--paid, .premium-status-badge--ready { color: var(--ui-status-success-text); background: var(--ui-status-success-bg); border-color: var(--ui-status-success-border); } .premium-status-badge--draft { color: #94a3b8; background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.38); } .premium-status-badge--credited { color: #be185d; background: rgba(244, 114, 182, 0.2); border-color: rgba(244, 114, 182, 0.38); } .premium-status-badge--due, .premium-status-badge--waiting { color: var(--ui-status-warning-text); background: var(--ui-status-warning-bg); border-color: var(--ui-status-warning-border); } .premium-status-badge--in-progress { color: var(--ui-status-progress-text); background: var(--ui-status-progress-bg); border-color: var(--ui-status-progress-border); } .premium-status-badge--received { color: var(--ui-status-received-text); background: var(--ui-status-received-bg); border-color: var(--ui-status-received-border); } .premium-status-badge--overdue { color: var(--ui-status-danger-text); background: var(--ui-status-danger-bg); border-color: var(--ui-status-danger-border); } .premium-actions { display: flex; align-items: center; gap: var(--premium-space-2); flex-wrap: wrap; } .premium-actions .btn { border-radius: var(--premium-radius-pill); font-weight: 600; } .premium-actions .btn-primary { box-shadow: 0 6px 14px color-mix(in srgb, var(--bs-primary, #0d6efd) 22%, transparent); } .premium-filter-bar { border-radius: var(--premium-radius-md); border: var(--premium-border); background: color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.07)) 90%, transparent); padding: 0.75rem; } @media (max-width: 992px) { .premium-kpi-grid { grid-template-columns: 1fr; } } :root { --surface-glass-bg: linear-gradient( 160deg, color-mix(in srgb, var(--ui-surface-3, rgba(255, 255, 255, 0.12)) 62%, transparent), color-mix(in srgb, var(--ui-surface-1, rgba(255, 255, 255, 0.04)) 74%, transparent) ); --surface-card-bg: linear-gradient( 160deg, color-mix(in srgb, var(--ui-surface-2, rgba(255, 255, 255, 0.08)) 70%, transparent), color-mix(in srgb, var(--ui-surface-1, rgba(255, 255, 255, 0.04)) 82%, transparent) ); --surface-border: 1px solid color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.16)) 72%, transparent); --surface-radius-md: var(--ui-radius-md, 0.75rem); --surface-radius-lg: var(--ui-radius-lg, 1.25rem); --surface-shadow: var(--ui-shadow-card, 0 8px 20px rgba(2, 4, 8, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06)); --surface-shadow-hover: var(--ui-shadow-card-hover, 0 12px 26px rgba(2, 4, 8, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08)); --surface-blur: blur(24px) saturate(145%); --surface-chip-bg: color-mix(in srgb, var(--ui-surface-2, rgba(255, 255, 255, 0.12)) 82%, transparent); --surface-chip-border: color-mix(in srgb, var(--ui-border-subtle, rgba(255, 255, 255, 0.22)) 90%, transparent); --surface-chip-text: var(--ui-text-primary, #ffffff); --surface-button-bg: linear-gradient( 145deg, color-mix(in srgb, var(--bs-primary, #0d6efd) 78%, rgba(255, 255, 255, 0.2)), color-mix(in srgb, var(--bs-primary, #0d6efd) 50%, var(--ui-surface-1, rgba(255, 255, 255, 0.04))) ); --surface-button-shadow: 0 6px 14px color-mix(in srgb, var(--bs-primary, #0d6efd) 22%, transparent); --surface-focus-ring: var(--ui-focus-ring, 0 0 0 0.2rem rgba(13, 110, 253, 0.25)); --surface-motion-duration: var(--ui-motion-duration-sm, 0.18s); --surface-motion-ease: var(--ui-motion-ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)); --surface-transition: transform var(--surface-motion-duration) var(--surface-motion-ease), box-shadow var(--surface-motion-duration) var(--surface-motion-ease), border-color var(--surface-motion-duration) var(--surface-motion-ease), background-color var(--surface-motion-duration) var(--surface-motion-ease), background var(--surface-motion-duration) var(--surface-motion-ease); --surface-transition-card: box-shadow var(--surface-motion-duration) var(--surface-motion-ease), border-color var(--surface-motion-duration) var(--surface-motion-ease), background-color var(--surface-motion-duration) var(--surface-motion-ease), background var(--surface-motion-duration) var(--surface-motion-ease); } .app-surface, .ui-surface-glass, .ui-surface-card, .doc-surface, .doc-details-shell, .doc-details-surface, .doc-details-summary-card, .invoice-context-shell, .doc-section-card, .document-action-pills, .invoice-finance-section, .invoice-finance-section--deposits, .document-attachments-shell, .invoice-supplier-sas-card, .quote-top-shell, .quote-client-shell, .premium-card, .ui-premium-settings-card { border: var(--surface-border); border-radius: var(--surface-radius-lg); box-shadow: var(--surface-shadow); backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); transition: var(--surface-transition-card); } .app-surface, .ui-surface-card, .doc-surface, .doc-details-shell, .doc-details-surface, .doc-details-summary-card, .invoice-context-shell, .doc-section-card, .document-action-pills, .invoice-finance-section, .invoice-finance-section--deposits, .document-attachments-shell, .invoice-supplier-sas-card, .quote-top-shell, .quote-client-shell, .premium-card, .ui-premium-settings-card { background: var(--surface-card-bg); } .ui-surface-glass { background: var(--surface-glass-bg); } .app-surface--glass { background: var(--surface-glass-bg); } .doc-surface { background: var(--surface-card-bg); border: var(--doc-card-border); box-shadow: var(--doc-card-shadow); backdrop-filter: var(--doc-card-blur); -webkit-backdrop-filter: var(--doc-card-blur); } .ui-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-1, 0.25rem); border-radius: var(--ui-radius-pill, 999px); border: 1px solid var(--surface-chip-border); background: var(--surface-chip-bg); color: var(--surface-chip-text); font-size: var(--ui-font-size-sm, 0.875rem); line-height: var(--ui-line-height-tight, 1.2); font-weight: var(--ui-font-weight-medium, 500); padding: 0.35rem 0.8rem; transition: var(--surface-transition); } .ui-chip:hover, .ui-chip:focus-visible { border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 42%, transparent); } .ui-btn-premium { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-radius-pill, 999px); border: 1px solid color-mix(in srgb, var(--bs-primary, #0d6efd) 52%, transparent); background: var(--surface-button-bg); color: var(--ui-text-on-accent, #fff); font-weight: var(--ui-font-weight-semibold, 600); box-shadow: var(--surface-button-shadow); transition: var(--surface-transition); } .ui-btn-premium:hover, .ui-btn-premium:focus-visible { transform: var(--ui-motion-lift-sm, translateY(-1px)); box-shadow: 0 8px 18px color-mix(in srgb, var(--bs-primary, #0d6efd) 28%, transparent); } .ui-btn-premium:focus-visible, .ui-chip:focus-visible, .app-surface:focus-visible, .ui-surface-glass:focus-visible, .ui-surface-card:focus-visible, .doc-surface:focus-visible, .ui-premium-settings-card:focus-visible { outline: none; box-shadow: var(--surface-focus-ring), var(--surface-shadow); } /* Tokens communs pour cartes document (devis / facture / BC) */ :root { --doc-card-bg: var(--document-card-bg); --doc-card-bg-hover: var(--document-card-bg-hover); --doc-card-bg-hero: var(--doc-card-bg); --doc-card-bg-hero-hover: var(--doc-card-bg-hover); --doc-card-bg-subtle: var(--doc-card-bg); --doc-card-bg-subtle-hover: var(--doc-card-bg-hover); --doc-card-border: var(--document-surface-border); --doc-card-shadow: var(--document-surface-shadow); --doc-card-shadow-hover: var(--document-surface-shadow-hover); --doc-card-shadow-hero: var(--doc-card-shadow); --doc-card-shadow-hero-hover: var(--doc-card-shadow-hover); --doc-card-shadow-subtle: var(--doc-card-shadow); --doc-card-shadow-subtle-hover: var(--doc-card-shadow-hover); --doc-list-row-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 10px rgba(0, 0, 0, 0.10); --doc-list-row-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 12px rgba(0, 0, 0, 0.12); --doc-inner-card-bg: rgba(54, 56, 62, 0.94); --doc-inner-card-border: rgba(255, 255, 255, 0.15); --doc-sales-line-bg: var(--doc-card-bg); --doc-sales-line-bg-hover: var(--doc-sales-line-bg); --doc-sales-line-border: var(--doc-card-border); --doc-sales-line-shadow: var(--doc-card-shadow); --app-shell-max-width: 70rem; --app-shell-padding-inline: clamp(0.5rem, 1.2vw, 1rem); --doc-card-radius: var(--ui-card-radius-lg, 20px); --doc-card-padding-x: 20px; --doc-card-padding-y: var(--ui-card-space-y, 0.875rem); --doc-card-gap: 20px; --doc-card-min-height: auto; --doc-list-row-padding-x: 1rem; --doc-list-row-padding-y: 0.7rem; --doc-list-row-gap: 0.7rem; --doc-list-row-radius: 16px; --doc-list-status-badge-radius: 10px; --doc-card-blur: var(--aura-glass-card-surface-blur, var(--ui-glass-blur-soft, blur(12px))); --doc-card-blur-hero: var(--aura-glass-card-surface-blur, var(--ui-glass-blur-soft, blur(12px))); --doc-card-blur-subtle: var(--aura-glass-card-surface-blur, var(--ui-glass-blur-soft, blur(12px))); --doc-shell-radius: 32px; --doc-inner-radius: 28px; --doc-shell-padding: clamp(14px, 2.2vw, 24px); --doc-shell-padding-inline-mobile: 12px; --doc-shell-radius-mobile: 20px; --doc-line-radius: 18px; --doc-line-radius-mobile: 16px; --doc-focus-ring: var(--ui-focus-ring-soft, 2px solid rgba(99, 102, 241, 0.45)); --doc-kpi-icon-size: 44px; --doc-kpi-icon-radius: 12px; --doc-kpi-icon-glyph-size: 24px; --doc-z-row: 100; --doc-z-row-hover: 150; --doc-z-row-open: 10040; --doc-z-card: 180; --doc-z-card-hover: 220; --doc-z-card-focus: 260; --doc-z-dropdown: 6000; --doc-z-dropdown-front: 10050; --doc-z-sticky: 1030; --doc-z-floating: 1040; --doc-z-overlay: 9999; --doc-z-modal: 12000; --doc-deposit-muted: var(--ui-text-muted, rgba(255, 255, 255, 0.62)); --doc-deposit-preset-active-color: #0f172a; --doc-deposit-preset-active-bg: #ffffff; --doc-deposit-preset-active-border: #ffffff; /* Contrat surface header (.doc-page__header.doc-header-contract.card.premium-card.app-surface) + rail latéral */ --aura-doc-header-contract-bg: var(--doc-card-bg); --aura-doc-header-contract-bg-hover: var(--doc-card-bg-hover); --aura-doc-header-contract-border: var(--doc-card-border); --aura-doc-header-contract-shadow: var(--doc-card-shadow); --aura-doc-header-contract-blur: var(--doc-card-blur); } body.ui-material-glass { --aura-doc-header-contract-bg: linear-gradient( 150deg, color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.09)) 96%, transparent), color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.16)) 92%, transparent) ); --aura-doc-header-contract-bg-hover: linear-gradient( 150deg, color-mix(in srgb, var(--ui-surface-bg, rgba(255, 255, 255, 0.09)) 92%, transparent), color-mix(in srgb, var(--ui-surface-bg-strong, rgba(255, 255, 255, 0.16)) 96%, transparent) ); --aura-doc-header-contract-border: var(--premium-border); --aura-doc-header-contract-shadow: var(--premium-shadow-soft); --aura-doc-header-contract-blur: blur(12px); /* * Surface shell documentaire sapphire (header index + rail latéral). * Pas --ui-surface-bg charcoal ni --aura-sidebar-tint-obsidian. */ --aura-doc-shell-surface-bg: linear-gradient(145deg, rgba(8, 13, 28, 0.42), rgba(2, 5, 14, 0.28)); --aura-doc-shell-surface-bg-hover: linear-gradient(145deg, rgba(8, 13, 28, 0.52), rgba(2, 5, 14, 0.38)); --aura-doc-shell-surface-border: rgba(168, 198, 255, 0.14); --aura-doc-shell-surface-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); --aura-doc-shell-surface-blur: blur(28px) saturate(165%); /* Rail latéral : même matière que .doc-page__header.doc-header-contract sur les index */ --aura-sidebar-glass-bg: var(--aura-doc-shell-surface-bg); --aura-sidebar-glass-bg-nested: color-mix(in srgb, var(--aura-doc-shell-surface-bg) 92%, rgba(255, 255, 255, 0.04)); --aura-sidebar-glass-border: var(--aura-doc-shell-surface-border); --aura-sidebar-glass-blur: var(--aura-doc-shell-surface-blur); --aura-sidebar-glass-shadow: var(--aura-doc-shell-surface-shadow); } /* Rail latéral glass : surface shell sapphire (pas obsidian / --ui-surface-bg) */ body.ui-material-glass nav.sidebar.position-fixed, body.ui-material-glass .sidebar { background: var(--aura-doc-shell-surface-bg) !important; background-color: transparent !important; border-color: var(--aura-doc-shell-surface-border) !important; box-shadow: var(--aura-doc-shell-surface-shadow) !important; backdrop-filter: var(--aura-doc-shell-surface-blur) !important; -webkit-backdrop-filter: var(--aura-doc-shell-surface-blur) !important; } body.ui-material-glass.sidebar-mode-expandable nav.sidebar.position-fixed:hover, body.ui-material-glass.sidebar-mode-expandable nav.sidebar.position-fixed:focus-within, body.ui-material-glass.sidebar-mode-expandable .sidebar:hover, body.ui-material-glass.sidebar-mode-expandable .sidebar:focus-within { background: var(--aura-doc-shell-surface-bg-hover) !important; box-shadow: var(--aura-doc-shell-surface-shadow), 0 0 24px rgba(93, 136, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } .doc-card--compact { --doc-card-radius: var(--ui-card-radius-md, 18px); --doc-card-padding-x: 14px; --doc-card-padding-y: calc(var(--ui-card-space-y, 0.875rem) * 0.85); --doc-card-gap: 12px; --doc-card-min-height: auto; } .doc-card--default { --doc-card-radius: 20px; --doc-card-padding-x: 20px; --doc-card-padding-y: 15px; --doc-card-gap: 20px; --doc-card-min-height: auto; } .doc-card--comfortable { --doc-card-radius: var(--ui-card-radius-lg, 20px); --doc-card-padding-x: 24px; --doc-card-padding-y: var(--ui-card-space-y-comfortable, 1rem); --doc-card-gap: 24px; --doc-card-min-height: 96px; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--documents-index) { border-radius: var(--doc-shell-radius); --surface-radius-lg: var(--doc-shell-radius); --premium-radius-lg: var(--doc-shell-radius); --doc-card-radius: var(--doc-inner-radius); } /* Cartes extérieures index : même rayon que le header documentaire (shell) */ :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--documents-index, .doc-page--service-desk-index) :is( .doc-page__header.doc-header-contract, .doc-page__list > .card, .doc-page__filters :is(.doc-filter-card, .card), .invoice-reading-rail.doc-surface ) { border-radius: var(--doc-shell-radius); } body.ui-material-glass :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--documents-index, .doc-page--service-desk-index) .doc-page__header.doc-header-contract, body.ui-material-glass :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--documents-index, .doc-page--service-desk-index) .doc-page__header.doc-header-contract.card.premium-card { border-radius: var(--doc-shell-radius) !important; } /* Surfaces communes modules documents */ .doc-surface { border-radius: var(--doc-card-radius); background: var(--doc-card-bg, var(--ui-surface-bg)); -webkit-backdrop-filter: var(--doc-card-blur); backdrop-filter: var(--doc-card-blur); border: 1px solid var(--doc-card-border); box-shadow: var(--doc-card-shadow); } .doc-inner-surface { background: var(--doc-inner-card-bg) !important; background-image: none !important; border: 1px solid var(--doc-inner-card-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order):not(:has(#doc-form)) .doc-deposit-card { --doc-deposit-radius: var(--doc-list-row-radius, 16px); --doc-deposit-radius-pill: 999px; --doc-deposit-radius-input: var(--doc-list-row-radius, 16px); --doc-deposit-gap: 0.55rem; background: var(--doc-inner-card-bg) !important; background-image: none !important; border: 1px solid var(--doc-inner-card-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: clamp(0.75rem, 1.6vw, 1rem) !important; border-radius: var(--doc-deposit-radius); } /* Standalone acomptes only — never nested #deposits inside money panel */ :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order):has(#doc-form) :is( #doc-form > #deposits.doc-deposit-card, .doc-form-document-stack--tail > #deposits.doc-deposit-card, .doc-form-document-stack--tail .doc-deposit-card ) { padding: 0 !important; margin: 0; border-radius: var(--doc-form-card-radius, var(--doc-inner-radius, 28px)) !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #doc-form ~ .doc-form-document-stack--tail, :is(.doc-page--quote) #doc-form ~ #deposits.doc-deposit-card { margin-top: var(--doc-form-block-gap, 1rem); } :is(.doc-page--invoice) #doc-form ~ #deposits.doc-deposits-section, :is(.doc-page--invoice) #doc-form ~ .doc-form-document-stack--tail .doc-deposits-section { display: flex; flex-direction: column; gap: var(--doc-form-block-gap, 1rem); } body:is(.ui-material-glass, .ui-material-velvet) :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order):not(:has(#doc-form)) .doc-deposit-card { background: var(--doc-inner-card-bg) !important; background-image: none !important; border: 1px solid var(--doc-inner-card-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: var(--doc-deposit-radius) !important; } :is(.doc-page--invoice):not(:has(#doc-form)) .doc-deposit-card.invoice-finance-section, :is(.doc-page--quote):not(:has(#doc-form)) .doc-deposit-card.doc-surface { border-radius: var(--doc-deposit-radius) !important; border: 1px solid var(--doc-inner-card-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card:not(.doc-form-section) :is(.doc-deposit-header, .doc-deposit-body) { padding: 0 !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card:not(.doc-form-section) .doc-deposit-body { display: flex; flex-direction: column; gap: var(--doc-deposit-gap, 0.55rem); padding-top: 0.55rem !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card.doc-form-section .doc-deposit-body { display: flex; flex-direction: column; gap: var(--doc-deposit-gap, 0.55rem); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card:not(.doc-form-section) .doc-deposit-header:not(:has(.doc-deposit-progress)) + .doc-deposit-body { padding-top: 0.35rem !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form { display: flex; flex-direction: column; gap: var(--doc-deposit-gap, 0.55rem); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form.is-disabled { opacity: .76; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--doc-deposit-gap, 0.55rem); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card :is(.doc-deposit-form-surface, .co-deposit-form-surface, .deposit-form-shell) { border: 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Padding panneau d’état acompte (message + CTA). Mode action-only plus compact. */ :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card :is(.deposit-state-panel, .doc-deposit-redirect-panel), :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-state-panel.doc-deposit-redirect-panel { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0.75rem 0.5rem !important; min-height: 0 !important; box-sizing: border-box; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card.doc-form-section :is(.deposit-state-panel, .doc-deposit-redirect-panel), :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card.doc-form-section .deposit-state-panel.doc-deposit-redirect-panel { padding: 0.5rem 0 !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .doc-deposit-redirect-panel--action-only { padding: 0.4rem 0 !important; justify-content: flex-start; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .doc-deposit-redirect-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; text-align: center; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .doc-deposit-redirect-panel .deposit-state-panel__copy { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .doc-deposit-redirect-panel__action { align-self: center; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title-shell { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--customers-edit) .divider-soft { height: 1px; border: 0; background: color-mix(in srgb, var(--doc-inner-card-border, rgba(255, 255, 255, 0.18)) 92%, transparent); opacity: 1; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title-shell .doc-deposit-head__divider { display: block; width: 100%; margin: 0.55rem 0 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.85rem 1.25rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title-shell { min-width: 0; flex: 1 1 auto; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title { width: auto; text-align: left; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__balance { display: flex; flex-direction: column; align-items: flex-end; gap: 0.12rem; flex: 0 0 auto; text-align: right; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__balance-label { color: var(--doc-deposit-muted, rgba(255, 255, 255, .58)); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__balance-value { color: var(--ui-text-primary, #f8fafc); font-size: clamp(0.98rem, 1.4vw, 1.12rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__balance-status { display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.2rem 0.62rem; border-radius: var(--doc-deposit-radius-pill, 999px); font-size: 0.76rem; font-weight: 650; line-height: 1; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__balance-status--settled { color: rgba(220, 252, 231, 0.96); border: 1px solid rgba(74, 222, 128, 0.28); background: rgba(34, 197, 94, 0.14); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__main { display: flex; align-items: center; gap: .55rem; min-width: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title { margin: 0; color: var(--ui-text-primary, #f8fafc); font-size: clamp(0.98rem, 1.5vw, 1.15rem); font-weight: 650; line-height: 1.15; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-pill { display: inline-flex; align-items: center; min-height: 1.65rem; padding: .28rem .7rem; border-radius: var(--doc-deposit-radius-pill, 999px); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82); font-size: .78rem; font-weight: 650; line-height: 1; white-space: nowrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-pill--strong { background: rgba(112, 112, 120, .26); color: rgba(255, 255, 255, .9); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-pill__meta { margin-left: .35rem; padding-left: .4rem; border-left: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); font-size: .74rem; font-weight: 600; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress { display: flex; flex-direction: column; gap: .42rem; margin-top: .85rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress--compact { gap: 0.35rem; margin-top: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-header--compact { padding-bottom: .5rem; margin-bottom: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-header { padding-bottom: .5rem; margin-bottom: .1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); border-radius: 0 !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card > .card-header, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .doc-deposit-header.card-header { border-radius: 0 !important; border-bottom: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress .progress, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress .doc-progress-thin { height: .32rem; border-radius: var(--doc-deposit-radius-pill, 999px); overflow: hidden; background: rgba(255, 255, 255, .08); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__track { position: relative; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__settled, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__preview { position: absolute; top: 0; bottom: 0; height: 100%; min-width: 0; border-radius: 0; transition: width 0.28s ease, left 0.28s ease, background-color 0.22s ease; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__settled { left: 0; z-index: 1; border-radius: var(--doc-deposit-radius-pill, 999px); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__preview { z-index: 2; border-radius: 0 var(--doc-deposit-radius-pill, 999px) var(--doc-deposit-radius-pill, 999px) 0; background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--ui-accent, #60a5fa) 58%, #ffffff 42%) 0 6px, color-mix(in srgb, var(--ui-accent, #60a5fa) 34%, #ffffff 66%) 6px 12px ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress .progress-bar, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress .doc-progress-fill { border-radius: var(--doc-deposit-radius-pill, 999px); background: color-mix(in srgb, var(--ui-accent, #60a5fa) 78%, #ffffff 22%); transition: width 0.28s ease, background-color 0.22s ease; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress.is-previewing .doc-deposit-progress__settled { border-top-right-radius: 0; border-bottom-right-radius: 0; background: color-mix(in srgb, #4ade80 72%, var(--ui-accent, #60a5fa) 28%); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress.is-previewing .doc-deposit-progress__preview:not([hidden]) { opacity: 1; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress.is-previewing .doc-progress-fill:not(.doc-deposit-progress__settled) { background: linear-gradient( 90deg, color-mix(in srgb, #4ade80 72%, var(--ui-accent, #60a5fa) 28%), color-mix(in srgb, var(--ui-accent, #60a5fa) 84%, #ffffff 16%) ); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__meta { display: block; margin-top: 0.35rem; color: var(--doc-deposit-muted); font-size: .74rem; line-height: 1.25; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-state { border: 1px solid var(--doc-inner-card-border) !important; border-radius: 16px; background: var(--doc-inner-card-bg) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface { display: flex; flex-direction: column; gap: .95rem; padding: clamp(1rem, 2vw, 1.25rem); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface .deposit-acompte-panel__header, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form .deposit-acompte-panel__header { margin-bottom: .85rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 14rem); grid-template-areas: "presets amount" "warning warning"; align-items: end; gap: 0.75rem 1.25rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone__presets { grid-area: presets; width: 100%; display: grid; justify-items: start; gap: 0.35rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets { display: inline-flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-inline: 0; border-radius: var(--doc-deposit-radius-pill, 999px); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets .deposit-percent-preset { width: auto; flex: 0 0 auto; min-width: 2.85rem; border-radius: var(--doc-deposit-radius-pill, 999px); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets .deposit-percent-preset--custom { min-width: 3.35rem; color: var(--doc-deposit-muted); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--doc-deposit-muted) 38%, transparent); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets .deposit-percent-preset--custom.is-active { color: var(--ui-text-primary, inherit); background: color-mix(in srgb, var(--doc-deposit-preset-active-bg) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--doc-deposit-preset-active-bg) 48%, transparent); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-custom-panel { width: min(100%, 9.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.28rem; text-align: center; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-custom-panel[hidden] { display: none !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-custom-panel__input { width: 100%; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__hero-input { min-height: 2.85rem; padding-right: 2.4rem; font-size: 1.22rem; border-radius: var(--doc-deposit-radius-input, var(--doc-list-row-radius, 16px)); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-input, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form :is(.form-control, .form-select) { border-radius: var(--doc-deposit-radius-input, var(--doc-list-row-radius, 16px)) !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form .input-group > :is(.form-control, .input-group-text) { border-radius: var(--doc-deposit-radius-input, var(--doc-list-row-radius, 16px)) !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form .input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form .input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__hero { grid-area: amount; width: 100%; margin-bottom: 0; align-items: flex-start; text-align: left; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__hero-input-wrap { width: 100%; max-width: 14rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__hero-input { text-align: left; padding-left: 0.95rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__warning { grid-area: warning; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone { display: flex; flex-direction: column; gap: .75rem; padding-top: 0.15rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-field-label { display: block; margin: 0 0 .45rem; color: rgba(255, 255, 255, .78); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-field-label__muted { color: rgba(255, 255, 255, .48); font-weight: 600; letter-spacing: 0; text-transform: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-input { max-width: 24rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail { width: 100%; max-width: 24rem; margin-inline: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail__summary { display: block; width: fit-content; margin-inline: 0; padding: 0.2rem 0.35rem; list-style: none; cursor: pointer; color: rgba(255, 255, 255, .58); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 0.45rem; transition: color 0.15s ease, background-color 0.15s ease; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail__summary:hover, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail__summary:focus-visible { color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .06); outline: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail__summary::-webkit-details-marker { display: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail[open] .doc-deposit-field--reference { margin-top: 0.45rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-detail[open] .doc-deposit-reference-detail__summary { color: rgba(255, 255, 255, .72); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface .deposit-percent-presets, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form .deposit-percent-presets { background: rgba(16, 16, 24, .22); border: 1px solid rgba(255, 255, 255, .08); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface :is(.input-group, .form-select), :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form :is(.input-group, .form-select), :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid :is(.form-control, .form-select) { min-height: 2.7rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface :is(.form-control, .input-group-text, .form-select), :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form :is(.form-control, .input-group-text, .form-select), :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid :is(.form-control, .form-select) { border-color: rgba(255, 255, 255, .15); background: rgba(12, 12, 18, .42); color: var(--ui-text-primary, #f8fafc); box-shadow: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface .input-group-text, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form .input-group-text { color: rgba(255, 255, 255, .74); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface :is(.form-control, .form-select):focus, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form :is(.form-control, .form-select):focus, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid :is(.form-control, .form-select):focus { border-color: rgba(255, 255, 255, .34); box-shadow: 0 0 0 .18rem rgba(96, 165, 250, .16); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .85rem 1rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-field { min-width: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-field--wide { grid-column: 1 / -1; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid .form-label, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-option .form-check-label { color: rgba(255, 255, 255, .84); font-size: .85rem; font-weight: 600; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid .form-control::placeholder { color: rgba(255, 255, 255, .44); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-option { padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .12); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-option small { display: block; max-width: 42rem; margin-top: .28rem; color: rgba(255, 255, 255, .58) !important; line-height: 1.35; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, .08); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer__summary { display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: rgba(255, 255, 255, .68); font-size: 0.84rem; line-height: 1.25; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer__amount { color: rgba(255, 255, 255, .92); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer__sep { opacity: 0.45; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer__payment { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer__icon { font-size: 0.95rem; opacity: 0.78; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-bottom-row, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer { flex-wrap: wrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .42rem; margin-top: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn { min-height: 2.2rem; min-width: 10.5rem; padding: .42rem 1.1rem; font-size: .86rem; font-weight: 650; letter-spacing: .01em; border-radius: var(--doc-deposit-radius-pill, 999px); transition: var(--ui-transition-lift-shadow, transform 0.18s ease, box-shadow 0.18s ease); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn:hover, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn:hover { transform: var(--ui-motion-lift-sm, translateY(-1px)); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn.document-form-actions__primary, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn.document-form-actions__primary { color: #eff6ff; background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%); border: 1px solid color-mix(in srgb, #3b82f6 60%, #ffffff 40%); box-shadow: 0 8px 18px color-mix(in srgb, #2563eb 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn.document-form-actions__primary:hover, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn.document-form-actions__primary:hover, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn.document-form-actions__primary:focus-visible, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn.document-form-actions__primary:focus-visible { color: #ffffff; background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%); border-color: color-mix(in srgb, #60a5fa 42%, #ffffff 58%); box-shadow: 0 6px 14px color-mix(in srgb, #2563eb 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn.document-form-actions__primary:disabled, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn.document-form-actions__primary:disabled, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-submit-btn.document-form-actions__primary[aria-disabled="true"], :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) #depositSubmitBtn.document-form-actions__primary[aria-disabled="true"] { color: rgba(239, 246, 255, 0.55); background: linear-gradient(145deg, rgba(96, 165, 250, 0.42) 0%, rgba(37, 99, 235, 0.42) 100%); box-shadow: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit { display: flex; flex-wrap: wrap; gap: .42rem; grid-template-columns: none !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: .42rem; width: auto; min-height: 2.35rem; height: auto; padding: .42rem .82rem; border-radius: var(--doc-deposit-radius-pill, 999px); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); box-shadow: none; text-align: left; transform: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card:hover { transform: none; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card.is-selected { color: var(--doc-deposit-preset-active-color, #0f172a); background: var(--doc-deposit-preset-active-bg, #ffffff); border-color: var(--doc-deposit-preset-active-border, #ffffff); box-shadow: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card.is-selected:hover, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card.is-selected:focus-visible { color: var(--doc-deposit-preset-active-color, #0f172a); background: var(--doc-deposit-preset-active-bg, #ffffff); border-color: var(--doc-deposit-preset-active-border, #ffffff); box-shadow: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card.is-selected .aura-payment-mode__icon, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card.is-selected .aura-payment-mode__label { color: inherit; opacity: 1; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__icon { font-size: .9rem; opacity: .92; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__label { font-size: .8rem; font-weight: 650; line-height: 1; white-space: nowrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__secondary { display: none; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed rgba(255, 255, 255, .1); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__secondary.is-open { display: block; } @media (max-width: 767.98px) { :is(.doc-page--quote) #doc-form ~ #deposits.doc-deposit-card, :is(.doc-page--invoice) #doc-form ~ .doc-form-document-stack--tail { margin-top: var(--doc-form-block-gap, 1rem); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order):not(:has(#doc-form)) .doc-deposit-card { --doc-deposit-radius: 14px; --doc-deposit-radius-input: 12px; padding: 0.75rem !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-header { padding-bottom: 0.55rem; margin-bottom: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card:not(.doc-form-section) .doc-deposit-body { gap: 0.65rem; padding-top: 0.5rem !important; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head { gap: 0.55rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title { font-size: 0.95rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress { margin-top: 0.55rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card .deposit-document-form fieldset { gap: 0.65rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__row { flex-direction: column; align-items: stretch; gap: 0.45rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__balance { align-items: flex-start; text-align: left; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone { grid-template-columns: 1fr; grid-template-areas: "presets" "amount" "warning"; gap: 0.55rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__hero { gap: 0.3rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-acompte-panel__hero-input { min-height: 2.5rem; padding-right: 2.2rem; font-size: 1.12rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets { display: inline-flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; max-width: 100%; padding: 0.16rem; gap: 0.18rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets .deposit-percent-preset { width: auto; flex: 1 1 calc(25% - 0.18rem); min-width: 3.1rem; min-height: 1.85rem; padding: 0.28rem 0.42rem; font-size: 0.72rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone .deposit-percent-presets .deposit-percent-preset--custom { min-width: 3.4rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone { gap: 0.6rem; padding-top: 0.15rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-field-label { margin-bottom: 0.3rem; font-size: 0.68rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit { gap: 0.32rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__card { min-height: 2.1rem; padding: 0.34rem 0.68rem; gap: 0.34rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--deposit .aura-payment-mode__label { font-size: 0.76rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer { margin-top: 0.7rem; padding-top: 0.65rem; gap: 0.65rem; flex-direction: column; align-items: stretch; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer__summary { justify-content: center; flex-wrap: wrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer .doc-deposit-submit-btn, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-action-footer #depositSubmitBtn { min-height: 2.35rem; padding: 0.45rem 1rem; font-size: 0.86rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__meta, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-state { align-items: stretch; flex-direction: column; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-reference-input { max-width: none; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-card, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-form-document-stack--tail, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-body, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .deposit-acompte-panel, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-amount-zone { max-width: 100%; min-width: 0; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__title, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-progress__meta { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-payment-zone .aura-payment-mode__cards--primary.aura-payment-mode__cards--deposit { flex-wrap: wrap; max-width: 100%; overflow-x: visible; padding-bottom: .15rem; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-head__main { align-items: flex-start; flex-direction: column; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-pill--strong { width: fit-content; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-secondary-grid, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface .deposit-acompte-panel__fields { grid-template-columns: 1fr; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-form-surface .deposit-percent-presets { width: fit-content; max-width: 100%; margin-inline: auto; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-actions, :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-deposit-actions .btn { align-items: stretch; width: 100%; } } .doc-shell { border-radius: 20px; min-height: auto; } /* * Toolbar édition documentaire : `back` et `moreOptions` partagent * la même boîte `--doc-header-action-size` (42px), comme btn-new. * Spécificité volontairement au-dessus de `.back-button img` (52px facture). */ .doc-page .back-button.back-button--inline, .doc-page .aura-more-options__trigger { width: var(--doc-header-action-size, 42px); height: var(--doc-header-action-size, 42px); min-width: var(--doc-header-action-size, 42px); min-height: var(--doc-header-action-size, 42px); max-width: var(--doc-header-action-size, 42px); max-height: var(--doc-header-action-size, 42px); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--doc-header-action-size, 42px); padding: 0; line-height: 0; box-sizing: border-box; } .doc-page .back-button.back-button--inline img, .doc-page .aura-more-options__trigger img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Coque documentaire : `.doc-page` transparent (layout seul), tokens shell → `.doc-card-edge-lock` */ :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--repair-order-index, .doc-page--documents-index, .doc-page--service-desk-index, .doc-page--delivery-note, .doc-page--customers-edit ) { --doc-page-shell-bg: transparent; --doc-page-shell-border: transparent; --doc-page-shell-blur: none; --doc-page-shell-shadow: none; --doc-page-shell-radius: var(--doc-shell-radius, 32px); } .doc-card-edge-lock { overflow-x: clip; } body:is(.ui-material-glass, .ui-material-velvet) .doc-page > .card.doc-card-edge-lock { position: relative; isolation: isolate; border-radius: var(--doc-page-shell-radius, var(--doc-shell-radius, 32px)); background: var(--doc-page-shell-bg) !important; background-image: none !important; border: 1px solid var(--doc-page-shell-border) !important; -webkit-backdrop-filter: var(--doc-page-shell-blur) !important; backdrop-filter: var(--doc-page-shell-blur) !important; box-shadow: var(--doc-page-shell-shadow) !important; } body:is(.ui-material-glass, .ui-material-velvet) .doc-page > .card.doc-card-edge-lock::before, body:is(.ui-material-glass, .ui-material-velvet) .doc-page > .card.doc-card-edge-lock::after { content: none !important; display: none !important; } .doc-card-edge-lock > .row { margin-left: 0; margin-right: 0; --bs-gutter-x: 0; } /* Édition documentaire · edge-lock shell + inner cards dashboard (contrat partagé) */ :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--service-desk, .doc-page--repair-order, .doc-page--delivery-note ):has(#doc-form), .doc-page--customers-edit:has(#customer-edit-form), .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-product-form), .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-add-product-form), .doc-page--invoice.credit-note-edit-page { /* Lab validé : tone-5 · alpha-3 · blur-1 · shadow-4 — blur unique sur coque, inner/lignes sans backdrop-filter */ --doc-edge-lock-padding-inline: clamp(1.6rem, 3.5vw, 2.65rem); --doc-page-shell-bg: linear-gradient(145deg, rgba(40, 42, 48, 0.30), rgba(40, 42, 48, 0.22)); --doc-page-shell-border: rgba(168, 198, 255, 0.14); --doc-page-shell-shadow: 0 18px 36px rgba(4, 6, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); --doc-page-shell-blur: none; --doc-edge-lock-backdrop: blur(22px) saturate(145%); --doc-field-shell-bg: rgba(0, 0, 0, 0.2); --doc-edit-inner-bg: linear-gradient(145deg, rgba(40, 42, 48, 0.58), rgba(40, 42, 48, 0.50)); --doc-edit-inner-border: rgba(168, 198, 255, 0.18); --doc-edit-inner-shadow: 0 6px 14px rgba(4, 6, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); --doc-edit-inner-blur: none; --doc-edit-inner-highlight: none; --doc-edit-inner-highlight-opacity: 0; /* Même teinte que les blocs doc-form-section / doc-surface (plus d'éclaircissement). */ --doc-sales-line-bg: var(--doc-edit-inner-bg); --doc-sales-line-bg-hover: var(--doc-sales-line-bg); --doc-sales-line-border: var(--doc-edit-inner-border); --doc-sales-line-shadow: var(--doc-edit-inner-shadow); } .doc-page--supplier-receipts-index { --doc-field-shell-bg: rgba(0, 0, 0, 0.2); } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order):has(#doc-form) #doc-lines.doc-sales-lines-stack > .doc-line.doc-line-ive.doc-sales-line { position: relative; overflow: hidden; width: 100%; max-width: none; margin-inline: 0 !important; border: 1px solid var(--doc-sales-line-border) !important; background: var(--doc-sales-line-bg) !important; box-shadow: var(--doc-sales-line-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* Même largeur / rayon / teinte que les blocs coque (doc-form-section), sans coque parente */ border-radius: var(--doc-form-card-radius, var(--doc-card-radius, var(--doc-inner-radius, 28px))) !important; } :is( .doc-page--quote, .doc-page--invoice, .doc-page--repair-order, .doc-page--service-desk, .doc-page--delivery-note ):has(#doc-form) > .card.doc-card-edge-lock, .doc-page--customers-edit:has(#customer-edit-form) > .card.doc-card-edge-lock, .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-product-form) > .card.doc-card-edge-lock, .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-add-product-form) > .card.doc-card-edge-lock, .doc-page--client-order:has(#doc-form) .client-order-main-card.doc-card-edge-lock, .doc-page--invoice:is(.credit-note-edit-page, .credit-note-add-page) > .card.doc-card-edge-lock { border-radius: var(--doc-page-shell-radius, var(--doc-shell-radius, 32px)) !important; padding-inline: var(--doc-edge-lock-padding-inline) !important; padding-top: 1.4rem !important; background: var(--doc-page-shell-bg) !important; border-color: var(--doc-page-shell-border) !important; box-shadow: var(--doc-page-shell-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body:is(.ui-material-glass, .ui-material-velvet) :is( .doc-page--quote, .doc-page--invoice, .doc-page--repair-order, .doc-page--service-desk, .doc-page--delivery-note ):has(#doc-form) > .card.doc-card-edge-lock::before, body:is(.ui-material-glass, .ui-material-velvet) .doc-page--client-order:has(#doc-form) .client-order-main-card.doc-card-edge-lock::before, body:is(.ui-material-glass, .ui-material-velvet) .doc-page--invoice:is(.credit-note-edit-page, .credit-note-add-page) > .card.doc-card-edge-lock::before, body:is(.ui-material-glass, .ui-material-velvet) .doc-page--customers-edit:has(#customer-edit-form) > .card.doc-card-edge-lock::before, body:is(.ui-material-glass, .ui-material-velvet) .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-product-form) > .card.doc-card-edge-lock::before, body:is(.ui-material-glass, .ui-material-velvet) .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-add-product-form) > .card.doc-card-edge-lock::before { content: "" !important; display: block !important; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; backdrop-filter: var(--doc-edge-lock-backdrop); -webkit-backdrop-filter: var(--doc-edge-lock-backdrop); } :is( .doc-page--quote, .doc-page--invoice, .doc-page--repair-order, .doc-page--service-desk, .doc-page--delivery-note ):has(#doc-form) > .card.doc-card-edge-lock > *, .doc-page--client-order:has(#doc-form) .client-order-main-card.doc-card-edge-lock > *, .doc-page--invoice:is(.credit-note-edit-page, .credit-note-add-page) > .card.doc-card-edge-lock > *, .doc-page--customers-edit:has(#customer-edit-form) > .card.doc-card-edge-lock > *, .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-product-form) > .card.doc-card-edge-lock > *, .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-add-product-form) > .card.doc-card-edge-lock > * { position: relative; z-index: 1; } :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--service-desk, .doc-page--repair-order, .doc-page--delivery-note ):has(#doc-form) :is( .invoice-context-shell.doc-surface, .invoice-context-shell.quote-edit-header-sapphire.doc-surface, #doc-form .doc-surface, #doc-form .doc-details-shell.doc-surface, #doc-form .sub-card.doc-surface, #doc-form .doc-form-section.doc-surface, #doc-form .ro-employee-workbench, .doc-form-document-stack--tail > .doc-form-section, #deposits > .doc-form-section.doc-surface:not(.doc-deposit-card), .ro-employee-workbench.doc-surface, .related-docs-card.doc-surface, .document-form-actions.doc-surface, .document-attachments-shell:not(.document-attachments-shell--commercial), /* Acomptes standalone seulement — pas #deposits imbriqué dans .client-order-money-panel__deposits */ #doc-form > #deposits.doc-deposit-card, .doc-form-document-stack--tail > #deposits.doc-deposit-card, .doc-form-document-stack--tail .doc-deposit-card, .doc-form-document-stack--tail > .sub-card, .card-deposit, .deposit-form-shell, .invoice-finance-section.doc-surface, #resume_remaining_wrapper.doc-surface, .client-order-main-card__body :is(.card, .doc-surface):not(.client-order-main-card):not(.client-order-money-panel__deposits):not(.client-order-money-panel__deposits *), .card-deposit__body :is(.card, .doc-surface), .card-deposit > .card-body :is(.card, .doc-surface), .co-inner-section, .co-subsection, .doc-form-section.doc-surface, .delivery-note-line ), .doc-page--customers-edit:has(#customer-edit-form) :is( #customer-edit-form .doc-form-section.doc-surface, .doc-form-section.doc-surface ), .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-product-form) :is( #catalog-product-form .doc-form-section.doc-surface, .doc-form-section.doc-surface ), .doc-page--catalog-form.catalog-product-edit--calm:has(#catalog-add-product-form) :is( #catalog-add-product-form .doc-form-section.doc-surface, .doc-form-section.doc-surface ), .doc-page--invoice.credit-note-edit-page .invoice-context-shell.doc-surface { position: relative; overflow: hidden; border: 1px solid var(--doc-edit-inner-border) !important; background: var(--doc-edit-inner-bg) !important; box-shadow: var(--doc-edit-inner-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--service-desk, .doc-page--repair-order, .doc-page--delivery-note ):has(#doc-form) :is( .invoice-context-shell.doc-surface, .invoice-context-shell.quote-edit-header-sapphire.doc-surface, #doc-form .doc-surface, #doc-form .doc-details-shell.doc-surface, #doc-form .sub-card.doc-surface, #doc-form .doc-form-section.doc-surface, #doc-form .ro-employee-workbench, .doc-form-document-stack--tail > .doc-form-section, #deposits > .doc-form-section.doc-surface:not(.doc-deposit-card), .ro-employee-workbench.doc-surface, .related-docs-card.doc-surface, .document-form-actions.doc-surface, .document-attachments-shell:not(.document-attachments-shell--commercial), #doc-form > #deposits.doc-deposit-card, .doc-form-document-stack--tail > #deposits.doc-deposit-card, .doc-form-document-stack--tail .doc-deposit-card, .doc-form-document-stack--tail > .sub-card, .card-deposit, .deposit-form-shell, .invoice-finance-section.doc-surface, #resume_remaining_wrapper.doc-surface, .doc-form-section.doc-surface, .delivery-note-line )::before, .doc-page--invoice.credit-note-edit-page .invoice-context-shell.doc-surface::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: var(--doc-edit-inner-highlight); opacity: var(--doc-edit-inner-highlight-opacity); } :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--service-desk, .doc-page--repair-order, .doc-page--delivery-note ):has(#doc-form) :is( .invoice-context-shell.doc-surface, #doc-form .doc-surface, #doc-form .doc-details-shell.doc-surface, #doc-form .sub-card.doc-surface, #doc-form .doc-form-section.doc-surface, #doc-form .ro-employee-workbench, .doc-form-document-stack--tail > .doc-form-section, #deposits > .doc-form-section.doc-surface:not(.doc-deposit-card), .ro-employee-workbench.doc-surface, .related-docs-card.doc-surface, .document-form-actions.doc-surface, .document-attachments-shell:not(.document-attachments-shell--commercial), #doc-form > #deposits.doc-deposit-card, .doc-form-document-stack--tail > #deposits.doc-deposit-card, .doc-form-document-stack--tail .doc-deposit-card, .doc-form-document-stack--tail > .sub-card, .card-deposit, .deposit-form-shell, .client-order-main-card__body :is(.card, .doc-surface):not(.client-order-main-card):not(.client-order-money-panel__deposits):not(.client-order-money-panel__deposits *), .card-deposit__body :is(.card, .doc-surface), .card-deposit > .card-body :is(.card, .doc-surface), .co-inner-section, .co-subsection, .doc-form-section.doc-surface, .delivery-note-line ) > *, .doc-page--invoice.credit-note-edit-page .invoice-context-shell.doc-surface > * { position: relative; z-index: 1; } /* Essai A — hero plat dans la coque, gap unique, pas de mb-3 Bootstrap */ :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--delivery-note ):has(#doc-form) .invoice-context-shell.doc-surface, .doc-page--invoice.credit-note-edit-page .invoice-context-shell.doc-surface { margin-bottom: var(--doc-form-block-gap, 1rem) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .liquid-glass-chip-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* Shell de page commun pour listes documentaires */ .doc-page { --doc-page-max-width: var(--app-shell-max-width, 70rem); --doc-page-section-gap: 1.25rem; --doc-page-card-padding: clamp(1rem, 2vw, 1.5rem); --doc-page-filter-control-height: 46px; --doc-page-filter-gap: 0.75rem; width: min(100%, var(--doc-page-max-width)); margin-inline: auto; padding-inline: var(--app-shell-padding-inline, clamp(0.5rem, 1.2vw, 1rem)); background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Neutralise Bootstrap .container si empilé par erreur sur une page documentaire */ .doc-page.container { max-width: none; width: min(100%, var(--doc-page-max-width)); padding-left: 0; padding-right: 0; } /* Desktop glass : tokens shell sur `.doc-page` (listes / index), pas l’édition #doc-form */ @media (min-width: 768px) { body.ui-material-glass :is( .doc-page--quote, .doc-page--invoice, .doc-page--client-order, .doc-page--repair-order, .doc-page--repair-order-index, .doc-page--documents-index, .doc-page--service-desk-index ):not(:has(#doc-form)) { --doc-page-shell-bg: var(--aura-glass-shell-surface-bg, color-mix(in srgb, rgba(255, 255, 255, 0.05) 100%, transparent)); --doc-page-shell-border: var(--aura-glass-shell-surface-border, color-mix(in srgb, rgba(255, 255, 255, 0.10) 55%, transparent)); --doc-page-shell-blur: var(--aura-glass-shell-surface-blur, none); --doc-page-shell-shadow: var(--aura-glass-shell-surface-shadow, none); --doc-page-shell-radius: var(--dashboard-shell-radius, 32px); } } @media (min-width: 1200px) { :root { --app-shell-max-width: 68rem; } } /* 13" laptop : document seulement, sidebar inchangée */ @media (min-width: 992px) and (max-width: 1440px) { .doc-page { --doc-page-max-width: 68rem; --doc-page-section-gap: 1.1rem; --doc-page-card-padding: clamp(0.9rem, 1.6vw, 1.25rem); } } .doc-page__header, .doc-page__filters, .doc-page__list { margin-block: var(--doc-page-section-gap); } .doc-page__filters { margin-bottom: calc(var(--doc-page-section-gap) + 0.25rem); } .doc-page__filters .row { --bs-gutter-x: var(--doc-page-filter-gap); --bs-gutter-y: var(--doc-page-filter-gap); } .doc-page__filters .form-control, .doc-page__filters .form-select, .doc-page__filters .btn { min-height: var(--doc-page-filter-control-height); } .doc-page__list > .card, .doc-page__list .doc-shell, .doc-page__filters .card, .doc-page__filters .doc-filter-card { padding: var(--doc-page-card-padding); } /* Contrôle segmenté commun (pills statut) */ .doc-page__segmented-control { --doc-segment-bg: rgba(255, 255, 255, 0.08); --doc-segment-border: rgba(255, 255, 255, 0.16); --doc-segment-chip-bg: transparent; --doc-segment-chip-color: var(--ui-text-primary, #e5e7eb); --doc-segment-active-bg: linear-gradient(135deg, #2563eb, #1d4ed8); --doc-segment-active-color: #ffffff; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; padding: 0.375rem; border-radius: 999px; } .doc-page__segmented-control:not(.doc-segmented-calm) { background: var(--doc-segment-bg); border: 1px solid var(--doc-segment-border); backdrop-filter: blur(10px); } .doc-page__segmented-control--full { width: 100%; justify-content: safe center; } .doc-page__segmented-item { position: relative; } .doc-page__segmented-input { position: absolute; opacity: 0; pointer-events: none; } .doc-page__segmented-chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.25rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; font-size: 0.88rem; font-weight: 600; line-height: 1; color: var(--doc-segment-chip-color); background: var(--doc-segment-chip-bg); transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .doc-page__segmented-chip:hover { color: var(--doc-segment-chip-color); } .doc-page .doc-page__segmented-chip:hover, .doc-page .doc-page__segmented-chip:focus-visible { transform: none; } body.ui-material-glass .doc-page .doc-page__segmented-control:not(.doc-segmented-calm) { --doc-segment-bg: var(--ui-card-surface, rgba(16, 18, 22, 0.68)); --doc-segment-border: var(--ui-card-surface-border, rgba(255, 255, 255, 0.18)); --doc-segment-chip-bg: rgba(255, 255, 255, 0.04); --doc-segment-chip-color: #f8fbff; --doc-segment-active-bg: rgba(255, 255, 255, 0.12); --doc-segment-active-color: #ffffff; box-shadow: var(--ui-card-surface-shadow, 0 8px 18px rgba(16, 24, 40, 0.10)); backdrop-filter: var(--ui-card-surface-blur, blur(18px) saturate(138%)); -webkit-backdrop-filter: var(--ui-card-surface-blur, blur(18px) saturate(138%)); } .doc-page__segmented-chip.is-active, .doc-page__segmented-input:checked + .doc-page__segmented-chip { color: var(--doc-segment-active-color); background: var(--doc-segment-active-bg); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25); } .doc-segmented-calm .doc-page__segmented-chip.is-active, .doc-segmented-calm .doc-page__segmented-input:checked + .doc-page__segmented-chip { color: #ffffff !important; background: rgba(255, 255, 255, 0.28) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important; } .doc-page__segmented-input:focus-visible + .doc-page__segmented-chip, .doc-page__segmented-chip:focus-visible { outline: var(--doc-focus-ring); outline-offset: 2px; } .doc-page__segmented-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.3rem; border-radius: 999px; padding: 0 0.4rem; font-size: 0.72rem; color: inherit; background: color-mix(in srgb, currentColor 20%, transparent); } .doc-page--quote { --doc-segment-active-bg: linear-gradient(135deg, #6c63ff, #5850ec); } .doc-page--client-order { --doc-segment-active-bg: linear-gradient(135deg, #0ea5a4, #0284c7); } .doc-page--invoice { --doc-segment-active-bg: linear-gradient(135deg, #2563eb, #1d4ed8); --doc-surface-bg: var(--doc-card-bg); --doc-surface-border: var(--doc-card-border); --doc-shadow-soft: var(--doc-card-shadow); --doc-radius-lg: var(--ui-card-radius-md, 18px); --doc-spacing-unit: 0.75rem; } .doc-page--invoice .doc-page__header { position: relative; z-index: var(--doc-z-card); } .doc-page--invoice .doc-page__list { position: relative; z-index: var(--doc-z-card-hover); margin: 0; } .doc-page--invoice .doc-shell, .doc-page--invoice .doc-filter-card, .doc-page--invoice .doc-page__list > .card, .doc-page--invoice .doc-kpi-card { border-radius: var(--doc-radius-lg); border: var(--doc-surface-border); background: var(--doc-surface-bg); box-shadow: var(--doc-shadow-soft); transition: var(--ui-transition-lift-shadow, transform 0.18s ease-out, box-shadow 0.18s ease-out); } .doc-page--invoice .doc-filter-card, .doc-page--invoice .doc-page__list > .card { padding: calc(var(--doc-spacing-unit) * 1.25); } .doc-page--invoice .doc-shell, .doc-page--invoice .doc-page__list > .card, .doc-page--invoice .doc-kpi-card { color: var(--ui-text-primary, #e2e8f0); } /* Hors index : anneau focus sur coques. Sur index, le focus recherche dans le filtre remonterait sinon un contour bleu sur toute la card liste / barre filtres. */ .doc-page--invoice:not(.doc-page--invoice-index) :is(.doc-shell, .doc-filter-card, .doc-page__list > .card, .doc-kpi-card):focus-within { outline: var(--doc-focus-ring); outline-offset: 2px; } .doc-page--invoice-index :is(.doc-filter-card, .doc-page__list > .card, #invoicesListCard):focus-within { outline: none; } .doc-page--client-order .co-mini-active:not(.co-status-tile) { outline: 2px solid color-mix(in srgb, #0ea5a4 55%, rgba(255,255,255,0.35)); outline-offset: 1px; transition: none; } .doc-page--client-order .co-status-mini-card:not(.co-status-tile) { cursor: pointer; } .doc-page--client-order .co-status-mini-card:not(.co-status-tile) .doc-kpi-card { transition: none; } .doc-page--client-order-index #clientOrder-result.co-index-result--busy { opacity: 0.72; pointer-events: none; transition: opacity 0.08s ease; } .doc-page--client-order .co-status-mini-card:not(.co-status-tile):focus-visible .doc-kpi-card { outline: var(--doc-focus-ring, 2px solid #0ea5a4); outline-offset: 2px; } body.ui-material-glass .doc-header-contract, body.ui-material-glass .doc-page__list > .card, body.ui-material-glass .doc-filter-card { background: rgba(20, 20, 20, 0.75); border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 9px 20px rgba(16, 24, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24); backdrop-filter: blur(18px) saturate(138%); -webkit-backdrop-filter: blur(18px) saturate(138%); } body.ui-material-glass .doc-header-contract__title { color: #f8fbff; } body.ui-material-glass .doc-page__list > .card { color: #f8fbff; } body.ui-material-velvet .doc-header-contract, body.ui-material-velvet .doc-page__list > .card, body.ui-material-velvet .doc-filter-card { background: linear-gradient(150deg, rgba(31, 32, 35, 0.98), rgba(24, 25, 28, 0.92)); border-color: rgba(205, 178, 148, 0.2); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 243, 227, 0.06); } body.ui-material-velvet .doc-header-contract__title { color: #f6f1e7; } body.ui-material-velvet .doc-page__list > .card { color: #f2efe8; } @media (max-width: 767.98px) { :root { --doc-shell-padding: var(--doc-shell-padding-inline-mobile); --doc-shell-radius: var(--doc-shell-radius-mobile); --doc-inner-radius: var(--doc-shell-radius-mobile); --doc-line-radius: var(--doc-line-radius-mobile); --doc-card-radius: var(--doc-shell-radius-mobile); --doc-card-padding-x: 14px; --doc-card-padding-y: 0.75rem; --doc-card-gap: 12px; --doc-list-row-padding-x: 0.75rem; --doc-list-row-padding-y: 0.62rem; --doc-list-row-gap: 0.55rem; --doc-list-row-radius: 14px; --doc-list-status-badge-radius: 8px; --doc-kpi-icon-size: 40px; --doc-kpi-icon-radius: 10px; --doc-kpi-icon-glyph-size: 22px; } .doc-page { --doc-page-section-gap: 0.75rem; --doc-page-card-padding: 0.85rem; --doc-page-filter-control-height: 44px; --doc-page-filter-gap: 0.5rem; width: 100%; padding-inline: 0.75rem; padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px)); overflow-x: clip; } .doc-page__header, .doc-page__filters, .doc-page__list { margin-block: var(--doc-page-section-gap); } .doc-page__filters { margin-bottom: var(--doc-page-section-gap); } .doc-page__filters .row { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; } .doc-page__filters:has(.doc-page__segmented-control) { position: relative; isolation: isolate; } .doc-page__filters:has(.doc-page__segmented-control)::before, .doc-page__filters:has(.doc-page__segmented-control)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.35rem; pointer-events: none; z-index: 2; opacity: 0.92; } .doc-page__filters:has(.doc-page__segmented-control)::before { display: none; } .doc-page__filters:has(.doc-page__segmented-control)::after { right: 0; background: linear-gradient( 270deg, color-mix(in srgb, var(--doc-page-bg, var(--ui-page-bg, #0f1115)) 92%, transparent), transparent ); } .doc-page__segmented-control { max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-inline: 0.15rem; } .doc-page__segmented-control::-webkit-scrollbar { display: none; } .doc-page__segmented-item { scroll-snap-align: start; } .doc-page__segmented-control--full { justify-content: flex-start; } .doc-page__segmented-chip { min-height: 2rem; padding: 0.42rem 0.72rem; font-size: 0.82rem; white-space: nowrap; } :is(.doc-page--quote, .doc-page--invoice, .doc-page--client-order) .doc-header-contract { border-radius: var(--doc-shell-radius); } } .doc-filter-card { border-radius: var(--ui-card-radius-md, 18px); padding: 0.75rem; } .doc-kpi-card { --doc-kpi-accent: #635BFE; border-radius: var(--ui-card-radius-md, 18px); min-height: 80px; cursor: pointer; border: var(--doc-card-border); background: var(--doc-card-bg); box-shadow: var(--doc-card-shadow); backdrop-filter: var(--doc-card-blur); -webkit-backdrop-filter: var(--doc-card-blur); transition: box-shadow 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out; display: flex; align-items: center; } .doc-kpi-icon { width: var(--doc-kpi-icon-size); height: var(--doc-kpi-icon-size); border-radius: var(--doc-kpi-icon-radius); color: #fff; background: color-mix(in srgb, var(--doc-kpi-accent) 82%, #111827 18%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); display: inline-flex; align-items: center; justify-content: center; } .doc-kpi-icon i { font-size: var(--doc-kpi-icon-glyph-size); } .doc-kpi-card--total { --doc-kpi-accent: #635BFE; } .doc-kpi-card--warning { --doc-kpi-accent: #E4A11B; } .doc-kpi-card--info { --doc-kpi-accent: #0BAEA8; } .doc-kpi-card--success { --doc-kpi-accent: #2FBF67; } .doc-kpi-icon--total, .doc-kpi-icon--warning, .doc-kpi-icon--info, .doc-kpi-icon--success { background: color-mix(in srgb, var(--doc-kpi-accent) 82%, #111827 18%); } /* * Pilules segmentées calmes — grammaire partagée (index devis, topbar apparence, etc.) * Voir docs/design/segmented-calm-chips.md */ .doc-segmented-calm.doc-page__segmented-control { width: fit-content !important; max-width: 100%; margin-inline: auto; padding: 0.28rem !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 999px; background: rgba(0, 0, 0, 0.20) !important; background-color: rgba(0, 0, 0, 0.20) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* document-shell · ui-material pose --doc-segment-bg (gris carte) sur .doc-page__segmented-control. */ body.ui-material-glass .doc-page .doc-segmented-calm.doc-page__segmented-control, body.ui-material-velvet .doc-page .doc-segmented-calm.doc-page__segmented-control { background: rgba(0, 0, 0, 0.20) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; } .doc-segmented-calm.doc-page__segmented-control--full { justify-content: center; } .doc-segmented-calm.doc-page__segmented-control--secondary { justify-content: center; padding: 0.16rem; border-color: rgba(255, 255, 255, 0.10); background: rgba(0, 0, 0, 0.16); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .doc-segmented-calm .doc-page__segmented-item { position: relative; margin: 0; } .doc-segmented-calm .doc-page__segmented-chip { border: 0; background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.88); } .doc-segmented-calm .doc-page__segmented-chip:hover, .doc-segmented-calm .doc-page__segmented-chip:focus-visible { color: #ffffff; } .doc-segmented-calm.doc-page__segmented-control--secondary .doc-page__segmented-chip { min-height: 1.72rem; padding: 0.32rem 0.62rem; font-size: 0.76rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); } .doc-segmented-calm.doc-page__segmented-control--secondary .doc-page__segmented-chip.is-active, .doc-segmented-calm.doc-page__segmented-control--secondary .doc-page__segmented-input:checked + .doc-page__segmented-chip { background: rgba(255, 255, 255, 0.28); color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); } .doc-segmented-calm .doc-page__segmented-chip.is-active, .doc-segmented-calm .doc-page__segmented-input:checked + .doc-page__segmented-chip { border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.28); color: #ffffff !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); } /* Chips