/* ===================================================== STRATO-APP — AURA COMMAND LAYER THEME CSS-only overlay — loads LAST, overrides via specificity No Python/logic/template changes ===================================================== */ /* ═══════════════════════════════════════════════════════════════ PHASE 4 — Glass Unified (calibre macOS Sequoia liquid glass) Tokens orbes bleus identiques light + dark. Anciennes valeurs glass conservees en commentaires pour rollback. ═══════════════════════════════════════════════════════════════ */ :root { /* Phase 4 : 3 orbes bleus fixes, INDEPENDANTS des themes accent ([data-color-theme] dans style.css redefinit --orb-1/2/3 mais pas --glass-orb-1/2/3) */ --glass-orb-1: #4F8FE8; /* bleu medium */ --glass-orb-2: #6BA3F0; /* bleu clair */ --glass-orb-3: #3B82F6; /* bleu vif */ } :root, [data-theme="dark"] { /* -- Fond -- */ /* Phase 4 : --body-bg passe en gradient liquid glass (3 stops bleu nuit) Rollback (pre Phase 4) : --body-bg: #111317; v1 : linear-gradient(135deg, #0E1420 0%, #1A2030 50%, #161E2E 100%); v2 : linear-gradient(135deg, #0A0F1A 0%, #1B2438 50%, #0E1620 100%); v3 (actuel) : effet "nuit bleutee" macOS plus marque, bleu central #1F2D52 ressort davantage. */ /* Le stop bleu central est décalé en 65% (bas-droite sur la diagonale 135deg) et atténué (#16223F au lieu de #1F2D52) pour une lueur plus diffuse et moins prononcée. */ /* Refonte 2026-05-28 : passage du gradient bleu nuit vers un noir plat profond, sur demande utilisateur. Le gradient v3 (ligne historique en commentaire ci-dessus) introduisait une lueur bleue centrale qui rendait le rendu Glass dark moins "premium". Avec un fond noir, les orbes ambiants et le glow accent ressortent franchement et l'effet glass des cards/sidebar est plus lisible. */ --body-bg: #000000; /* v5 NEUTRAL : frost blanc 5%, pas de teinte (cohérent avec --glass-bg). */ --card-bg: rgba(255, 255, 255, 0.05); --card-bg-solid: #1a1d24; --surface-1: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.08); /* -- Bordures glassmorphism — alpha bas pour contour subtil -- */ --card-border: rgba(255, 255, 255, 0.04); --card-border-hover: rgba(255, 255, 255, 0.08); --glow-border: rgba(var(--acc-rgb), 0.15); /* -- Texte -- */ --text-primary: #f0f0f0; /* User : #9ca3af → #ebebeb pour cohérence avec --t2. */ --text-secondary: #ebebeb; --text-tertiary: #ebebeb; /* -- Accents (inherits from style.css --acc system) -- */ --accent-hover: var(--accl); --accent-glow: rgba(var(--acc-rgb), 0.25); --accent-deep: var(--accd); --gradient-primary: linear-gradient(135deg, var(--acc), var(--info, #06B6D4)); --gradient-warm: linear-gradient(135deg, #F59E0B, #EF4444); --gradient-cool: linear-gradient(135deg, #3B82F6, var(--acc)); --gradient-success: linear-gradient(135deg, #10B981, #06B6D4); --gradient-card: linear-gradient(135deg, rgba(var(--acc-rgb), 0.08), rgba(6, 182, 212, 0.05)); /* -- Couleurs semantiques -- */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --info: #06B6D4; /* -- Glassmorphism — v5 NEUTRAL (no blue tint) -- Historique : v1-v3 : alpha 0.55 → 0.35 (transparence progressive) v4 : teinte bleu marine #1F2D52 ("moins noir" sur wallpaper bleu) v5 (actuel) : retrait du tint bleu, frost blanc neutre uniquement. Le user ne veut pas que les cards soient "colorées" (foncé en dark ou clair en light selon le mode). Frost blanc neutre = cards visibles mais sans teinte bleue qui surcharge. */ --glass-bg: rgba(255, 255, 255, 0.03); --glass-bg-strong: rgba(255, 255, 255, 0.05); --glass-bg-soft: rgba(255, 255, 255, 0.02); --glass-blur: blur(30px); --glass-border: 1px solid rgba(255, 255, 255, 0.04); --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.4); --glass-shadow-strong: 0 12px 60px rgba(0, 0, 0, 0.5); /* -- Ombres -- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 6px 64px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 30px rgba(var(--acc-rgb), 0.15); --shadow-glow-hover: 0 0 40px rgba(var(--acc-rgb), 0.25); /* -- Rayons -- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-pill: 100px; /* -- Transitions -- */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* -- Light mode — Phase 4 Glass Unified (gradient bleu pale) -- Ancien (rollback Phase 4) : --body-bg: #EAE6E1; --glass-bg: rgba(240, 237, 234, 0.85); */ [data-theme="light"] { /* Phase 4 light --body-bg : v1 : #F0F4FA -> #E8EFFB -> #DCE6F5 (trop pale) v2 (actuel) : un peu plus sature, contraste bleu plus net */ --body-bg: linear-gradient(135deg, #E8F0FB 0%, #DCE7F8 50%, #C9D9F0 100%); /* v7 NEAR-INVISIBLE : frost blanc 4% pour cohérence avec --glass-bg drastiquement baissé. Cards quasi-transparentes, bordure suffit. */ --card-bg: rgba(255, 255, 255, 0.04); --card-bg-solid: #F3F0ED; --surface-1: rgba(0, 0, 0, 0.02); --surface-2: rgba(0, 0, 0, 0.04); --surface-hover: rgba(0, 0, 0, 0.05); --card-border: rgba(15, 23, 42, 0.05); --card-border-hover: rgba(15, 23, 42, 0.10); --text-primary: #3D3427; --text-secondary: #7A6F60; --text-tertiary: #A89B8A; /* v6 → v7 NEAR-INVISIBLE light : User : "encore trop blanc". On descend au minimum perceptible. 2% / 4% blanc = présence quasi-nulle, les cards existent surtout via leur bordure subtile + ombre. Le wallpaper bleu domine. */ --glass-bg: rgba(255, 255, 255, 0.02); --glass-bg-strong: rgba(255, 255, 255, 0.04); --glass-bg-soft: rgba(255, 255, 255, 0.01); /* Light : bord foncé subtil au lieu d'un blanc 0.6 très visible */ --glass-border: 1px solid rgba(15, 23, 42, 0.06); --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.06); --glass-shadow-strong: 0 12px 60px rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 4px rgba(180, 170, 158, 0.1); --shadow-md: 0 4px 16px rgba(180, 170, 158, 0.12); --shadow-lg: 0 16px 48px rgba(180, 170, 158, 0.15); --bg: #EAE6E1; --bg2: #F0EDEA; --card: #F3F0ED; --card2: #EDEAE6; --inp: #E8E4DF; --elev: #F0EDEA; --bg-primary: #EAE6E1; --bg-secondary: #F0EDEA; --bg-card: #F3F0ED; --bg-card-hover: #EDEAE6; --bg-elevated: #F0EDEA; --bg-sidebar: #F0EDEA; --t1: #3D3427; --t2: #7A6F60; --t3: #A89B8A; --t4: #C8BFB2; --brd: rgba(180, 170, 158, 0.15); --brd2: rgba(180, 170, 158, 0.22); --modal-overlay-bg: rgba(30, 25, 18, 0.25); --tooltip-bg: rgba(61, 52, 39, 0.92); --tooltip-text: #F0EDEA; } /* ===================================================== GLOBAL ===================================================== */ body { /* Phase 4 : --body-bg est maintenant un linear-gradient. Ancien : background-color: var(--body-bg) !important; (rollback Phase 4) */ background: var(--body-bg) !important; background-attachment: fixed; color: var(--text-primary) !important; -webkit-font-smoothing: antialiased; } /* Background mesh gradient subtil — désactivé si wallpaper */ body:not(.has-bg-image)::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 20% 50%, var(--mesh-color-1, rgba(var(--acc-rgb), 0.06)) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 70% 105%, rgba(245, 158, 11, 0.018) 0%, transparent 75%); pointer-events: none; z-index: 0; } [data-theme="light"] body:not(.has-bg-image)::before { background: none !important; } /* App shell background — refonte 2026-05-28 : noir profond uni au lieu du gris bleute #111317. Coherent avec --body-bg modifie ci-dessus. Ne s'applique pas en Rexora (qui override body via design-rexora.css). */ body:not(.has-bg-image):has(.app-container) { background-color: #000000 !important; } body:not(.has-bg-image):has(.app-container)::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: /* Orbe bleue principale — décalée bas-droite, large et diffuse */ radial-gradient(circle 1100px at 75% 95%, rgba(80, 130, 220, 0.10) 0%, rgba(80, 130, 220, 0.05) 35%, transparent 80%), radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.05) 0%, transparent 65%), radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.035) 0%, transparent 65%), /* Noise SVG ultra-léger pour casser le color banding du gradient */ url("data:image/svg+xml;utf8,"); } [data-theme="light"] body:not(.has-bg-image):has(.app-container) { background-color: #EFE9DE !important; } [data-theme="light"] body:not(.has-bg-image):has(.app-container)::after { background: none !important; } /* App container — TRANSPARENT for glassmorphism */ .app-container { background: transparent !important; box-shadow: none !important; position: relative; z-index: 1; } [data-theme="light"] .app-container { background: transparent !important; border: none !important; box-shadow: none !important; } /* ===================================================== SIDEBAR ===================================================== */ .sidebar { background: rgba(13, 15, 20, 0.28) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-right: none !important; } [data-theme="light"] .sidebar { background: rgba(245, 243, 240, 0.32) !important; backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; border-right: none !important; } /* ===================================================== CARDS / KPIs ===================================================== */ [data-theme="dark"] .card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .kpi, [data-theme="dark"] .card-strato, [data-theme="dark"] .chart-card, [data-theme="dark"] .chart-card-new, [data-theme="dark"] .pd-kpi, [data-theme="dark"] .pd-client-infos { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; } /* Phase 4 Glass Unified : .stat-card dark Ancien : background var(--card-bg), blur 12px, border var(--card-border) */ [data-theme="dark"] .stat-card { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; border-radius: var(--radius-lg) !important; transition: all var(--transition-normal) !important; } .card, .kpi-card, .kpi, .card-strato, .chart-card, .chart-card-new, .stat-card, .nf-card { border: 1px solid var(--card-border) !important; border-radius: var(--radius-lg) !important; transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.85s cubic-bezier(0.33, 1, 0.68, 1), background 0.7s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.7s cubic-bezier(0.33, 1, 0.68, 1) !important; } .card:hover, .kpi-card:hover, .kpi:hover, .card-strato:hover, .chart-card:hover, .chart-card-new:hover, .stat-card:hover { border-color: var(--card-border); } /* Light mode cards — Phase 4 Glass Unified Ancien (rollback Phase 4) : background: transparent; blur(0.5px); border rgba(70,60,120,0.12); shadow rgba(70,60,120,0.10) */ html[data-theme="light"] .card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .kpi, html[data-theme="light"] .card-strato, html[data-theme="light"] .chart-card, html[data-theme="light"] .chart-card-new, html[data-theme="light"] .stat-card { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; } /* Sous-sections (pd-*) restent flat à l'intérieur des cards */ html[data-theme="light"] .pd-kpi, html[data-theme="light"] .pd-client-infos, html[data-theme="light"] .pd-section, html[data-theme="light"] .pd-factures-section, html[data-theme="light"] .pd-devis-section, html[data-theme="light"] .pd-timeline-section, html[data-theme="light"] .tl-ev, html[data-theme="light"] .pd-tl-event { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: var(--card-border) !important; box-shadow: none !important; } /* Hover lift géré dans auraos.css — pas d'override transform ici */ /* Light mode — keep subtle borders on main cards */ html[data-theme="light"] .card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .kpi, html[data-theme="light"] .card-strato, html[data-theme="light"] .chart-card, html[data-theme="light"] .chart-card-new, html[data-theme="light"] .stat-card { border: 1px solid rgba(0,0,0,0.10) !important; } /* Inner pd-kpi and pd-client-infos: flat in both modes */ html[data-theme="light"] .pd-kpi, html[data-theme="light"] .pd-client-infos { border: none !important; } /* Remove pd-kpis grid border */ .pd-kpis { border: none !important; } .pd-kpi { border-right: 1px solid rgba(255,255,255,0.06) !important; } .pd-kpi:last-child { border-right: none !important; } html[data-theme="light"] .pd-kpi { border-right: 1px solid rgba(0,0,0,0.06) !important; } /* fl-panel light : Phase 4 Glass Unified Ancien : background: var(--card, #fff) !important; (beige opaque) Phase 4 : pointe sur var(--glass-bg) pour transparence forte (alpha 0.55) */ html[data-theme="light"] .fl-panel { border: var(--glass-border) !important; background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; } /* Remove content-frame border in light mode */ html[data-theme="light"] .content-frame { border: none !important; } /* Remove sidebar right border in light mode */ html[data-theme="light"] .sidebar { border-right: 1px solid rgba(0, 0, 0, 0.06) !important; } /* ===================================================== BOUTONS ===================================================== */ /* -- Bouton Principal (gradient violet->cyan) -- */ /* ── Primary buttons — neumorphic pill ── */ .btn-primary, .btn-save, .btn-strato, .btn-primary-strato, .pd-btn-facture, .btn-facture, .fnp-btn-create, .pm-btn-create, .dm-btn-apply, [class*="btn-accent"] { border: none !important; border-radius: 50px !important; position: relative !important; overflow: hidden !important; } /* Dark — gradient + deep shadows */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-save, [data-theme="dark"] .btn-strato, [data-theme="dark"] .btn-primary-strato, [data-theme="dark"] .pd-btn-facture, [data-theme="dark"] .fnp-btn-create, [data-theme="dark"] .pm-btn-create, [data-theme="dark"] .dm-btn-apply { background: #1e1e2a !important; color: #e0ddd8 !important; border: 1px solid rgba(255,255,255,0.04) !important; box-shadow: 4px 4px 8px rgba(0,0,0,0.5), -2px -2px 6px rgba(255,255,255,0.03), inset 0 1px 1px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.3) !important; } /* Light — beige cream + soft shadows */ [data-theme="light"] .btn-primary, [data-theme="light"] .btn-save, [data-theme="light"] .btn-strato, [data-theme="light"] .btn-primary-strato, [data-theme="light"] .pd-btn-facture, [data-theme="light"] .fnp-btn-create, [data-theme="light"] .pm-btn-create, [data-theme="light"] .dm-btn-apply { background: #F3F0ED !important; color: #3D3427 !important; box-shadow: 4px 4px 8px rgba(180,170,158,0.2), -3px -3px 6px rgba(255,255,255,0.7), inset 0 1px 1px rgba(255,255,255,0.5) !important; } .btn-primary:hover, .btn-save:hover, .btn-strato:hover, .btn-primary-strato:hover, .pd-btn-facture:hover, .fnp-btn-create:hover, .pm-btn-create:hover, .dm-btn-apply:hover { transform: none !important; filter: brightness(1.05) !important; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-strato:hover, [data-theme="dark"] .btn-primary-strato:hover { box-shadow: 2px 2px 4px rgba(0,0,0,0.4), -1px -1px 3px rgba(255,255,255,0.04), inset 0 1px 2px rgba(255,255,255,0.06), inset 0 -1px 3px rgba(0,0,0,0.4) !important; } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-strato:hover, [data-theme="light"] .btn-primary-strato:hover { box-shadow: 2px 2px 5px rgba(166,152,132,0.3), -2px -2px 4px rgba(255,255,255,0.9), inset 0 1px 1px rgba(255,255,255,0.7) !important; } .btn-primary:active, .btn-save:active, .btn-strato:active, .pd-btn-facture:active, .fnp-btn-create:active { transform: none !important; filter: brightness(0.95) !important; } [data-theme="dark"] .btn-primary:active, [data-theme="dark"] .btn-strato:active { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.6), inset -2px -2px 4px rgba(255,255,255,0.03) !important; } [data-theme="light"] .btn-primary:active, [data-theme="light"] .btn-strato:active { box-shadow: inset 2px 2px 5px rgba(166,152,132,0.3), inset -2px -2px 4px rgba(255,255,255,0.5) !important; } /* Shimmer au hover */ .btn-primary::before, .btn-save::before, .btn-strato::before, .btn-primary-strato::before, .pd-btn-facture::before, .fnp-btn-create::before, .pm-btn-create::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; transition: left 0.6s ease !important; } .btn-primary:hover::before, .btn-save:hover::before, .btn-strato:hover::before, .btn-primary-strato:hover::before, .pd-btn-facture:hover::before, .fnp-btn-create:hover::before, .pm-btn-create:hover::before { left: 100% !important; } /* -- Bouton Secondary (glass outline) -- */ /* ── Secondary buttons — neumorphic pill ── */ .btn-secondary, .btn-outline, .btn-secondary-strato, .btn-action, .btn-pdf, .btn-excel, .btn-envoyer, .btn-icon-text { border-radius: 50px !important; color: var(--text-primary) !important; } /* ──── Phase 4 Glass Unified : neumorphic boutons DESACTIVES (badge-statut pattern) Reactivable en virant les commentaires si rendu trop "plat". Ancien : pill 50px + multi-layer neumorphic shadows + bg solides. Nouveau : pattern .status-badge-btn (radius 3px + alpha 0.10 + couleur pleine) Definitions principales dans redesign.css.btn-* + style.css.btn-*-strato */ /* [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline, [data-theme="dark"] .btn-secondary-strato, [data-theme="dark"] .btn-action, [data-theme="dark"] .btn-pdf, [data-theme="dark"] .btn-excel, [data-theme="dark"] .btn-envoyer { background: #1e1e2a !important; border: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 4px 4px 8px rgba(0,0,0,0.5), -2px -2px 6px rgba(255,255,255,0.03), inset 0 1px 1px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.3) !important; } [data-theme="light"] .btn-secondary, [data-theme="light"] .btn-outline, [data-theme="light"] .btn-secondary-strato, [data-theme="light"] .btn-action, [data-theme="light"] .btn-pdf, [data-theme="light"] .btn-excel, [data-theme="light"] .btn-envoyer { background: var(--card) !important; border: none !important; box-shadow: 4px 4px 8px rgba(166,152,132,0.25), -3px -3px 6px rgba(255,255,255,0.8), inset 0 1px 1px rgba(255,255,255,0.6) !important; } .btn-secondary:hover, .btn-outline:hover, .btn-secondary-strato:hover, .btn-action:hover, .btn-pdf:hover, .btn-excel:hover, .btn-envoyer:hover { transform: none !important; } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-secondary-strato:hover { box-shadow: 2px 2px 4px rgba(0,0,0,0.4), -1px -1px 3px rgba(255,255,255,0.04), inset 0 1px 2px rgba(255,255,255,0.06), inset 0 -1px 3px rgba(0,0,0,0.4) !important; border-color: var(--accent) !important; color: var(--accent) !important; } [data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-secondary-strato:hover { box-shadow: 2px 2px 5px rgba(166,152,132,0.3), -2px -2px 4px rgba(255,255,255,0.9), inset 0 1px 1px rgba(255,255,255,0.7) !important; color: var(--accent) !important; } .btn-danger, .btn-delete, .btn-supprimer { background: linear-gradient(135deg, #EF4444, #B91C1C) !important; border: none !important; border-radius: 50px !important; color: #fff !important; } [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-delete, [data-theme="dark"] .btn-supprimer { box-shadow: 4px 4px 8px rgba(0,0,0,0.5), -2px -2px 6px rgba(255,255,255,0.03), inset 0 1px 1px rgba(255,255,255,0.15) !important; } [data-theme="light"] .btn-danger, [data-theme="light"] .btn-delete, [data-theme="light"] .btn-supprimer { box-shadow: 4px 4px 8px rgba(166,152,132,0.25), -3px -3px 6px rgba(255,255,255,0.8), inset 0 1px 1px rgba(255,255,255,0.2) !important; } .btn-danger:hover, .btn-delete:hover, .btn-supprimer:hover { transform: none !important; filter: brightness(1.05) !important; } .btn-success, .btn-facturer-suite { background: linear-gradient(135deg, #10B981, #06B6D4) !important; border: none !important; border-radius: 50px !important; color: #fff !important; box-shadow: 4px 4px 8px rgba(0,0,0,0.3), -2px -2px 6px rgba(255,255,255,0.03), inset 0 1px 1px rgba(255,255,255,0.15) !important; } .btn-success:hover, .btn-facturer-suite:hover { transform: none !important; filter: brightness(1.05) !important; } */ /* ──── Phase 4 : autres boutons (.btn-action, .btn-pdf, .btn-excel, .btn-envoyer, .btn-success, .btn-facturer-suite, .btn-supprimer) sur pattern badge-statut */ .btn-action, .btn-pdf, .btn-excel, .btn-envoyer { background: rgba(148, 163, 184, 0.10) !important; color: var(--t2) !important; border: 1px solid rgba(148, 163, 184, 0.20) !important; border-radius: 3px !important; box-shadow: none !important; } .btn-action:hover, .btn-pdf:hover, .btn-excel:hover, .btn-envoyer:hover { background: rgba(148, 163, 184, 0.15) !important; border-color: rgba(148, 163, 184, 0.30) !important; color: var(--t1) !important; filter: brightness(0.95); } .btn-supprimer { background: rgba(239, 68, 68, 0.10) !important; color: #EF4444 !important; border: 1px solid rgba(239, 68, 68, 0.20) !important; border-radius: 3px !important; box-shadow: none !important; } .btn-supprimer:hover { background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.30) !important; filter: brightness(0.95); } .btn-success, .btn-facturer-suite { background: rgba(16, 185, 129, 0.10) !important; color: #10B981 !important; border: 1px solid rgba(16, 185, 129, 0.20) !important; border-radius: 3px !important; box-shadow: none !important; } .btn-success:hover, .btn-facturer-suite:hover { background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.30) !important; filter: brightness(0.95); } /* Phase 4 Glass Unified : pattern badge-statut applique aux boutons specifiques. Anciens (rollback Phase 4) : neumorphic pills avec gradients + multi-shadows. Nouveau : alpha 0.15-0.18 + couleur pleine + radius 3px + border 1px. */ /* Warning / Edit / Modifier — orange */ .btn-warning, .btn-edit, .btn-modifier { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.30) !important; border-radius: 3px !important; color: #F59E0B !important; box-shadow: none !important; } .btn-warning:hover, .btn-edit:hover, .btn-modifier:hover { background: rgba(245, 158, 11, 0.22) !important; border-color: rgba(245, 158, 11, 0.40) !important; filter: brightness(0.95); } /* Convertir — bleu accent */ .btn-convertir { background: rgba(var(--acc-rgb), 0.18) !important; border: 1px solid rgba(var(--acc-rgb), 0.30) !important; border-radius: 3px !important; color: var(--acc) !important; box-shadow: none !important; } .btn-convertir:hover { background: rgba(var(--acc-rgb), 0.25) !important; border-color: rgba(var(--acc-rgb), 0.40) !important; filter: brightness(0.95); } /* Annuler — gris neutre */ .btn-cancel, .fnp-btn-cancel, .dm-btn-cancel, .pm-btn-cancel { background: rgba(148, 163, 184, 0.10) !important; border: 1px solid rgba(148, 163, 184, 0.20) !important; border-radius: 3px !important; color: var(--t2) !important; } .btn-cancel:hover, .fnp-btn-cancel:hover, .dm-btn-cancel:hover { background: rgba(148, 163, 184, 0.15) !important; border-color: rgba(148, 163, 184, 0.30) !important; color: var(--t1) !important; filter: brightness(0.95); } /* Modal footer Annuler — rouge transparent (pattern danger) */ .modal-footer .btn-secondary-strato { background: rgba(248, 113, 113, 0.15) !important; color: #F87171 !important; border: 1px solid rgba(248, 113, 113, 0.30) !important; border-radius: 3px !important; box-shadow: none !important; } .modal-footer .btn-secondary-strato:hover { background: rgba(248, 113, 113, 0.22) !important; border-color: rgba(248, 113, 113, 0.40) !important; filter: brightness(0.95); box-shadow: none !important; } /* -- Bouton icone rond -- */ .btn-icon, .hd-ic { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid var(--card-border) !important; background: var(--glass-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: var(--text-secondary) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .btn-icon:hover, .hd-ic:hover { border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 15px var(--accent-glow) !important; transform: scale(1.05) !important; } [data-theme="light"] .btn-icon, [data-theme="light"] .hd-ic { background: rgba(255,255,255,0.8) !important; } /* -- Effet press global -- */ button:active, .btn:active { transform: scale(0.97) !important; filter: brightness(0.9) !important; } /* ===================================================== INPUTS ===================================================== */ .form-control, .input-field, .input-strato, .fnp-input, .pm-input { background: var(--surface-1) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius-md) !important; color: var(--text-primary) !important; transition: all var(--transition-fast) !important; } .form-control:focus, .input-field:focus, .input-strato:focus, .fnp-input:focus, .pm-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(var(--acc-rgb), 0.1) !important; outline: none !important; } [data-theme="light"] .form-control, [data-theme="light"] .input-field, [data-theme="light"] .input-strato { background: rgba(255, 255, 255, 0.6) !important; } /* ===================================================== MODALS -- Glass + glow ===================================================== */ .htmx-modal-overlay, .modal-overlay, .global-modal-overlay, .design-overlay, .project-modal-overlay { background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } [data-theme="light"] .htmx-modal-overlay, [data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.15) !important; } .htmx-modal-panel, .modal, .design-modal, .project-modal, .modal-content { background: var(--glass-bg) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg), 0 0 60px rgba(var(--acc-rgb), 0.08) !important; position: relative !important; overflow: hidden !important; } /* Modal top glow line */ .htmx-modal-panel::before, .modal::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent 10%, rgba(var(--acc-rgb), 0.4) 50%, transparent 90%) !important; z-index: 10 !important; } [data-theme="light"] .htmx-modal-panel, [data-theme="light"] .modal { background: rgba(255, 255, 255, 0.9) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="light"] .htmx-modal-panel::before, [data-theme="light"] .modal::before { background: linear-gradient(90deg, transparent 10%, rgba(var(--acc-rgb), 0.2) 50%, transparent 90%) !important; } /* ===================================================== TABLEAUX ===================================================== */ .proj-list-row:hover, .pd-facture-row:hover, .pd-devis-row:hover, tr:hover td { background: var(--surface-hover) !important; } /* Ligne selectionnee -- glow accent */ .row-sel, .row-active, .pd-facture-row.active, .pd-devis-row.active { background: rgba(var(--acc-rgb), 0.06) !important; } /* ===================================================== SEGMENTED CONTROLS / TABS ===================================================== */ .segmented-control, .filter-tabs { background: var(--surface-1) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid var(--card-border) !important; } [data-theme="light"] .segmented-control, [data-theme="light"] .filter-tabs { background: rgba(255, 255, 255, 0.5) !important; } /* Pattern unifié "sélectionné" : transparent accent + texte accent + bordure fine accent. Couvre seg-tab, filter-tab, dm-tab. Note : pd-doc-tab traité plus bas car son wrapper .pd-doc-tabs a overflow:hidden + border-radius (la bordure du bouton serait clippée). */ .seg-tab.active, .filter-tab.active, .dm-tab.active { background: rgba(var(--acc-rgb), 0.12) !important; color: var(--acc) !important; border: 1px solid rgba(var(--acc-rgb), 0.32) !important; box-shadow: none !important; } /* pd-doc-tab : radius par position pour matcher le wrapper rond. - Premier onglet : coins gauche arrondis (alignés sur wrapper), coins droits carrés (joint clean avec le suivant) - Dernier onglet : inverse - Onglet seul : tous les coins arrondis L'inset shadow du bouton actif suit ces radius → bordure parfaitement alignée sur la courbe du wrapper, plus de "coins coupés". */ .pd-doc-tabs > .pd-doc-tab { border-radius: 0 !important; } .pd-doc-tabs > .pd-doc-tab:first-child { border-radius: 14px 0 0 14px !important; } .pd-doc-tabs > .pd-doc-tab:last-child { border-radius: 0 14px 14px 0 !important; } .pd-doc-tabs > .pd-doc-tab:only-child { border-radius: 14px !important; } /* Active : bordure inset qui respecte automatiquement le radius par position → trait fin accent sur les courbes externes du wrapper, square sur les bords internes (raccord propre avec l'onglet voisin). */ .pd-doc-tab.active { background: rgba(var(--acc-rgb), 0.12) !important; color: var(--acc) !important; border: none !important; box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.32) !important; } /* ===================================================== STATUS BADGES -- glow ===================================================== */ .status-en-cours { box-shadow: 0 0 14px var(--accent-glow) !important; } .status-termine, .status-payee { box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important; } .status-impayee, .status-retard { box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important; } .status-brouillon { box-shadow: 0 0 14px rgba(var(--acc-rgb), 0.3) !important; } /* ===================================================== TOPBAR -- frosted ===================================================== */ .topbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; border-bottom: none !important; } .topbar.scrolled { background: rgba(26,29,36,0.50) !important; backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(1.2) !important; } [data-theme="light"] .topbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; } [data-theme="light"] .topbar.scrolled { background: rgba(245,243,240,0.50) !important; backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(1.2) !important; } .topbar-icon-btn:hover { background: transparent !important; box-shadow: none !important; } .topbar-right .user-badge { /* Fond + bordure supprimés à la demande utilisateur — juste avatar + nom. */ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; } .topbar-right .user-badge:hover { border-color: transparent !important; } /* ===================================================== PROGRESS BARS ===================================================== */ .pd-avancement-fill, .kp-bf, .pm-progress-fill { background: var(--gradient-primary) !important; } /* ===================================================== TIMELINE ===================================================== */ .pd-tl-event, .tl-ev { background: var(--glass-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius-xl) !important; transition: all var(--transition-normal) !important; } .pd-tl-event:hover, .tl-ev:hover { border-color: var(--card-border-hover) !important; box-shadow: var(--shadow-glow) !important; transform: translateY(-3px) !important; } .pd-tl-day-num.today { border-color: var(--accent) !important; box-shadow: 0 0 12px var(--accent-glow) !important; } /* ===================================================== DOSSIERS -- hover slide ===================================================== */ .projet-folder, .dossier-item { transition: all var(--transition-fast) !important; border-radius: 0 !important; } .projet-folder:hover, .dossier-item:hover { background: var(--surface-hover) !important; transform: translateX(4px) !important; } .projet-folder.active, .dossier-item.active { background: rgba(var(--acc-rgb), 0.08) !important; border-left: 3px solid var(--acc) !important; border-radius: 0 !important; } /* ===================================================== DROPDOWN MENUS -- glass ===================================================== */ .dropdown-menu, .context-menu { background: rgba(14, 16, 24, 0.92) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg), var(--shadow-glow) !important; } [data-theme="light"] .dropdown-menu, [data-theme="light"] .context-menu { background: rgba(255, 255, 255, 0.92) !important; box-shadow: var(--shadow-lg) !important; } /* header-dropdown : paramètres liquid glass alignés sur theme-popover (dans style.css) */ .header-dropdown { background: rgba(10, 10, 20, 0.04) !important; backdrop-filter: blur(5px) saturate(180%) !important; -webkit-backdrop-filter: blur(5px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 28px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; } [data-theme="light"] .header-dropdown { background: rgba(245, 243, 240, 0.05) !important; border: 1px solid rgba(70,60,120,0.12) !important; box-shadow: 0 8px 32px rgba(70,60,120,0.12) !important; } /* ===================================================== SCROLLBAR ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--acc-rgb), 0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--acc-rgb), 0.4); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } /* ===================================================== ANIMATIONS ===================================================== */ /* Fade in up */ @keyframes auraFadeInUp { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Content entry — disabled to allow backdrop-filter in dropdowns */ /* Stagger KPIs */ .kpi-g .kpi:nth-child(1), .kpi-g .kpi-card:nth-child(1) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.05s; } .kpi-g .kpi:nth-child(2), .kpi-g .kpi-card:nth-child(2) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.1s; } .kpi-g .kpi:nth-child(3), .kpi-g .kpi-card:nth-child(3) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.15s; } .kpi-g .kpi:nth-child(4), .kpi-g .kpi-card:nth-child(4) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.2s; } .kpi-g .kpi:nth-child(5), .kpi-g .kpi-card:nth-child(5) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.25s; } /* Panel detail slide in */ @keyframes auraSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .panel-detail { animation: auraSlideInRight 0.3s var(--transition-normal) both !important; } /* detail-sidebar a sa propre animation via .detail-sidebar.open */ /* KPI values — normal text color, NO gradient (amounts must not change with accent) */ .kpi-value, .kpi-val, .pd-kpi-val, .stat-value { -webkit-text-fill-color: currentColor !important; background: none !important; color: var(--t1) !important; } /* Colored amounts keep their own color (green, red, orange from inline styles) */ .kpi-val[style*="color"], .pd-kpi-val[style*="color"], .kpi-trend, .kpi-sub { -webkit-text-fill-color: currentColor !important; background: none !important; } /* Page title gradient */ .page-title, .welcome-title { background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-hover) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-theme="light"] .page-title, [data-theme="light"] .welcome-title { background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-deep) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ===================================================== SELECTION ===================================================== */ ::selection { background: rgba(var(--acc-rgb), 0.3); color: #fff; } /* ===================================================== SIDEBAR NAV -- active state (dark translucent) Le style détaillé est défini plus bas dans le fichier ===================================================== */ /* Sidebar divider -- gradient fade */ .sidebar-divider { border-top: none !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--card-border-hover), transparent) !important; } /* ===================================================== TOAST / FLASH -- glass ===================================================== */ .toast, .flash-message { backdrop-filter: blur(16px) saturate(150%) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius-lg) !important; } /* ===================================================== ACCENT PICKER (topbar) ===================================================== */ .accent-picker-wrapper { position: relative; display: inline-flex; align-items: center; } .accent-picker { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--card-border); cursor: pointer; padding: 0; background: transparent; transition: all var(--transition-fast); } .accent-picker:hover { border-color: var(--text-secondary); transform: scale(1.1); } .accent-presets { display: flex; gap: 4px; align-items: center; } .accent-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); padding: 0; } .accent-dot:hover { transform: scale(1.3); border-color: rgba(255,255,255,0.3); } /* ===================================================== ICON ANIMATIONS (hover micro-interactions) ===================================================== */ /* Base: all icons are smoothly transitioned */ .hgi-stroke, .material-symbols-outlined { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, filter 0.2s ease !important; display: inline-block !important; } /* Sidebar icons — bounce on hover */ .sidebar-item:hover .hgi-stroke, .sidebar-item:hover .material-symbols-outlined { transform: scale(1.15) !important; filter: drop-shadow(0 0 4px var(--accent-glow)) !important; } /* Nav group header icons — rotate on toggle */ .nav-group-header:hover > .hgi-stroke:first-child, .nav-group-header:hover > .material-symbols-outlined:first-child { transform: scale(1.1) rotate(-8deg) !important; } /* Topbar icons — lift + glow */ .topbar-icon-btn:hover .hgi-stroke, .topbar-icon-btn:hover .material-symbols-outlined { transform: scale(1.12) translateY(-1px) !important; filter: drop-shadow(0 0 6px var(--accent-glow)) !important; } /* Delete icons — shake on hover */ @keyframes iconShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } } .btn-danger:hover .hgi-stroke, .btn-danger:hover .material-symbols-outlined, .btn-delete:hover .hgi-stroke, .btn-delete:hover .material-symbols-outlined, .btn-danger-strato:hover .hgi-stroke, .btn-danger-strato:hover .material-symbols-outlined, .cht-btn-danger:hover .hgi-stroke, .cht-btn-danger:hover .material-symbols-outlined, .row-action-btn.delete:hover .hgi-stroke, .task-action-btn:hover .hgi-stroke { animation: iconShake 0.4s ease !important; color: #FCA5A5 !important; } /* Plus/add icons — rotate on hover */ .hgi-plus-sign { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } *:hover > .hgi-plus-sign, *:hover > * > .hgi-plus-sign { transform: rotate(90deg) scale(1.1) !important; } /* Settings/gear icon — spin on hover */ .hgi-paint-board, .hgi-settings-02, .hgi-configuration-01 { transition: transform 0.4s ease !important; } *:hover > .hgi-paint-board, *:hover > .hgi-settings-02, *:hover > .hgi-configuration-01 { transform: rotate(60deg) !important; } /* Arrow/chevron icons — slide */ .hd-item-arrow, .hgi-arrow-right-01 { transition: transform 0.2s ease !important; } *:hover > .hd-item-arrow { transform: translateX(3px) !important; } /* Close/cancel icons — rotate on hover */ .hgi-cancel-01 { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } *:hover > .hgi-cancel-01 { transform: rotate(90deg) !important; } /* Folder/document icons — bounce */ .hgi-folder-open, .hgi-file-02, .hgi-folder-01 { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } *:hover > .hgi-folder-open, *:hover > .hgi-file-02, *:hover > .hgi-folder-01 { transform: translateY(-2px) scale(1.08) !important; } /* Calendar icon — pulse */ .hgi-calendar-add-01, .hgi-calendar-01, .hgi-calendar-03 { transition: transform 0.2s ease !important; } *:hover > .hgi-calendar-add-01, *:hover > .hgi-calendar-01, *:hover > .hgi-calendar-03 { transform: scale(1.12) !important; } /* Edit icon — tilt */ .hgi-edit-02, .hgi-pencil-edit-02 { transition: transform 0.2s ease !important; } *:hover > .hgi-edit-02, *:hover > .hgi-pencil-edit-02 { transform: rotate(-12deg) scale(1.08) !important; } /* ===================================================== DETAIL SIDEBAR — Cascade stagger on open ===================================================== */ /* Enhanced slide-in with spring */ @keyframes detailSlideIn { from { opacity: 0; transform: translateX(40px); filter: blur(6px); } 60% { opacity: 1; transform: translateX(-4px); filter: blur(0); } to { opacity: 1; transform: translateX(0); filter: blur(0); } } .detail-sidebar.open { animation: detailSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important; } /* Children cascade inside detail sidebar */ @keyframes detailChildIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .detail-sidebar.open > * { animation: detailChildIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .detail-sidebar.open > *:nth-child(1) { animation-delay: 0.05s !important; } .detail-sidebar.open > *:nth-child(2) { animation-delay: 0.10s !important; } .detail-sidebar.open > *:nth-child(3) { animation-delay: 0.15s !important; } .detail-sidebar.open > *:nth-child(4) { animation-delay: 0.20s !important; } .detail-sidebar.open > *:nth-child(5) { animation-delay: 0.25s !important; } .detail-sidebar.open > *:nth-child(6) { animation-delay: 0.30s !important; } .detail-sidebar.open > *:nth-child(7) { animation-delay: 0.35s !important; } .detail-sidebar.open > *:nth-child(8) { animation-delay: 0.40s !important; } .detail-sidebar.open > *:nth-child(n+9) { animation-delay: 0.45s !important; } /* Facture/devis detail sections cascade */ .pd-section, .pd-kpi, .pd-client-infos, .pd-factures-section, .pd-devis-section, .pd-timeline-section { animation: detailChildIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .pd-section:nth-child(1), .pd-kpi:nth-child(1) { animation-delay: 0.06s !important; } .pd-section:nth-child(2), .pd-kpi:nth-child(2) { animation-delay: 0.12s !important; } .pd-section:nth-child(3), .pd-kpi:nth-child(3) { animation-delay: 0.18s !important; } .pd-section:nth-child(4), .pd-kpi:nth-child(4) { animation-delay: 0.24s !important; } .pd-section:nth-child(5), .pd-kpi:nth-child(5) { animation-delay: 0.30s !important; } /* Table rows stagger inside detail */ .pd-facture-row, .pd-devis-row { animation: detailChildIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .pd-facture-row:nth-child(1), .pd-devis-row:nth-child(1) { animation-delay: 0.08s !important; } .pd-facture-row:nth-child(2), .pd-devis-row:nth-child(2) { animation-delay: 0.13s !important; } .pd-facture-row:nth-child(3), .pd-devis-row:nth-child(3) { animation-delay: 0.18s !important; } .pd-facture-row:nth-child(4), .pd-devis-row:nth-child(4) { animation-delay: 0.23s !important; } .pd-facture-row:nth-child(5), .pd-devis-row:nth-child(5) { animation-delay: 0.28s !important; } .pd-facture-row:nth-child(n+6), .pd-devis-row:nth-child(n+6) { animation-delay: 0.33s !important; } /* ===================================================== UNIFORM DELETE BUTTON — everywhere ===================================================== */ /* All delete/danger variants get the same gradient red style */ .btn-danger, .btn-delete, .btn-supprimer, .btn-danger-strato, .cht-btn-danger, [class*="btn"][class*="danger"], .row-action-btn.delete, #confirm-delete-btn { background: linear-gradient(135deg, #EF4444, #B91C1C) !important; border: none !important; color: #fff !important; border-radius: var(--radius-pill) !important; font-weight: 600 !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255,255,255,0.1) !important; transition: all var(--transition-normal) !important; position: relative !important; overflow: hidden !important; } .btn-danger:hover, .btn-delete:hover, .btn-supprimer:hover, .btn-danger-strato:hover, .cht-btn-danger:hover, .row-action-btn.delete:hover, #confirm-delete-btn:hover { box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4), 0 0 30px rgba(185, 28, 28, 0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important; transform: translateY(-2px) !important; filter: brightness(1.1) !important; } .btn-danger:active, .btn-delete:active, .btn-supprimer:active, .btn-danger-strato:active, .cht-btn-danger:active, #confirm-delete-btn:active { transform: translateY(0) scale(0.97) !important; filter: brightness(0.95) !important; } /* Delete button shimmer */ .btn-danger::before, .btn-delete::before, .btn-danger-strato::before, #confirm-delete-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important; transition: left 0.6s ease !important; } .btn-danger:hover::before, .btn-delete:hover::before, .btn-danger-strato:hover::before, #confirm-delete-btn:hover::before { left: 100% !important; } /* Small delete buttons (in table rows, tasks) */ .btn-danger.btn-sm, .btn.btn-sm.btn-danger, .row-action-btn.delete, .task-action-btn[onclick*="delete"] { padding: 6px 14px !important; font-size: 12px !important; min-height: 6px !important; } /* Modal footer delete — same style */ .modal-footer .btn-danger, .modal-footer .btn-delete, .modal-footer #confirm-delete-btn { padding: 10px 6px !important; font-size: 13px !important; } /* ===================================================== DASHBOARD CARDS — subtle border + gradient bg (dashboard only) ===================================================== */ /* Dashboard cards — styling unifié via auraos.css, plus de hover spécifique ici */ /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================== GLASSMORPHISM — transparence + blur unifié ========================================================== */ /* Wrappers transparents */ .app-container, .main { background: transparent !important; } /* Content-frame */ [data-theme="dark"] .content-frame { background: rgba(13,15,20,0.28) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="light"] .content-frame { background: rgba(245,243,240,0.32) !important; backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; border-color: rgba(0,0,0,0.04) !important; } /* Sidebar */ [data-theme="dark"] .sidebar { background: rgba(13,15,20,0.28) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-right: none !important; } [data-theme="light"] .sidebar { background: rgba(245,243,240,0.32) !important; backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; border-right: none !important; } /* Topbar */ [data-theme="dark"] .topbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; } [data-theme="dark"] .topbar.scrolled { background: rgba(26,29,36,0.50) !important; backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(1.2) !important; } [data-theme="light"] .topbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; } [data-theme="light"] .topbar.scrolled { background: rgba(245,243,240,0.50) !important; backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(1.2) !important; } /* Cards */ [data-theme="dark"] .card, [data-theme="dark"] .card-strato, [data-theme="dark"] .kpi-card, [data-theme="dark"] .kpi, /* Phase 4 Glass Unified : alignement sur var(--glass-*) tokens. Ancien (rollback Phase 4) : dark : background rgba(26,29,36,0.15), blur 20px, border rgba(255,255,255,0.06), shadow none light : background transparent, blur 0.5px, border rgba(70,60,120,0.12), shadow 0 8px 32px rgba(70,60,120,0.10) */ [data-theme="dark"] .chart-card, [data-theme="dark"] .chart-card-new, [data-theme="dark"] .fl-panel, [data-theme="dark"] .card-tresorerie, [data-theme="dark"] .card-revenue { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; } [data-theme="light"] .card, [data-theme="light"] .card-strato, [data-theme="light"] .kpi-card, [data-theme="light"] .kpi, [data-theme="light"] .chart-card, [data-theme="light"] .chart-card-new, [data-theme="light"] .fl-panel { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; } /* Tables */ table, thead, tbody, tr, td, th { background: transparent !important; } [data-theme="dark"] tr:hover td { background: rgba(255,255,255,0.03) !important; } [data-theme="light"] tr:hover td { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] thead th { color: #555 !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; } [data-theme="dark"] thead th { color: #f6f6f6 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* Inputs */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background: #14161c !important; color: #f0f0f0 !important; border: 1px solid rgba(255,255,255,0.06) !important; } [data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]), [data-theme="light"] textarea, [data-theme="light"] select { background: rgba(255,255,255,0.5) !important; color: #1a1a2a !important; border: 1px solid rgba(0,0,0,0.12) !important; } [data-theme="dark"] input.hourly-rate-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]), [data-theme="light"] input.hourly-rate-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]) { background: transparent !important; border: .5px solid transparent !important; } /* Modales */ [data-theme="dark"] .modal, [data-theme="dark"] .design-modal { background: rgba(26,29,36,0.50) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.06) !important; } [data-theme="light"] .modal, [data-theme="light"] .design-modal { background: rgba(255,255,255,0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* Couleurs preservees */ canvas, svg { background: transparent !important; } /* ========================================================== FIX JONCTIONS + THEME SIDEBAR/TOPBAR ========================================================== */ /* Sidebar : coins arrondis uniquement à GAUCHE (les bords face à la content-frame restent flat → silhouette continue, plus d'artefact "coupé"). */ .sidebar, #sidebar { border-radius: 6px 0 0 6px !important; } .topbar, header { border-radius: 6px 6px 0 0 !important; } [data-theme="light"] .sidebar a, [data-theme="light"] .sidebar span, [data-theme="light"] .sidebar div, [data-theme="light"] .sidebar p, [data-theme="light"] .sidebar i { color: #3d3427 !important; } [data-theme="light"] .sidebar .sidebar-item.active { color: #000000 !important; border-radius: 8px !important; border: none !important; } [data-theme="light"] .sidebar .sidebar-item.active *:not(.icon-medium) { background: transparent !important; color: #000000 !important; } [data-theme="light"] .sidebar .nav-group-label, [data-theme="light"] .sidebar .nav-group-header i { color: #5A513F !important; } [data-theme="dark"] .sidebar a, [data-theme="dark"] .sidebar span, [data-theme="dark"] .sidebar div, [data-theme="dark"] .sidebar p, [data-theme="dark"] .sidebar i { color: #f6f6f6 !important; } [data-theme="dark"] .sidebar .sidebar-item.active { color: #FFFFFF !important; border-radius: 8px !important; border: none !important; } [data-theme="dark"] .sidebar .sidebar-item.active *:not(.icon-medium) { background: transparent !important; color: #FFFFFF !important; } [data-theme="light"] .topbar *, [data-theme="light"] .topbar a, [data-theme="light"] .topbar span, [data-theme="light"] .topbar button { color: #1a1a2a !important; } [data-theme="dark"] .topbar *, [data-theme="dark"] .topbar a, [data-theme="dark"] .topbar span, [data-theme="dark"] .topbar button { color: #f0f0f0 !important; } [data-theme="light"] .sidebar-logo img { filter: brightness(0.3) !important; } [data-theme="dark"] .sidebar-logo img { filter: brightness(1) !important; } /* ========================================================== LAYOUT JONCTIONS — coins arrondis sur le wrapper, enfants droits ========================================================== */ /* overflow: visible pour laisser les box-shadow des enfants (sidebar, content-frame) déborder proprement aux coins arrondis — sinon le clip du parent coupe les ombres en biseau droit. */ .app-container { border-radius: 6px !important; overflow: visible !important; } /* Sidebar : coins arrondis uniquement à GAUCHE (les bords face à la content-frame restent flat → silhouette continue, plus d'artefact "coupé"). */ .sidebar, #sidebar { border-radius: 6px 0 0 6px !important; } .topbar, header { border-radius: 6px 6px 0 0 !important; } .grain-overlay { border-radius: 6px !important; } /* Content-frame : coins arrondis uniquement à DROITE (miroir de la sidebar). */ .content-frame { border-radius: 0 6px 6px 0 !important; } .sidebar-collapse-btn { border-radius: 0 !important; border: none !important; margin: 0 !important; } /* Breadcrumb pill — transparent */ .bc-pill { background: transparent !important; border-color: transparent !important; } /* ========================================================== SIDEBAR — item actif full-width (IDE-style) ========================================================== */ /* Item actif — texte/icône en NOIR (light) ou BLANC (dark), pas de teinte thème */ [data-theme="dark"] .sidebar-item.active { background: rgba(255, 255, 255, 0.08) !important; border-left: none !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; color: #FFFFFF !important; position: relative; overflow: hidden !important; } [data-theme="dark"] .sidebar-item.active::after { display: none !important; } [data-theme="light"] .sidebar-item.active { background: rgba(0, 0, 0, 0.06) !important; border-left: none !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10) !important; color: #000000 !important; position: relative; overflow: hidden !important; } [data-theme="light"] .sidebar-item.active::after { display: none !important; } /* Icônes non-actives */ .sidebar-item:not(.active) .icon-glass { filter: grayscale(60%) brightness(0.7) !important; transition: filter 0.15s ease; } .sidebar-item:not(.active):hover .icon-glass { filter: grayscale(20%) brightness(0.9) !important; } .sidebar-item.active .icon-glass { filter: brightness(0) invert(1) !important; transition: filter 0.15s ease; } /* Texte actif : noir en light, blanc en dark */ [data-theme="dark"] .sidebar-item.active .sidebar-item-text { color: #FFFFFF !important; font-weight: 600 !important; } [data-theme="light"] .sidebar-item.active .sidebar-item-text { color: #000000 !important; font-weight: 600 !important; } /* Texte non-actif */ [data-theme="dark"] .sidebar-item:not(.active) .sidebar-item-text { color: rgba(255,255,255,0.85) !important; } [data-theme="light"] .sidebar-item:not(.active) .sidebar-item-text { color: rgba(61,52,39,0.6) !important; } [data-theme="dark"] .sidebar-item:not(.active):hover .sidebar-item-text { color: var(--acc) !important; } [data-theme="light"] .sidebar-item:not(.active):hover .sidebar-item-text { color: var(--acc) !important; } .sidebar-item:not(.active):hover .icon-glass { filter: none !important; } /* ── Icones Medium (Material Symbols masked) — follow currentColor ── */ /* Forte specificite pour battre .sidebar .sidebar-item.active * { background: transparent } */ /* Les anciennes règles background:currentColor + mask ont été retirées car .icon-medium rend désormais un glyphe HugeIcons via — pas un span avec mask SVG. background transparent sinon le glyphe est masqué par un carré de couleur. */ html .sidebar .sidebar-item .icon-medium, html .sidebar .nav-group-header .icon-medium, html [data-theme="dark"] .sidebar .sidebar-item.active .icon-medium, html [data-theme="light"] .sidebar .sidebar-item.active .icon-medium { background: transparent !important; transition: color 0.15s ease; -webkit-mask: none !important; mask: none !important; } /* Taille via font-size au lieu de width/height (HugeIcons est une font) */ .nav-group-items .sidebar-item .icon-medium { font-size: 17px !important; width: auto !important; height: auto !important; } .nav-group-header .icon-medium { font-size: 20px !important; width: auto !important; height: auto !important; } /* Dark mode : inactif gris clair, actif dans la COULEUR DU THÈME, hover accent */ [data-theme="dark"] .sidebar-item:not(.active) .icon-medium { color: #f6f6f6 !important; } [data-theme="dark"] .sidebar-item.active .icon-medium, [data-theme="dark"] .sidebar .sidebar-item.active .icon-medium { color: var(--acc) !important; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.6)) drop-shadow(0 0 2px rgba(var(--acc-rgb), 0.4)) !important; } [data-theme="light"] .sidebar-item.active .icon-medium, [data-theme="light"] .sidebar .sidebar-item.active .icon-medium { color: var(--acc) !important; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.55)) drop-shadow(0 0 2px rgba(var(--acc-rgb), 0.35)) !important; } [data-theme="dark"] .sidebar-item:not(.active):hover .icon-medium { color: var(--acc) !important; } [data-theme="dark"] .nav-group-header .icon-medium { color: #b0b6c0 !important; } [data-theme="dark"] .nav-group-header:hover .icon-medium { color: var(--acc) !important; } /* Light mode — inactif grisé, hover accent */ [data-theme="light"] .sidebar-item:not(.active) .icon-medium { color: rgba(61,52,39,0.6) !important; } [data-theme="light"] .sidebar-item:not(.active):hover .icon-medium { color: var(--acc) !important; } [data-theme="light"] .nav-group-header .icon-medium { color: #5A513F !important; } [data-theme="light"] .nav-group-header:hover .icon-medium { color: var(--acc) !important; } /* ========================================================== DARK MODE — Fix lisibilité texte global Tailwind gray classes + labels + muted text ========================================================== */ /* text-gray-500 (#6b7280) → clair en dark */ [data-theme="dark"] .text-gray-500 { color: #c9cdd4 !important; } /* text-gray-600 (#4b5563) → clair en dark */ [data-theme="dark"] .text-gray-600 { color: #c9cdd4 !important; } /* text-gray-400 → clair en dark */ [data-theme="dark"] .text-gray-400 { color: #b0b6c0 !important; } /* text-gray-700/800 → blanc en dark */ [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-800 { color: #e8eaed !important; } /* ──────── LIGHT MODE : lisibilité des text-gray-* (Tailwind) ──────── */ /* text-gray-300/400 par défaut #D1D5DB/#9CA3AF → illisibles sur fond beige (2.04:1) */ [data-theme="light"] .text-gray-300 { color: var(--t3) !important; } [data-theme="light"] .text-gray-400 { color: var(--t3) !important; } /* text-gray-500 #6b7280 → limite (3.85:1) */ [data-theme="light"] .text-gray-500 { color: var(--t2) !important; } /* text-gray-600 #4B5563 → OK (5.3:1) mais on uniformise */ [data-theme="light"] .text-gray-600 { color: var(--t2) !important; } /* text-gray-700/800/900 → OK natif mais harmoniser sur --t1 */ [data-theme="light"] .text-gray-700, [data-theme="light"] .text-gray-800, [data-theme="light"] .text-gray-900 { color: var(--t1) !important; } /* text-white sur fond clair → illisible ; conserver si sur bg accent */ [data-theme="light"] .text-white:not(.bg-\[var\(--acc\)\]):not([class*="bg-strato"]):not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-orange"]):not([class*="bg-indigo"]):not([class*="bg-violet"]):not([class*="bg-purple"]):not([class*="bg-emerald"]) { color: var(--t1) !important; } /* Slate classes (Tailwind) */ [data-theme="light"] .text-slate-300, [data-theme="light"] .text-slate-400 { color: var(--t3) !important; } [data-theme="light"] .text-slate-500, [data-theme="light"] .text-slate-600 { color: var(--t2) !important; } [data-theme="light"] .text-slate-700, [data-theme="light"] .text-slate-800, [data-theme="light"] .text-slate-900 { color: var(--t1) !important; } /* Couleurs sémantiques Tailwind sur fond clair — texte plus foncé pour contraste */ [data-theme="light"] .text-red-500 { color: #B91C1C !important; } [data-theme="light"] .text-red-600 { color: #991B1B !important; } [data-theme="light"] .text-green-500 { color: #047857 !important; } [data-theme="light"] .text-green-600, [data-theme="light"] .text-emerald-500, [data-theme="light"] .text-emerald-600 { color: #065F46 !important; } [data-theme="light"] .text-blue-500 { color: #1D4ED8 !important; } [data-theme="light"] .text-blue-600 { color: #1E40AF !important; } [data-theme="light"] .text-indigo-500 { color: #4338CA !important; } [data-theme="light"] .text-indigo-600 { color: #3730A3 !important; } [data-theme="light"] .text-orange-500, [data-theme="light"] .text-yellow-500 { color: #B45309 !important; } [data-theme="light"] .text-amber-500, [data-theme="light"] .text-amber-600 { color: #B45309 !important; } [data-theme="light"] .text-violet-500, [data-theme="light"] .text-purple-500 { color: #6D28D9 !important; } [data-theme="light"] .text-pink-500 { color: #BE185D !important; } /* Backgrounds blanc/gris clair sur dark → aligner sur les vars */ [data-theme="dark"] .bg-white { background-color: var(--card) !important; color: var(--t1) !important; } [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--bg2) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--card2) !important; } [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { background-color: var(--bg2) !important; } [data-theme="dark"] .hover\:bg-gray-50:hover, [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--card2) !important; } [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200 { border-color: var(--brd) !important; } /* Labels de section, sous-labels */ [data-theme="dark"] .kpi-label, [data-theme="dark"] .kpi-sub, [data-theme="dark"] .section-label, [data-theme="dark"] .section-title, [data-theme="dark"] .detail-label, [data-theme="dark"] .field-label, [data-theme="dark"] .form-label, [data-theme="dark"] label { color: #f6f6f6 !important; } /* Texte courant : adresses, emails, téléphones, descriptions */ [data-theme="dark"] .text-body, [data-theme="dark"] p, [data-theme="dark"] address, [data-theme="dark"] .detail-value, [data-theme="dark"] .field-value { color: #f6f6f6; } /* Small, caption, hints */ [data-theme="dark"] small, [data-theme="dark"] .text-sm, [data-theme="dark"] .hint, [data-theme="dark"] .help-text, [data-theme="dark"] caption { color: #f6f6f6; } /* Table headers */ [data-theme="dark"] th, [data-theme="dark"] thead th { color: #f6f6f6 !important; } /* Table cells — texte lisible */ [data-theme="dark"] td { color: #f6f6f6; } /* ========================================================== DARK MODE — Tailwind color classes (complément) ========================================================== */ /* text-gray-300/900 + text-white : éviter blanc / noir purs */ [data-theme="dark"] .text-gray-300 { color: #f6f6f6 !important; } [data-theme="dark"] .text-gray-900 { color: #f0f0f0 !important; } [data-theme="dark"] .text-white { color: #f0f0f0 !important; } [data-theme="dark"] .text-black { color: #f0f0f0 !important; } [data-theme="dark"] .text-slate-400 { color: #b0b6c0 !important; } [data-theme="dark"] .text-slate-500 { color: #c9cdd4 !important; } [data-theme="dark"] .text-slate-600 { color: #c9cdd4 !important; } [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-900 { color: #e8eaed !important; } /* Backgrounds blancs/gris clairs Tailwind — s'adapter au dark */ [data-theme="dark"] .bg-white { background-color: var(--card) !important; } [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--bg2) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--card2) !important; } [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { background-color: var(--bg2) !important; } [data-theme="dark"] .hover\:bg-gray-50:hover, [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--card2) !important; } /* Bordures Tailwind claires */ [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200 { border-color: var(--brd) !important; } /* ========================================================== LIGHT MODE — Fix lisibilité Tailwind ========================================================== */ /* text-gray-300/400 : trop clairs sur fond beige */ [data-theme="light"] .text-gray-300 { color: var(--t3) !important; } [data-theme="light"] .text-gray-400 { color: var(--t3) !important; } [data-theme="light"] .text-gray-500 { color: var(--t2) !important; } [data-theme="light"] .text-slate-300 { color: var(--t3) !important; } [data-theme="light"] .text-slate-400 { color: var(--t3) !important; } /* text-white : invisible sur fond clair — remapper vers t1 sauf sur bg accent */ [data-theme="light"] .text-white:not(.bg-\[var\(--acc\)\]):not([class*="bg-strato"]):not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-orange"]) { color: var(--t1) !important; } /* ========================================================== LIGHT MODE — Couleurs status lisibles sur fond beige (override quand utilisées comme texte sur fond clair) ========================================================== */ [data-theme="light"] .status-badge-btn.s-draft, [data-theme="light"] .status-badge-btn.s-archived, [data-theme="light"] .status-badge-btn.s-gray { color: #4B5563 !important; } [data-theme="light"] .status-badge-btn.s-info, [data-theme="light"] .status-badge-btn.s-blue { color: #1D4ED8 !important; } [data-theme="light"] .status-badge-btn.s-warning, [data-theme="light"] .status-badge-btn.s-orange { color: #B45309 !important; } [data-theme="light"] .status-badge-btn.s-success, [data-theme="light"] .status-badge-btn.s-green { color: #15803D !important; } /* ========================================================== LIGHT MODE — Sidebar (fix sub-items et icônes) ========================================================== */ [data-theme="light"] .sidebar-item, [data-theme="light"] .nav-group-header { color: var(--t2); } [data-theme="light"] .sidebar-item svg, [data-theme="light"] .sidebar-item .material-symbols-outlined { color: var(--t2); } [data-theme="light"] .sidebar-item:not(.active):hover svg, [data-theme="light"] .sidebar-item:not(.active):hover .material-symbols-outlined { color: var(--acc); } /* ========================================================== WALLPAPER TONE ADAPTATION Quand un wallpaper est actif et que sa luminance est détectée (data-wp-tone="light|dark" sur ), on force les textes à contraster — indépendamment du thème. Les cards étant quasi-transparentes, c'est le wallpaper qui définit le fond effectif sous le texte. ========================================================== */ /* Wallpaper clair → forcer textes sombres dans les cards */ html[data-wp-tone="light"] .kpi-label, html[data-wp-tone="light"] .kpi-val, html[data-wp-tone="light"] .kpi-value, html[data-wp-tone="light"] .kpi-card-value, html[data-wp-tone="light"] .kpi-trend .vs, html[data-wp-tone="light"] .kpi-sub, html[data-wp-tone="light"] .card-t, html[data-wp-tone="light"] .card-h .card-t, html[data-wp-tone="light"] .nf-card-name, html[data-wp-tone="light"] .nf-card-client, html[data-wp-tone="light"] .chart-lbl, html[data-wp-tone="light"] .chart-y span, html[data-wp-tone="light"] .stat-label, html[data-wp-tone="light"] .stat-title, html[data-wp-tone="light"] .pd-kpi-label, html[data-wp-tone="light"] main h1, html[data-wp-tone="light"] main h2, html[data-wp-tone="light"] main h3, html[data-wp-tone="light"] main p, html[data-wp-tone="light"] .wel, html[data-wp-tone="light"] .page-header h1, html[data-wp-tone="light"] .page-header h2, html[data-wp-tone="light"] .page-title { color: #1a1a2a !important; text-shadow: 0 1px 2px rgba(255,255,255,0.4); } html[data-wp-tone="light"] .kpi-label, html[data-wp-tone="light"] .nf-card-client, html[data-wp-tone="light"] .stat-label, html[data-wp-tone="light"] .pd-kpi-label, html[data-wp-tone="light"] .chart-lbl, html[data-wp-tone="light"] .chart-y span { color: #4a4a5a !important; } /* ════════════════════════════════════════════════════════════════ DARK MODE PRIORITAIRE : en dark, le texte reste blanc/clair peu importe le wallpaper. On annule les overrides "data-wp-tone=light" qui forceraient du texte sombre. La sidebar est aussi sécurisée. ════════════════════════════════════════════════════════════════ */ html[data-theme="dark"][data-wp-tone="light"] .kpi-label, html[data-theme="dark"][data-wp-tone="light"] .kpi-val, html[data-theme="dark"][data-wp-tone="light"] .kpi-value, html[data-theme="dark"][data-wp-tone="light"] .kpi-card-value, html[data-theme="dark"][data-wp-tone="light"] .kpi-trend .vs, html[data-theme="dark"][data-wp-tone="light"] .kpi-sub, html[data-theme="dark"][data-wp-tone="light"] .card-t, html[data-theme="dark"][data-wp-tone="light"] .card-h .card-t, html[data-theme="dark"][data-wp-tone="light"] .nf-card-name, html[data-theme="dark"][data-wp-tone="light"] .nf-card-client, html[data-theme="dark"][data-wp-tone="light"] .chart-lbl, html[data-theme="dark"][data-wp-tone="light"] .chart-y span, html[data-theme="dark"][data-wp-tone="light"] .stat-label, html[data-theme="dark"][data-wp-tone="light"] .stat-title, html[data-theme="dark"][data-wp-tone="light"] .pd-kpi-label, html[data-theme="dark"][data-wp-tone="light"] main h1, html[data-theme="dark"][data-wp-tone="light"] main h2, html[data-theme="dark"][data-wp-tone="light"] main h3, html[data-theme="dark"][data-wp-tone="light"] main p, html[data-theme="dark"][data-wp-tone="light"] .wel, html[data-theme="dark"][data-wp-tone="light"] .page-header h1, html[data-theme="dark"][data-wp-tone="light"] .page-header h2, html[data-theme="dark"][data-wp-tone="light"] .page-title { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"][data-wp-tone="light"] .kpi-label, html[data-theme="dark"][data-wp-tone="light"] .nf-card-client, html[data-theme="dark"][data-wp-tone="light"] .stat-label, html[data-theme="dark"][data-wp-tone="light"] .pd-kpi-label, html[data-theme="dark"][data-wp-tone="light"] .chart-lbl, html[data-theme="dark"][data-wp-tone="light"] .chart-y span { color: #f6f6f6 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; } /* Sidebar : textes + icônes toujours en blanc/clair en dark, peu importe le wallpaper */ html[data-theme="dark"] .sidebar-item, html[data-theme="dark"] .sidebar-item-text, html[data-theme="dark"] .sidebar-nav .nav-group-title, html[data-theme="dark"] .nav-group-title { color: #f6f6f6 !important; } html[data-theme="dark"] .sidebar-item.active, html[data-theme="dark"] .sidebar-item.active .sidebar-item-text { color: #ffffff !important; } html[data-theme="dark"] .sidebar-item svg, html[data-theme="dark"] .sidebar-item .material-symbols-outlined, html[data-theme="dark"] .sidebar-item .icon-medium, html[data-theme="dark"] .sidebar-item i.hgi-stroke { color: #f6f6f6 !important; fill: #f6f6f6; } html[data-theme="dark"] .sidebar-item.active svg, html[data-theme="dark"] .sidebar-item.active .material-symbols-outlined, html[data-theme="dark"] .sidebar-item.active .icon-medium, html[data-theme="dark"] .sidebar-item.active i.hgi-stroke { color: #ffffff !important; fill: #ffffff; } /* Le hover garde la couleur d'accent (intentionnel — feedback visuel) */ /* Wallpaper sombre → forcer textes clairs dans les cards */ html[data-wp-tone="dark"] .kpi-label, html[data-wp-tone="dark"] .kpi-val, html[data-wp-tone="dark"] .kpi-value, html[data-wp-tone="dark"] .kpi-card-value, html[data-wp-tone="dark"] .kpi-trend .vs, html[data-wp-tone="dark"] .kpi-sub, html[data-wp-tone="dark"] .card-t, html[data-wp-tone="dark"] .card-h .card-t, html[data-wp-tone="dark"] .nf-card-name, html[data-wp-tone="dark"] .nf-card-client, html[data-wp-tone="dark"] .chart-lbl, html[data-wp-tone="dark"] .chart-y span, html[data-wp-tone="dark"] .stat-label, html[data-wp-tone="dark"] .stat-title, html[data-wp-tone="dark"] .pd-kpi-label, html[data-wp-tone="dark"] main h1, html[data-wp-tone="dark"] main h2, html[data-wp-tone="dark"] main h3, html[data-wp-tone="dark"] main p, html[data-wp-tone="dark"] .wel, html[data-wp-tone="dark"] .page-header h1, html[data-wp-tone="dark"] .page-header h2, html[data-wp-tone="dark"] .page-title { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } html[data-wp-tone="dark"] .kpi-label, html[data-wp-tone="dark"] .nf-card-client, html[data-wp-tone="dark"] .stat-label, html[data-wp-tone="dark"] .pd-kpi-label, html[data-wp-tone="dark"] .chart-lbl, html[data-wp-tone="dark"] .chart-y span { color: #f6f6f6 !important; } /* ========================================================== ICONS — suppression des fonds sur les containers d'icônes Icônes à même le texte / card, pas de pastille colorée ========================================================== */ .card-treso-icon, .cht-card-icon, .kpi-icon-circle, .kpi-icon-wrap, .hd-icon-box, .cmd-ico, .timer-banner-icon, .source-icon, .folder-icon, .recap-icon, .tuto-step-icon, .kpi-icon, .kpi-icon-3d, .pd-btn-icon, .stat-icon, .nf-progress-icon { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* Garder les couleurs accent sur les icônes (pas le fond, juste le trait) */ .card-treso-icon, .cht-card-icon, .kpi-icon-circle, .kpi-icon-wrap, .hd-icon-box { color: var(--t2); } [data-theme="dark"] .card-treso-icon, [data-theme="dark"] .cht-card-icon, [data-theme="dark"] .kpi-icon-circle, [data-theme="dark"] .kpi-icon-wrap, [data-theme="dark"] .hd-icon-box { color: var(--t2); } /* ═══ NUIT = thème Glass : EXACTEMENT le fond du mode glass de la landing (wallpaper « refracted glass » SANS zoom : l'image entière se cale sur l'écran) + voile FROST identique (blur + teinte sombre) via le ::after ambiant existant. Light intouché (background:none plus haut), Rexora intouché (design-rexora.css masque ces pseudo-éléments). ═══ */ [data-theme="dark"] body:not(.has-bg-image)::before { background: url("../img/landing-glass-refracted.webp") center / 100% 100% no-repeat; } [data-theme="dark"] body:not(.has-bg-image):has(.app-container)::after { background: rgba(8, 9, 14, 0.22); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); } /* Les orbes ambiantes ne font plus partie du langage (nuit = wallpaper refracted, jour = Rexora à points) : masquées partout. */ .aura-orbs { display: none !important; }