/* ───────────────────────────────────────────────────────────────────── Voxora Care — Theme system (iter 6ι) Variables CSS pour theme sombre (par defaut) et clair. Toggle via attribute [data-theme] sur . ──────────────────────────────────────────────────────────────────── */ /* === Theme SOMBRE (defaut) === */ :root, :root[data-theme="dark"] { /* Backgrounds */ --c-bg: #020617; --c-bg-radial: radial-gradient(ellipse 60% 40% at 20% 8%, rgba(99, 102, 241, 0.12), transparent 62%); --c-bg-panel: rgba(15, 23, 42, 0.55); --c-bg-panel-strong: rgba(15, 23, 42, 0.7); --c-bg-card: rgba(2, 6, 23, 0.4); --c-bg-card-hover: rgba(2, 6, 23, 0.6); --c-bg-input: rgba(2, 6, 23, 0.55); --c-bg-topbar: rgba(4, 11, 26, 0.97); --c-bg-elevated: rgba(15, 23, 42, 0.85); /* Borders */ --c-border: rgba(148, 163, 184, 0.18); --c-border-strong: rgba(148, 163, 184, 0.32); --c-border-subtle: rgba(148, 163, 184, 0.10); --c-border-accent: rgba(129, 140, 248, 0.5); /* Texts */ --c-text-primary: #f1f5f9; --c-text-secondary: #cbd5e1; --c-text-tertiary: #94a3b8; --c-text-muted: #64748b; --c-text-disabled: #475569; --c-text-on-accent: #ffffff; /* Accent (indigo Voxora — aligné espace patient) */ --c-accent: #818cf8; --c-accent-strong: #6366f1; --c-accent-deep: #4f46e5; --c-accent-soft: rgba(99, 102, 241, 0.16); --c-accent-soft-hover: rgba(99, 102, 241, 0.26); --c-accent-text: #a5b4fc; /* Semantic */ --c-success: #34d399; --c-success-soft: rgba(52, 211, 153, 0.16); --c-success-text: #6ee7b7; --c-warn: #fcd34d; --c-warn-soft: rgba(252, 211, 77, 0.14); --c-warn-text: #fcd34d; --c-danger: #f87171; --c-danger-soft: rgba(248, 113, 113, 0.16); --c-danger-text: #fca5a5; --c-info: #a5b4fc; --c-info-soft: rgba(99, 102, 241, 0.16); --c-info-text: #a5b4fc; --c-purple: #d8b4fe; --c-purple-soft: rgba(168, 85, 247, 0.14); --c-purple-text: #c4b5fd; /* Shadows */ --c-shadow-sm: 0 2px 4px rgba(0,0,0,0.2); --c-shadow-md: 0 4px 12px rgba(0,0,0,0.3); --c-shadow-lg: 0 10px 30px rgba(0,0,0,0.35); --c-shadow-toast: 0 10px 30px rgba(0,0,0,0.3); } /* === Theme CLAIR === */ :root[data-theme="light"] { /* Backgrounds */ --c-bg: #f8fafc; --c-bg-radial: radial-gradient(ellipse 60% 40% at 20% 8%, rgba(99, 102, 241, 0.08), transparent 62%); --c-bg-panel: rgba(255, 255, 255, 0.85); --c-bg-panel-strong: rgba(255, 255, 255, 0.95); --c-bg-card: rgba(255, 255, 255, 0.7); --c-bg-card-hover: rgba(255, 255, 255, 0.95); --c-bg-input: rgba(255, 255, 255, 0.95); --c-bg-topbar: rgba(255, 255, 255, 0.85); --c-bg-elevated: #ffffff; /* Borders */ --c-border: rgba(15, 23, 42, 0.10); --c-border-strong: rgba(15, 23, 42, 0.18); --c-border-subtle: rgba(15, 23, 42, 0.05); --c-border-accent: rgba(99, 102, 241, 0.5); /* Texts */ --c-text-primary: #0f172a; --c-text-secondary: #334155; --c-text-tertiary: #475569; --c-text-muted: #64748b; --c-text-disabled: #94a3b8; --c-text-on-accent: #ffffff; /* Accent (indigo Voxora — aligné espace patient) */ --c-accent: #6366f1; --c-accent-strong: #4f46e5; --c-accent-deep: #4338ca; --c-accent-soft: rgba(99, 102, 241, 0.10); --c-accent-soft-hover: rgba(99, 102, 241, 0.18); --c-accent-text: #4f46e5; /* Semantic */ --c-success: #16a34a; --c-success-soft: rgba(22, 163, 74, 0.10); --c-success-text: #15803d; --c-warn: #d97706; --c-warn-soft: rgba(217, 119, 6, 0.10); --c-warn-text: #b45309; --c-danger: #dc2626; --c-danger-soft: rgba(220, 38, 38, 0.08); --c-danger-text: #b91c1c; --c-info: #6366f1; --c-info-soft: rgba(99, 102, 241, 0.10); --c-info-text: #4338ca; --c-purple: #9333ea; --c-purple-soft: rgba(147, 51, 234, 0.10); --c-purple-text: #7e22ce; /* Shadows (plus douces en clair) */ --c-shadow-sm: 0 1px 3px rgba(15,23,42,0.06); --c-shadow-md: 0 4px 12px rgba(15,23,42,0.08); --c-shadow-lg: 0 10px 30px rgba(15,23,42,0.12); --c-shadow-toast: 0 10px 25px rgba(15,23,42,0.15); } /* === Reset + body de base utilisable par toutes les pages === */ html, body { background: var(--c-bg); } body.care-themed { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; background: var(--c-bg-radial), var(--c-bg); background-attachment: fixed; min-height: 100vh; color: var(--c-text-primary); margin: 0; display: flex; flex-direction: column; } /* === Topbar partagee (utilisable par care_header.html) === */ .care-topbar { /* z-index entre les en-tetes sticky de page (.pv-header z-30) et l'overlay du menu mobile (backdrop z-55 / sidebar z-60) -> le menu notifications passe au-dessus du contenu sans masquer la sidebar mobile (iter 7DZ). */ position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--c-border); background: var(--c-bg-topbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .care-topbar-inner { width: min(1280px, 100%); margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .care-brand { display: inline-flex; align-items: center; gap: 0.64rem; text-decoration: none; color: var(--c-text-primary); } .care-brand-mark { width: 2.28rem; height: 2.28rem; border-radius: 0.74rem; flex-shrink: 0; } .care-brand-copy strong { font-size: 1rem; } .care-brand-copy small { color: var(--c-accent); font-size: 0.72rem; font-weight: 600; } .care-nav { display: inline-flex; gap: 0.45rem; align-items: center; } .care-nav-btn { display: inline-flex; align-items: center; gap: 0.42rem; height: 2.2rem; padding: 0 0.85rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--c-text-secondary); border: 1px solid var(--c-border-strong); background: var(--c-bg-card); cursor: pointer; transition: all 0.15s; } .care-nav-btn:hover { color: var(--c-text-primary); border-color: var(--c-border-accent); } /* === Toggle theme === */ .care-theme-toggle { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--c-border-strong); background: var(--c-bg-card); color: var(--c-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: all 0.15s; } .care-theme-toggle:hover { border-color: var(--c-border-accent); color: var(--c-accent); } :root[data-theme="dark"] .care-theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] .care-theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .care-theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .care-theme-toggle .icon-moon { display: inline; } /* === Lang switcher === */ .care-lang-switch { position: relative; display: inline-flex; } .care-lang-trigger { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.2rem; padding: 0 0.7rem; border-radius: 999px; border: 1px solid var(--c-border-strong); background: var(--c-bg-card); color: var(--c-text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; } .care-lang-trigger:hover { border-color: var(--c-border-accent); color: var(--c-text-primary); } .care-lang-flag { font-size: 1rem; } .care-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: 0.6rem; padding: 0.3rem; min-width: 160px; box-shadow: var(--c-shadow-md); display: none; z-index: 100; } .care-lang-switch.open .care-lang-menu { display: block; } .care-lang-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.7rem; border-radius: 0.4rem; font-size: 0.84rem; color: var(--c-text-secondary); cursor: pointer; border: 0; background: transparent; text-align: left; font-family: inherit; } .care-lang-item:hover { background: var(--c-accent-soft); color: var(--c-text-primary); } .care-lang-item.active { color: var(--c-accent-text); font-weight: 700; } .care-lang-item.active::after { content: "✓"; margin-left: auto; } /* === Conteneurs partagés (panel, card, etc.) === */ .care-stage { flex: 1; max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; width: 100%; } .care-panel { padding: 1.4rem 1.6rem; border-radius: 1.1rem; background: var(--c-bg-panel); border: 1px solid var(--c-border); } .care-card { padding: 1.1rem 1.3rem; border-radius: 0.75rem; background: var(--c-bg-card); border: 1px solid var(--c-border); } /* === Buttons primary/secondary partagés === */ .care-btn-primary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.4rem; border-radius: 999px; background: linear-gradient(135deg, var(--c-accent-strong), var(--c-accent-deep)); color: var(--c-text-on-accent); font-weight: 700; font-size: 0.86rem; text-decoration: none; border: 0; cursor: pointer; transition: filter 0.15s; } .care-btn-primary:hover { filter: brightness(1.1); } .care-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .care-btn-secondary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--c-bg-card); color: var(--c-text-secondary); border: 1px solid var(--c-border-strong); font-weight: 600; font-size: 0.84rem; cursor: pointer; text-decoration: none; } .care-btn-secondary:hover { color: var(--c-text-primary); border-color: var(--c-border-accent); } /* === Inputs partagés === */ .care-input, .care-textarea, .care-select { width: 100%; padding: 0.7rem 0.95rem; border-radius: 0.55rem; background: var(--c-bg-input); border: 1px solid var(--c-border-strong); color: var(--c-text-primary); font-family: inherit; font-size: 0.92rem; } .care-textarea { min-height: 100px; resize: vertical; line-height: 1.5; } .care-input:focus, .care-textarea:focus, .care-select:focus { outline: none; border-color: var(--c-accent); } /* === Flash messages === */ .care-flash { padding: 0.75rem 1rem; border-radius: 0.6rem; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .care-flash.success { background: var(--c-success-soft); color: var(--c-success-text); border: 1px solid var(--c-success-soft); } .care-flash.error { background: var(--c-danger-soft); color: var(--c-danger-text); border: 1px solid var(--c-danger-soft); } .care-flash.info { background: var(--c-info-soft); color: var(--c-info-text); border: 1px solid var(--c-info-soft); } /* ───────────────────────────────────────────────────────────────────── Light-mode global overrides Ces regles compensent les hardcoded colors qui restent dans les templates legacy (linear-gradients avec rgba(15,23,42,X), boutons .nav-btn / .care-action / .auth-action-btn / .filter-pill, etc). Approche : surcharge generique par class name pour eviter de migrer chaque template a la main. Dark mode = laisse le CSS inline gerer. ──────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] body, body.light-mode { color: var(--c-text-primary); } /* Cards / panels / day cols / appt cards / activity rows / cab cards — toutes les classes communes des templates Care */ :root[data-theme="light"] .panel, :root[data-theme="light"] .day-col, :root[data-theme="light"] .filter-row, :root[data-theme="light"] .header-card, :root[data-theme="light"] .next-rdv-hero, :root[data-theme="light"] .stat-card, :root[data-theme="light"] .cab-card, :root[data-theme="light"] .cabinet-row, :root[data-theme="light"] .activity-row, :root[data-theme="light"] .empty-state, :root[data-theme="light"] .visit-card, :root[data-theme="light"] .visit-section, :root[data-theme="light"] .id-card, :root[data-theme="light"] .review-card, :root[data-theme="light"] .field-card, :root[data-theme="light"] .act-card, :root[data-theme="light"] .doc-card, :root[data-theme="light"] .vital-card, :root[data-theme="light"] .rx-card, :root[data-theme="light"] .item-card, :root[data-theme="light"] .form-card, :root[data-theme="light"] .stage-block, :root[data-theme="light"] .booking-card, :root[data-theme="light"] .intake-card, body.light-mode .panel, body.light-mode .day-col, body.light-mode .filter-row, body.light-mode .header-card, body.light-mode .next-rdv-hero, body.light-mode .stat-card, body.light-mode .cab-card, body.light-mode .cabinet-row, body.light-mode .activity-row, body.light-mode .empty-state, body.light-mode .visit-card, body.light-mode .visit-section, body.light-mode .id-card, body.light-mode .review-card, body.light-mode .field-card, body.light-mode .act-card, body.light-mode .doc-card, body.light-mode .vital-card, body.light-mode .rx-card, body.light-mode .item-card, body.light-mode .form-card, body.light-mode .stage-block, body.light-mode .booking-card, body.light-mode .intake-card { background: var(--c-bg-panel) !important; border-color: var(--c-border) !important; color: var(--c-text-primary); } /* Buttons : nav-btn, cab-action, auth-action-btn, filter-pill, etc. */ :root[data-theme="light"] .nav-btn, :root[data-theme="light"] .cab-action, :root[data-theme="light"] .auth-action-btn, :root[data-theme="light"] .filter-pill, :root[data-theme="light"] .qa-btn, :root[data-theme="light"] .doc-action, body.light-mode .nav-btn, body.light-mode .cab-action, body.light-mode .auth-action-btn, body.light-mode .filter-pill, body.light-mode .qa-btn, body.light-mode .doc-action { background: var(--c-bg-card) !important; border-color: var(--c-border-strong) !important; color: var(--c-text-secondary) !important; } :root[data-theme="light"] .nav-btn:hover, :root[data-theme="light"] .cab-action:hover, :root[data-theme="light"] .auth-action-btn:hover, :root[data-theme="light"] .filter-pill:hover, :root[data-theme="light"] .qa-btn:hover, body.light-mode .nav-btn:hover, body.light-mode .cab-action:hover, body.light-mode .auth-action-btn:hover, body.light-mode .filter-pill:hover, body.light-mode .qa-btn:hover { color: var(--c-accent-strong) !important; border-color: var(--c-accent) !important; } /* Inputs / textareas / selects (templates utilisent .form-input, .field-input etc.) */ :root[data-theme="light"] .form-input, :root[data-theme="light"] .form-textarea, :root[data-theme="light"] .form-select, :root[data-theme="light"] .field-input, :root[data-theme="light"] .search-input, :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="password"], :root[data-theme="light"] input[type="tel"], :root[data-theme="light"] input[type="number"], :root[data-theme="light"] input[type="date"], :root[data-theme="light"] input[type="datetime-local"], :root[data-theme="light"] textarea, :root[data-theme="light"] select, body.light-mode .form-input, body.light-mode .form-textarea, body.light-mode .form-select, body.light-mode .field-input, body.light-mode .search-input, body.light-mode input[type="text"], body.light-mode input[type="email"], body.light-mode input[type="password"], body.light-mode input[type="tel"], body.light-mode input[type="number"], body.light-mode input[type="date"], body.light-mode input[type="datetime-local"], body.light-mode textarea, body.light-mode select { background: var(--c-bg-input) !important; color: var(--c-text-primary) !important; border-color: var(--c-border-strong) !important; } /* Headings + texts dans le body */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] h4, body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4 { color: var(--c-text-primary); } /* Footer */ :root[data-theme="light"] .footer, body.light-mode .footer { color: var(--c-text-tertiary); } /* Topbar custom des templates non-migres (.care-auth-topbar du dashboard old, .topbar du staff_calendar etc.) */ :root[data-theme="light"] .care-auth-topbar, :root[data-theme="light"] .topbar, body.light-mode .care-auth-topbar, body.light-mode .topbar { background: var(--c-bg-topbar) !important; border-bottom-color: var(--c-border) !important; } :root[data-theme="light"] .brand, :root[data-theme="light"] .brand-link, body.light-mode .brand, body.light-mode .brand-link { color: var(--c-text-primary) !important; } :root[data-theme="light"] .brand-copy small, body.light-mode .brand-copy small { color: var(--c-accent-strong) !important; } /* Stat values / numbers (souvent en blanc force) */ :root[data-theme="light"] .stat-card .sc-value, :root[data-theme="light"] .ph-stat-num, :root[data-theme="light"] .stat-value, body.light-mode .stat-card .sc-value, body.light-mode .ph-stat-num, body.light-mode .stat-value { color: var(--c-text-primary) !important; } /* Breadcrumb light */ :root[data-theme="light"] .breadcrumb, body.light-mode .breadcrumb { color: var(--c-text-tertiary); } :root[data-theme="light"] .breadcrumb a, body.light-mode .breadcrumb a { color: var(--c-accent-strong); } /* Empty states / day-empty / es-* */ :root[data-theme="light"] .day-empty, :root[data-theme="light"] .es-title, :root[data-theme="light"] .es-sub, body.light-mode .day-empty, body.light-mode .es-title, body.light-mode .es-sub { color: var(--c-text-tertiary) !important; } :root[data-theme="light"] .es-title, body.light-mode .es-title { color: var(--c-text-secondary) !important; } /* ──────────────────────────────────────────────────────────────────── Iter 7F : Dark-mode safety net pour les modals/popovers/forms qui ont des background:white + color:#0f172a hardcodes inline. On declare la classe utilitaire .modal-dark-safe a appliquer sur ces conteneurs. CSS bat l'inline via !important. ──────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] .modal-dark-safe { background: var(--c-bg-card) !important; color: var(--c-text-primary) !important; border: 1px solid rgba(148, 163, 184, 0.25); } :root[data-theme="dark"] .modal-dark-safe h1, :root[data-theme="dark"] .modal-dark-safe h2, :root[data-theme="dark"] .modal-dark-safe h3, :root[data-theme="dark"] .modal-dark-safe h4 { color: var(--c-text-primary) !important; } :root[data-theme="dark"] .modal-dark-safe label, :root[data-theme="dark"] .modal-dark-safe p, :root[data-theme="dark"] .modal-dark-safe small, :root[data-theme="dark"] .modal-dark-safe span:not([style*="color:white"]):not([class*="badge"]):not([class*="pill"]) { color: var(--c-text-secondary) !important; } :root[data-theme="dark"] .modal-dark-safe input, :root[data-theme="dark"] .modal-dark-safe textarea, :root[data-theme="dark"] .modal-dark-safe select { background: var(--c-bg) !important; color: var(--c-text-primary) !important; border-color: rgba(148, 163, 184, 0.3) !important; } :root[data-theme="dark"] .btn-light-safe { background: rgba(30, 41, 59, 0.7) !important; color: var(--c-text-secondary) !important; border-color: rgba(148, 163, 184, 0.25) !important; }