/* * Orion redesign — Pastel Glassmorphism (azur). * Design tokens issus du handoff "design_handoff_orion_redesign/README.md". * Accent : hsl(208, 82%, 40%) = #0d7bc4 (bleu azur). * Glass : rgba(255,255,255,0.68) + blur(28px) saturate(1.8). * * Loaded after page styles so the unified visual system is applied across * legacy pages that still carry local CSS. */ /* ============================================================ 0. EARLY THEME PAINT (anti-FOUC) ============================================================ Le script inline en pose `data-theme` sur dès le parse, pour que la background soit appliquée avant que ne soit parsé. Évite le flash sombre pendant 1-2s. */ html[data-theme="pastel"] { background: linear-gradient(145deg, #ddeeff 0%, #e8f4ff 45%, #eef8ff 100%) !important; color-scheme: light; } /* ============================================================ 1. DESIGN TOKENS ============================================================ */ body[data-theme="pastel"] { /* Accent (azur, hue 208) */ --acc: #0d7bc4; --acc-mid: #4ea4dd; --acc-light: #e3f1fb; --accent: #0d7bc4; --accent2: #0a5f9a; --accent-blue: #4ea4dd; --accent-glow: rgba(13, 123, 196, 0.22); --glow: rgba(13, 123, 196, 0.10); /* Secondaires */ --purple: #7c5cfc; --cyan: #0891b2; --warning: #d97706; --danger: #dc2626; --success: #059669; /* Surfaces / verre */ --bg: #e8f4ff; --surface: rgba(255, 255, 255, 0.68); --surface2: rgba(255, 255, 255, 0.54); --surface3: rgba(232, 244, 255, 0.78); --surface-dim: rgba(255, 255, 255, 0.46); --surface-hover: rgba(255, 255, 255, 0.82); --glass-bg: rgba(255, 255, 255, 0.68); --glass-bg-hover: rgba(255, 255, 255, 0.82); --glass-border: rgba(13, 123, 196, 0.10); --glass-border-hover: rgba(13, 123, 196, 0.22); --border: rgba(13, 123, 196, 0.10); --border-hover: rgba(13, 123, 196, 0.22); /* Texte */ --text: #0c2340; --text-primary: #0c2340; --text-secondary: #1a2f5c; --text-muted: rgba(14, 35, 64, 0.45); --text-dim: rgba(14, 35, 64, 0.30); --muted: rgba(14, 35, 64, 0.55); --dim: rgba(14, 35, 64, 0.35); /* Sidebar / topbar */ --sidebar-bg: rgba(255, 255, 255, 0.75); --topbar-bg: rgba(255, 255, 255, 0.55); /* Géométrie */ --radius: 12px; --radius-lg: 20px; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Ombres */ --shadow-soft: 0 4px 24px rgba(13, 123, 196, 0.07); --shadow: 0 10px 40px rgba(13, 123, 196, 0.12), 0 2px 8px rgba(13, 123, 196, 0.06); --shadow-kpi-hover: 0 14px 44px rgba(13, 123, 196, 0.18), 0 4px 16px rgba(13, 123, 196, 0.08); --shadow-sidebar: 4px 0 32px rgba(13, 123, 196, 0.06); --shadow-glow: 0 6px 20px rgba(13, 123, 196, 0.34); --shadow-btn: 0 4px 16px rgba(13, 123, 196, 0.28); color-scheme: light; background: linear-gradient(145deg, #ddeeff 0%, #e8f4ff 45%, #eef8ff 100%) !important; } body[data-theme="pastel"]::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 12% 18%, rgba(56, 152, 255, 0.28), transparent 45%), radial-gradient(ellipse at 88% 78%, rgba(96, 185, 255, 0.26), transparent 45%), radial-gradient(ellipse at 50% 50%, rgba(147, 210, 255, 0.20), transparent 60%); pointer-events: none; z-index: 0; } body[data-theme="pastel"]::after { display: none !important; } body[data-theme="pastel"] .layout, body[data-theme="pastel"] .shell, body[data-theme="pastel"] .app, body[data-theme="pastel"] .main { position: relative; z-index: 1; } body[data-theme="pastel"] .main { background: transparent !important; } /* ============================================================ 2. ANIMATIONS ============================================================ */ @keyframes orionFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes orionScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes orionPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ============================================================ 3. SIDEBAR ============================================================ */ body[data-theme="pastel"] .sidebar, body[data-theme="pastel"] aside.sidebar { width: 240px !important; flex-shrink: 0; background: var(--sidebar-bg) !important; border-color: var(--border) !important; border-right: 1px solid var(--border) !important; box-shadow: var(--shadow-sidebar) !important; backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); } body[data-theme="pastel"] .topbar, body[data-theme="pastel"] .mobile-nav { background: var(--topbar-bg) !important; border-color: var(--border) !important; box-shadow: 0 2px 18px rgba(13, 123, 196, 0.05) !important; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } body[data-theme="pastel"] .sidebar .logo { display: flex !important; align-items: center !important; gap: 11px !important; padding: 18px 18px 16px !important; border-bottom: 1px solid var(--border) !important; } body[data-theme="pastel"] .sidebar .logo-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--acc) 0%, #059669 100%); box-shadow: 0 6px 20px rgba(13, 123, 196, 0.55); } body[data-theme="pastel"] .sidebar .logo-icon svg { display: block; } body[data-theme="pastel"] .sidebar .logo-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } body[data-theme="pastel"] .sidebar .logo h1, body[data-theme="pastel"] .logo h1 { font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -0.4px !important; margin: 0 !important; background: linear-gradient(135deg, var(--acc), var(--acc-mid)) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } body[data-theme="pastel"] .sidebar .logo span { display: none !important; } body[data-theme="pastel"] .nav-label, body[data-theme="pastel"] .sidebar .nav-label { font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase; color: var(--text-muted) !important; padding: 0 14px !important; margin-bottom: 6px !important; } body[data-theme="pastel"] .sidebar .nav-item, body[data-theme="pastel"] .nav-item, body[data-theme="pastel"] .mobile-nav-btn, body[data-theme="pastel"] .mobile-nav-item { color: var(--text-secondary) !important; font-weight: 500 !important; padding: 9px 14px !important; border-radius: 10px !important; transition: all 0.18s var(--ease); } body[data-theme="pastel"] .nav-item:hover, body[data-theme="pastel"] .sidebar-footer-link:hover .user-card, body[data-theme="pastel"] .sidebar .footer-inner:hover { background: rgba(13, 123, 196, 0.08) !important; color: rgba(14, 35, 64, 0.78) !important; } body[data-theme="pastel"] .nav-item.active, body[data-theme="pastel"] .mobile-nav-btn.active, body[data-theme="pastel"] .mobile-nav-item.active { background: rgba(13, 123, 196, 0.08) !important; color: var(--acc) !important; font-weight: 700 !important; } body[data-theme="pastel"] .nav-item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px !important; height: 18px !important; border-radius: 0 3px 3px 0 !important; background: linear-gradient(180deg, var(--acc), var(--acc-mid)) !important; box-shadow: 0 0 10px rgba(13, 123, 196, 0.55); } body[data-theme="pastel"] .sidebar .nav-item.active .icon { color: var(--acc) !important; } /* Pill compteur projets */ body[data-theme="pastel"] .sidebar .nav-pill { margin-left: auto; font-size: 0.6rem; font-weight: 700; background: linear-gradient(135deg, var(--acc), #059669); color: #fff; border: none; padding: 2px 9px; border-radius: 999px; line-height: 1.5; box-shadow: 0 2px 8px rgba(13, 123, 196, 0.32); min-width: 22px; text-align: center; } /* Footer user */ body[data-theme="pastel"] .sidebar .avatar, body[data-theme="pastel"] .sidebar .footer-av, body[data-theme="pastel"] #footer-avatar { background: linear-gradient(135deg, var(--acc) 0%, var(--acc-mid) 100%) !important; border-radius: 10px !important; width: 34px !important; height: 34px !important; font-size: 0.78rem !important; font-weight: 700 !important; box-shadow: 0 6px 16px rgba(13, 123, 196, 0.32); } body[data-theme="pastel"] .sidebar .user-info .name, body[data-theme="pastel"] .sidebar .footer-name { color: var(--text-primary) !important; font-weight: 700 !important; } body[data-theme="pastel"] .sidebar .user-info .role, body[data-theme="pastel"] .sidebar .footer-role { color: var(--acc) !important; font-weight: 600 !important; } body[data-theme="pastel"] .sidebar-footer { border-top: 1px solid var(--border) !important; } body[data-theme="pastel"] .logout-btn { border-color: var(--border) !important; color: var(--text-secondary) !important; border-radius: 10px !important; font-weight: 600 !important; } body[data-theme="pastel"] .logout-btn:hover { background: rgba(13, 123, 196, 0.08) !important; color: var(--acc) !important; border-color: var(--border-hover) !important; } /* ============================================================ 4. CARDS / PANELS / GLASS SURFACES ============================================================ */ body[data-theme="pastel"] .card, body[data-theme="pastel"] .panel, body[data-theme="pastel"] .kpi-card, body[data-theme="pastel"] .stat-card, body[data-theme="pastel"] .kanban-card, body[data-theme="pastel"] .gal-card, body[data-theme="pastel"] .workload-col, body[data-theme="pastel"] .space-node, body[data-theme="pastel"] .folder-node, body[data-theme="pastel"] .list-item, body[data-theme="pastel"] .level-card, body[data-theme="pastel"] .field-item, body[data-theme="pastel"] .tmpl-card, body[data-theme="pastel"] .preview-frame, body[data-theme="pastel"] .pv-welcome, body[data-theme="pastel"] .user-card, body[data-theme="pastel"] .note-card, body[data-theme="pastel"] .item, body[data-theme="pastel"] .modal, body[data-theme="pastel"] .modal-subtasks, body[data-theme="pastel"] .toast, body[data-theme="pastel"] .toast-msg, body[data-theme="pastel"] table { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; box-shadow: var(--shadow-soft) !important; backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); } body[data-theme="pastel"] .card, body[data-theme="pastel"] .panel, body[data-theme="pastel"] .kpi-card, body[data-theme="pastel"] .stat-card, body[data-theme="pastel"] .space-node, body[data-theme="pastel"] .user-card, body[data-theme="pastel"] .note-card { border-radius: var(--radius-lg) !important; } body[data-theme="pastel"] .card:hover, body[data-theme="pastel"] .panel:hover, body[data-theme="pastel"] .kanban-card:hover, body[data-theme="pastel"] .gal-card:hover, body[data-theme="pastel"] .user-card:hover, body[data-theme="pastel"] .stat-card:hover, body[data-theme="pastel"] .list-item:hover, body[data-theme="pastel"] .space-node:hover { background: var(--glass-bg-hover) !important; border-color: var(--glass-border-hover) !important; box-shadow: var(--shadow) !important; transform: translateY(-3px); transition: all 0.22s var(--ease); } body[data-theme="pastel"] .kpi-card:hover { background: var(--glass-bg-hover) !important; border-color: var(--glass-border-hover) !important; box-shadow: var(--shadow-kpi-hover) !important; transform: translateY(-4px); transition: all 0.24s var(--ease); } body[data-theme="pastel"] .kanban-card:hover { transform: translateY(-3px); } body[data-theme="pastel"] .card-head, body[data-theme="pastel"] .card h3, body[data-theme="pastel"] .panel-head, body[data-theme="pastel"] .panel-title, body[data-theme="pastel"] .space-head, body[data-theme="pastel"] .preview-toolbar, body[data-theme="pastel"] thead th, body[data-theme="pastel"] .table thead th { background: rgba(255, 255, 255, 0.42) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body[data-theme="pastel"] .panel-title { font-size: 0.86rem !important; font-weight: 700 !important; color: var(--text-primary) !important; } body[data-theme="pastel"] tbody tr:hover, body[data-theme="pastel"] .ttrow:hover, body[data-theme="pastel"] .gantt-row:hover, body[data-theme="pastel"] .folder-head:hover, body[data-theme="pastel"] .tree-space-head:hover, body[data-theme="pastel"] .tree-folder-head:hover, body[data-theme="pastel"] .tree-list-btn:hover, body[data-theme="pastel"] .sc-row:hover, body[data-theme="pastel"] .field-item:hover, body[data-theme="pastel"] .tmpl-card:hover { background: rgba(13, 123, 196, 0.06) !important; } /* ============================================================ 5. INPUTS ============================================================ */ body[data-theme="pastel"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), body[data-theme="pastel"] textarea, body[data-theme="pastel"] select, body[data-theme="pastel"] .search-input, body[data-theme="pastel"] .filter-select, body[data-theme="pastel"] .field-type-select, body[data-theme="pastel"] .field-key-input, body[data-theme="pastel"] .schema-box { background: rgba(255, 255, 255, 0.58) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: 11px !important; box-shadow: none !important; } body[data-theme="pastel"] input:focus, body[data-theme="pastel"] textarea:focus, body[data-theme="pastel"] select:focus, body[data-theme="pastel"] .search-input:focus, body[data-theme="pastel"] .filter-select:focus { border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(13, 123, 196, 0.14) !important; outline: none !important; } body[data-theme="pastel"] ::placeholder { color: rgba(14, 35, 64, 0.42) !important; } /* ============================================================ 6. BUTTONS ============================================================ */ body[data-theme="pastel"] .btn-primary, body[data-theme="pastel"] .btn.primary, body[data-theme="pastel"] .btn.main, body[data-theme="pastel"] .btn-new, body[data-theme="pastel"] .btn-save { background: linear-gradient(135deg, var(--acc) 0%, var(--acc-mid) 100%) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: var(--shadow-btn); transition: all 0.2s var(--ease); } body[data-theme="pastel"] .btn-primary:hover, body[data-theme="pastel"] .btn.primary:hover, body[data-theme="pastel"] .btn.main:hover, body[data-theme="pastel"] .btn-new:hover, body[data-theme="pastel"] .btn-save:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13, 123, 196, 0.42) !important; filter: none !important; } body[data-theme="pastel"] .btn-secondary, body[data-theme="pastel"] .btn.alt, body[data-theme="pastel"] .btn.secondary { background: rgba(255, 255, 255, 0.7) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; border-radius: 10px !important; } body[data-theme="pastel"] .btn-secondary:hover, body[data-theme="pastel"] .btn.alt:hover, body[data-theme="pastel"] .btn.secondary:hover { border-color: var(--border-hover) !important; color: var(--acc) !important; } body[data-theme="pastel"] .btn-ghost { background: rgba(255, 255, 255, 0.6) !important; border-color: var(--border) !important; color: var(--acc) !important; } body[data-theme="pastel"] .btn-ghost:hover { border-color: var(--border-hover) !important; } /* ============================================================ 7. TYPOGRAPHY (h1, KPI, badges) ============================================================ */ body[data-theme="pastel"] .hero h2, body[data-theme="pastel"] .page-head h2, body[data-theme="pastel"] .page-head-left h2, body[data-theme="pastel"] .page-title h2, body[data-theme="pastel"] .hero-greeting h2 { font-size: 1.85rem !important; font-weight: 900 !important; letter-spacing: -0.7px !important; color: var(--text-primary) !important; background: none !important; -webkit-text-fill-color: initial !important; } body[data-theme="pastel"] .hero-greeting h2 .spark, body[data-theme="pastel"] .hero-day { background: linear-gradient(135deg, var(--acc), var(--acc-mid)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } body[data-theme="pastel"] .hero-day { font-size: 0.67rem !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: var(--acc) !important; -webkit-text-fill-color: var(--acc) !important; } body[data-theme="pastel"] .kpi-label, body[data-theme="pastel"] .stat-label { font-size: 0.67rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1.2px !important; color: var(--text-muted) !important; } body[data-theme="pastel"] .kpi-value, body[data-theme="pastel"] .stat-value, body[data-theme="pastel"] .stat .v { font-size: 2.7rem !important; font-weight: 900 !important; letter-spacing: -2px !important; font-variant-numeric: tabular-nums !important; line-height: 1 !important; color: var(--text-primary) !important; } /* ============================================================ 8. KPI CARDS — top stripe + glow + stagger ============================================================ */ body[data-theme="pastel"] .kpi-card, body[data-theme="pastel"] .stat-card { position: relative; overflow: hidden; padding: 22px 24px !important; animation: orionFadeUp 0.5s var(--ease) both; } body[data-theme="pastel"] .kpi-grid > .kpi-card:nth-child(1), body[data-theme="pastel"] .stats-row > .stat-card:nth-child(1) { animation-delay: 0ms; } body[data-theme="pastel"] .kpi-grid > .kpi-card:nth-child(2), body[data-theme="pastel"] .stats-row > .stat-card:nth-child(2) { animation-delay: 70ms; } body[data-theme="pastel"] .kpi-grid > .kpi-card:nth-child(3), body[data-theme="pastel"] .stats-row > .stat-card:nth-child(3) { animation-delay: 140ms; } body[data-theme="pastel"] .kpi-grid > .kpi-card:nth-child(4), body[data-theme="pastel"] .stats-row > .stat-card:nth-child(4) { animation-delay: 210ms; } body[data-theme="pastel"] .kpi-card::before, body[data-theme="pastel"] .stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--acc), transparent 70%); opacity: 0.95; } body[data-theme="pastel"] .kpi-card.purple::before { background: linear-gradient(90deg, var(--purple), transparent 70%) !important; } body[data-theme="pastel"] .kpi-card.green::before { background: linear-gradient(90deg, var(--success), transparent 70%) !important; } body[data-theme="pastel"] .kpi-card.orange::before { background: linear-gradient(90deg, var(--warning), transparent 70%) !important; } body[data-theme="pastel"] .kpi-card::after, body[data-theme="pastel"] .stat-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; bottom: -60px; background: radial-gradient(circle, rgba(13, 123, 196, 0.16), transparent 65%); pointer-events: none; } body[data-theme="pastel"] .kpi-card.purple::after { background: radial-gradient(circle, rgba(124, 92, 252, 0.16), transparent 65%); } body[data-theme="pastel"] .kpi-card.green::after { background: radial-gradient(circle, rgba(5, 150, 105, 0.16), transparent 65%); } body[data-theme="pastel"] .kpi-card.orange::after { background: radial-gradient(circle, rgba(217, 119, 6, 0.18), transparent 65%); } body[data-theme="pastel"] .kpi-card.blue .kpi-value { color: var(--acc) !important; } body[data-theme="pastel"] .kpi-card.purple .kpi-value { color: var(--purple) !important; } body[data-theme="pastel"] .kpi-card.green .kpi-value { color: var(--success) !important; } body[data-theme="pastel"] .kpi-card.orange .kpi-value { color: var(--warning) !important; } /* ============================================================ 9. KANBAN ============================================================ */ body[data-theme="pastel"] .kanban-col { background: rgba(255, 255, 255, 0.62) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; border-top-width: 3px !important; } body[data-theme="pastel"] .kanban-mini .kanban-col[data-statut="a_faire"] { border-top-color: rgba(80, 100, 150, 0.6) !important; } body[data-theme="pastel"] .kanban-mini .kanban-col[data-statut="en_cours"] { border-top-color: var(--acc) !important; } body[data-theme="pastel"] .kanban-mini .kanban-col[data-statut="revision"] { border-top-color: var(--warning) !important; } body[data-theme="pastel"] .kanban-mini .kanban-col[data-statut="termine"] { border-top-color: var(--success) !important; } body[data-theme="pastel"] .kanban-col-title { color: var(--text-primary) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1px !important; font-size: 0.8rem !important; } body[data-theme="pastel"] .kanban-col-count { background: rgba(13, 123, 196, 0.10) !important; border: none !important; color: var(--acc) !important; } body[data-theme="pastel"] .kanban-card { background: rgba(255, 255, 255, 0.85) !important; border-color: var(--border) !important; color: var(--text-primary) !important; border-radius: 14px !important; border-left: 3px solid var(--acc) !important; } body[data-theme="pastel"] .kanban-card:hover { border-color: var(--border-hover) !important; } /* ============================================================ 10. BADGES ============================================================ */ body[data-theme="pastel"] .badge, body[data-theme="pastel"] .tag-badge, body[data-theme="pastel"] .pill, body[data-theme="pastel"] .role-badge { font-size: 0.62rem !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 7px !important; } body[data-theme="pastel"] .badge { background: rgba(13, 123, 196, 0.12) !important; color: var(--acc) !important; border: 1px solid rgba(13, 123, 196, 0.22) !important; } /* ============================================================ 11. LIVE BADGE / DOTS ============================================================ */ body[data-theme="pastel"] .live-badge { background: rgba(5, 150, 105, 0.10) !important; border-color: rgba(5, 150, 105, 0.22) !important; color: var(--success) !important; font-weight: 600; position: relative; padding-left: 22px !important; } body[data-theme="pastel"] .live-badge::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.20); animation: orionPulseDot 1.6s var(--ease) infinite; } /* ============================================================ 12. TABLES ============================================================ */ body[data-theme="pastel"] .table, body[data-theme="pastel"] .table-wrap, body[data-theme="pastel"] .matrix-table-wrap { border-radius: 16px !important; border-color: var(--border) !important; } body[data-theme="pastel"] thead th, body[data-theme="pastel"] .table thead th, body[data-theme="pastel"] .matrix-table thead th { background: rgba(13, 123, 196, 0.06) !important; color: var(--acc) !important; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; font-size: 0.66rem !important; } /* ============================================================ 13. ESPACES NODES / TREE ============================================================ */ body[data-theme="pastel"] .space-head { background: linear-gradient(180deg, rgba(13, 123, 196, 0.06), transparent) !important; border-bottom-color: var(--border) !important; } body[data-theme="pastel"] .folder-head:hover { background: rgba(13, 123, 196, 0.06) !important; } body[data-theme="pastel"] .tree-list-btn.active { background: rgba(13, 123, 196, 0.10) !important; color: var(--acc) !important; font-weight: 600; } /* ============================================================ 14. FORMS — tabs, level pickers, role buttons ============================================================ */ body[data-theme="pastel"] .form-tabs, body[data-theme="pastel"] .tabs { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid var(--border) !important; } body[data-theme="pastel"] .form-tab, body[data-theme="pastel"] .tab { color: var(--muted) !important; } body[data-theme="pastel"] .form-tab.active, body[data-theme="pastel"] .tab.active, body[data-theme="pastel"] .toggle-btn.active, body[data-theme="pastel"] .view-tab.active, body[data-theme="pastel"] .fd-tab.active { background: linear-gradient(135deg, var(--acc) 0%, var(--acc-mid) 100%) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(13, 123, 196, 0.35) !important; } body[data-theme="pastel"] .role-btn.sel-admin, body[data-theme="pastel"] .level-card.selected-edition { border-color: var(--acc) !important; background: rgba(13, 123, 196, 0.10) !important; color: var(--acc) !important; } body[data-theme="pastel"] .badge-edition { background: rgba(13, 123, 196, 0.14) !important; color: var(--acc) !important; border-color: rgba(13, 123, 196, 0.28) !important; } /* ============================================================ 15. UPDATED / DATE / META ============================================================ */ body[data-theme="pastel"] .updated, body[data-theme="pastel"] .date-badge { background: rgba(13, 123, 196, 0.10) !important; border-color: rgba(13, 123, 196, 0.22) !important; color: var(--acc) !important; font-weight: 600; border-radius: 10px !important; } /* ============================================================ 16. CHECKBOX (mes-taches) ============================================================ */ body[data-theme="pastel"] input[type="checkbox"] { accent-color: var(--acc); } /* ============================================================ 17. SCROLLBARS ============================================================ */ body[data-theme="pastel"] *::-webkit-scrollbar-thumb { background: rgba(13, 123, 196, 0.22); border-radius: 10px; } /* ============================================================ 18. NOTES — flat list ============================================================ */ body[data-theme="pastel"] .notes-aside { border-right: 1px solid var(--border) !important; background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); } body[data-theme="pastel"] .btn-new-note { background: linear-gradient(135deg, var(--acc), var(--acc-mid)) !important; box-shadow: 0 4px 14px rgba(13, 123, 196, 0.4) !important; } body[data-theme="pastel"] .btn-new-note:hover { box-shadow: 0 6px 18px rgba(13, 123, 196, 0.5) !important; } body[data-theme="pastel"] .note-item.active { background: rgba(13, 123, 196, 0.12) !important; border-color: rgba(13, 123, 196, 0.33) !important; box-shadow: 0 2px 10px rgba(13, 123, 196, 0.10) !important; } body[data-theme="pastel"] .btn-act.primary { background: linear-gradient(135deg, var(--acc), var(--acc-mid)) !important; box-shadow: 0 4px 12px rgba(13, 123, 196, 0.35) !important; } body[data-theme="pastel"] .btn-act:hover { color: var(--acc) !important; border-color: var(--border-hover) !important; } body[data-theme="pastel"] .toast-mini { background: rgba(13, 123, 196, 0.95) !important; box-shadow: 0 8px 28px rgba(13, 123, 196, 0.4) !important; } /* ============================================================ 19. MOBILE NAV ============================================================ */ body[data-theme="pastel"] .mobile-nav { background: var(--topbar-bg) !important; } body[data-theme="pastel"] .mobile-nav-btn.active { color: var(--acc) !important; } /* ============================================================ 20. LOGO PWA banners ============================================================ */ body[data-theme="pastel"] #pwa-update-banner, body[data-theme="pastel"] #pwa-install-banner { background: linear-gradient(135deg, #1e3a5f, var(--acc)) !important; }