/* ============================================================================ ZCA — PONT LIQUID GLASS → FRAPPE DESK (zca-lg-frappe-bridge.css) OP-CARROSSERIE-LIQUID-GLASS · présentation SEULEMENT · additif · réversible ---------------------------------------------------------------------------- Rôle : mapper les TOKENS du design system (liquid-glass.css, chargé AVANT ce fichier) sur les variables CSS du Desk Frappe (v15) + poser le verre sur le chrome (navbar, sidebar, cartes, modales). Même patron que le `zca-lg-bridge.css` de l'oracle (cf. oracle-ref/compta/PORTAGE-LIQUID-GLASS.md) : JAMAIS un fork du CSS Frappe — uniquement des variables re-pointées et quelques règles de surface. Chaque section est INDÉPENDANTE : si un composant devient illisible, on supprime SA section (le pont recule), le reste tient. Rollback total : retirer les 3 includes de hooks.py (app_include_css / web_include_css). Aucun fichier Frappe n'est modifié. THÈMES — CLAIR = BASE, SOMBRE = OPTION (ordre Commandant, retouche 2026-07-11). Les 2 modes sont disponibles en tout temps : dans le Desk, le theme-switcher natif Frappe (Light / Dark / Automatic) pose `data-theme` sur (« Automatic » est résolu par Frappe en light/dark au runtime). Les 3 cas sont couverts : · data-theme="light" → bloc CLAIR (§1) — mêmes valeurs que le bloc `html[data-theme="light"]` de liquid-glass.css l.857+ (source oracle) ; · data-theme ABSENT → bloc CLAIR (§1) AUSSI : `:root:not([data-theme= "dark"])` couvre les pages sans attribut (login / pages web invitées, avant tout JS). NÉCESSAIRE car liquid-glass.css est NUIT par défaut sur :root — le §1 re-déclare donc les tokens LG en valeurs claires (dérivées du bloc oracle, rien d'inventé) ; · data-theme="dark" → bloc SOMBRE (§2) : mapping nuit, les tokens nuit venant du :root de liquid-glass.css (inchangés). Sélecteurs `:root:not([data-theme="dark"])` / `:root[data-theme="dark"]` (0,2,0) : mutuellement exclusifs, et ils battent les blocs `:root` et `[data-theme=…]` de Frappe (0,1,0) SANS !important. !important : AUCUN dans ce fichier (politique flight-plan : chaque !important devrait être justifié ligne par ligne — on n'en a pas eu besoin, les variables et la spécificité suffisent). Honnêteté : les noms de variables Frappe couvrent v14/v15 (superset) ; une variable inconnue d'une version est simplement inerte — additif. §1 et §2 dupliquent volontairement le mapping Frappe : deux blocs ÉTANCHES par thème (ordre de retouche), pas de bloc partagé ambigu. 0 asset externe : ce fichier ne charge RIEN (ni police, ni image, ni CDN). ========================================================================== */ /* ============================================================================ 1. CLAIR = DÉFAUT — :root:not([data-theme="dark"]) (couvre data-theme="light" ET l'absence d'attribut) 1a. Tokens LG re-déclarés en CLAIR — copie fidèle du bloc oracle `html[data-theme="light"]` (liquid-glass.css l.859-873). Sans cette re-déclaration, les pages SANS data-theme resteraient nuit (liquid-glass.css est sombre par défaut). 1b. Variables Frappe mappées sur ces valeurs claires (via les tokens). ========================================================================== */ :root:not([data-theme="dark"]) { color-scheme: light; /* — 1a. Tokens LG clairs (oracle : frosted-white sur fond perle bleuté) — */ --bg-0: #DCE2EA; --bg-1: #E9EDF3; --bg-2: #F6F8FB; --glass: rgba(255, 255, 255, .28); --glass-2: rgba(255, 255, 255, .42); --glass-3: rgba(255, 255, 255, .62); --glass-line: rgba(48, 56, 74, .10); --glass-edge: rgba(255, 255, 255, 1); --glass-edge-soft: rgba(255, 255, 255, .7); --glass-deep: rgba(255, 255, 255, .5); --track: rgba(36, 52, 82, .13); --ink: rgba(18, 26, 42, .92); --ink-2: rgba(18, 26, 42, .60); --ink-3: rgba(18, 26, 42, .44); --ink-4: rgba(18, 26, 42, .28); --sh-1: var(--rim), 0 1px 3px rgba(30, 45, 80, .10), 0 16px 40px -18px rgba(30, 45, 80, .28); --sh-2: var(--rim), 0 4px 12px rgba(30, 45, 80, .12), 0 38px 84px -28px rgba(30, 45, 80, .34); --lg-frost: blur(18px) saturate(150%) brightness(1.02); --lg-frost-lg: blur(30px) saturate(140%) brightness(1.01); --lg-clear: saturate(150%) brightness(1.02) blur(2px); --lg-clear-lg: saturate(140%) brightness(1.01) blur(6px); /* — 1b. Variables Frappe → valeurs CLAIRES (les tokens ci-dessus) — */ /* Fonds : perle claire */ --background-color: var(--bg-0); /* fond de page Desk */ --bg-color: var(--bg-0); /* fond de page website (login…) */ --subtle-bg: var(--bg-1); --subtle-fg: var(--glass); /* Surfaces : SOLIDES pour le chrome fonctionnel (lisibilité d'abord), le verre translucide est réservé aux cartes décoratives (§5) */ --fg-color: var(--bg-2); /* cartes/panneaux/dropdowns Desk */ --card-bg: var(--bg-2); --navbar-bg: var(--glass-deep); /* verre blanc givré — signature LG */ --fg-hover-color: var(--glass); /* survol : voile de verre */ --modal-bg: var(--bg-2); /* modale = surface SOLIDE (lisibilité) */ --popover-bg: var(--bg-2); --toast-bg: var(--bg-2); --awesomebar-focus-bg: var(--bg-2); --awesomplete-hover-bg: var(--glass-2); /* Contrôles de formulaire */ --control-bg: var(--glass); --control-bg-on-gray: var(--glass-2); --disabled-control-bg: var(--glass); --input-disabled-bg: var(--glass); --input-bg: var(--glass); /* Encre : foncée sur fond perle */ --text-color: var(--ink); --heading-color: var(--ink); --text-muted: var(--ink-2); --text-light: var(--ink-3); --disabled-text-color: var(--ink-3); --icon-stroke: var(--ink-2); /* Lignes / hairlines */ --border-color: var(--glass-line); --dark-border-color: var(--glass-line); --table-border-color: var(--glass-line); --btn-group-border-color: var(--glass-line); --highlight-color: var(--glass); --yellow-highlight-color: var(--tint-ember); --shadow-inset: inset 0 -1px 0 var(--glass-line); /* Accents : teintes FONCÉES (ember-2/azure-2) pour rester lisibles sur fond clair — même règle que le bloc clair oracle (.t-ember → --ember-2) */ --primary: var(--ember-2); --primary-color: var(--ember-2); --btn-primary: var(--ember-2); --btn-secondary: var(--glass-2); --sidebar-select-color: var(--glass-2); --checkbox-color: var(--ember-2); --checkbox-focus-shadow: 0 0 0 2px var(--tint-ember); --switch-bg: var(--track); /* Scrollbars */ --scrollbar-thumb-color: var(--glass-3); --scrollbar-track-color: var(--track); /* Typo : polices auto-hébergées (zca-fonts.css) */ --font-stack: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif; /* Grille frappe-datatable */ --dt-border-color: var(--glass-line); --dt-text-color: var(--ink); --dt-text-light: var(--ink-3); --dt-cell-bg: var(--bg-2); --dt-header-cell-bg: var(--bg-1); --dt-selection-highlight-color: var(--tint-azure); --dt-toast-bg: var(--bg-2); } /* — 1c. Décor body CLAIR. liquid-glass.css ne pose son décor clair que sous html[data-theme="light"] ; sans attribut, son body::before resterait NUIT (gradient terminé par #04060C codé en dur). Copie fidèle du bloc oracle l.874-888, re-scopée au défaut. — */ :root:not([data-theme="dark"]) body::before { background: radial-gradient(680px 560px at 6% 18%, rgba(var(--glow-azure), .26), transparent 60%), radial-gradient(760px 620px at 22% 110%, rgba(120, 150, 210, .22), transparent 62%), radial-gradient(560px 460px at 60% 70%, rgba(160, 120, 200, .14), transparent 64%), linear-gradient(160deg, #E7ECF3 0%, #DCE2EB 55%, #D2D9E4 100%); } :root:not([data-theme="dark"]) body::after { opacity: .9; background-image: linear-gradient(rgba(40, 60, 100, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 60, 100, .07) 1px, transparent 1px); } :root:not([data-theme="dark"]) ::selection { background: rgba(var(--glow-ember), .24); } /* — 1d. Accents des composants LG en clair — copie fidèle du bloc oracle l.890-907, re-scopée au défaut : les textes d'accent passent sur leur teinte foncée pour rester lisibles sur fond perle. — */ :root:not([data-theme="dark"]) .t-ember { color: var(--ember-2); } :root:not([data-theme="dark"]) .t-azure { color: var(--azure-2); } :root:not([data-theme="dark"]) .t-ok { color: var(--valide-d); } :root:not([data-theme="dark"]) .t-warn { color: var(--ambre-d); } :root:not([data-theme="dark"]) .t-ia { color: var(--ia-d); } :root:not([data-theme="dark"]) .t-danger { color: var(--danger-d); } :root:not([data-theme="dark"]) .pill.ok { color: var(--valide-d); background: rgba(63, 125, 94, .12); border-color: rgba(63, 125, 94, .24); } :root:not([data-theme="dark"]) .pill.warn { color: var(--ambre-d); background: rgba(181, 121, 31, .12); border-color: rgba(181, 121, 31, .24); } :root:not([data-theme="dark"]) .pill.ia { color: var(--ia-d); background: rgba(12, 124, 142, .13); border-color: rgba(12, 124, 142, .26); } :root:not([data-theme="dark"]) .pill.info { color: var(--azure-2); background: rgba(62, 108, 166, .12); border-color: rgba(62, 108, 166, .24); } :root:not([data-theme="dark"]) .pill.ember { color: var(--ember-2); background: rgba(242, 81, 43, .12); border-color: rgba(242, 81, 43, .26); } :root:not([data-theme="dark"]) .pill.danger { color: var(--danger-d); background: rgba(var(--urgent-rgb), .12); border-color: rgba(var(--urgent-rgb), .28); } :root:not([data-theme="dark"]) .pill.urgent { color: #B01F2A; background: rgba(var(--urgent-rgb), .14); border-color: rgba(var(--urgent-rgb), .42); } :root:not([data-theme="dark"]) .pill.urgent .dot { background: #E5343F; box-shadow: 0 0 6px rgba(var(--urgent-rgb), .5); } :root:not([data-theme="dark"]) .pill.neutral, :root:not([data-theme="dark"]) .tag { color: var(--ink-2); } :root:not([data-theme="dark"]) .msg.me { color: var(--ink); } :root:not([data-theme="dark"]) .paper { box-shadow: 0 10px 30px -12px rgba(30, 40, 70, .35); } /* ============================================================================ 2. SOMBRE = OPTION — :root[data-theme="dark"] Mapping nuit : les tokens nuit (--bg-0:#070A12, --bg-1:#0B1020…) sont les valeurs PAR DÉFAUT du :root de liquid-glass.css — rien à re-déclarer ici, on ne fait que pointer les variables Frappe dessus. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* — Fonds : la nuit LG — */ --background-color: var(--bg-0); /* fond de page Desk */ --bg-color: var(--bg-0); /* fond de page website (login…) */ --subtle-bg: var(--bg-1); --subtle-fg: var(--glass); /* — Surfaces : SOLIDES pour le chrome fonctionnel (lisibilité d'abord), le verre translucide est réservé aux cartes décoratives (§5) — */ --fg-color: var(--bg-2); /* cartes/panneaux/dropdowns Desk */ --card-bg: var(--bg-2); --navbar-bg: var(--glass-deep); /* verre teinté sombre — signature LG */ --fg-hover-color: var(--glass); /* survol : voile de verre */ --modal-bg: var(--bg-1); /* modale = surface SOLIDE (lisibilité) */ --popover-bg: var(--bg-1); --toast-bg: var(--bg-1); --awesomebar-focus-bg: var(--bg-2); --awesomplete-hover-bg: var(--glass-2); /* — Contrôles de formulaire — */ --control-bg: var(--glass); --control-bg-on-gray: var(--glass-2); --disabled-control-bg: var(--glass); --input-disabled-bg: var(--glass); --input-bg: var(--glass); /* — Encre (texte) — */ --text-color: var(--ink); --heading-color: var(--ink); --text-muted: var(--ink-2); --text-light: var(--ink-3); --disabled-text-color: var(--ink-3); --icon-stroke: var(--ink-2); /* — Lignes / hairlines : contour verre, jamais de gris opaque — */ --border-color: var(--glass-line); --dark-border-color: var(--glass-edge-soft); --table-border-color: var(--glass-line); --btn-group-border-color: var(--glass-line); --highlight-color: var(--glass); --yellow-highlight-color: var(--tint-ember); --shadow-inset: inset 0 -1px 0 var(--glass-line); /* — Accents : ember (action) / azure (information) — */ --primary: var(--ember); --primary-color: var(--ember); --btn-primary: var(--ember-2); --btn-secondary: var(--glass-2); --sidebar-select-color: var(--glass-2); --checkbox-color: var(--ember-2); --checkbox-focus-shadow: 0 0 0 2px var(--tint-ember); --switch-bg: var(--track); /* — Scrollbars (le Desk les tokenise ; LG style aussi les webkit-*) — */ --scrollbar-thumb-color: var(--glass-3); --scrollbar-track-color: var(--track); /* — Typo : polices auto-hébergées (zca-fonts.css) — */ --font-stack: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif; /* — Grille frappe-datatable (rapports/grids) : surfaces solides, hairlines verre — les comptables vivent dans ces grilles — */ --dt-border-color: var(--glass-line); --dt-text-color: var(--ink); --dt-text-light: var(--ink-3); --dt-cell-bg: var(--bg-1); --dt-header-cell-bg: var(--bg-2); --dt-selection-highlight-color: var(--tint-azure); --dt-toast-bg: var(--bg-1); } /* ============================================================================ 3. SILENT INTERFACE™ — chiffres en tabular-nums PARTOUT (les 2 thèmes) (colonnes de montants alignées ; Inter/JetBrains Mono supportent tnum) ========================================================================== */ body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } code, kbd, pre, samp { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; } /* ============================================================================ 4. NAVBAR — verre « chrome » : on voit le fond à travers, arête spéculaire en haut (signature Apple du design system). Token-driven : suit le thème automatiquement. ========================================================================== */ .navbar { -webkit-backdrop-filter: var(--lg-clear-lg); backdrop-filter: var(--lg-clear-lg); border-bottom: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge-soft); /* arête spéculaire */ } /* ============================================================================ 5. CARTES / WIDGETS (accueil, workspaces, dashboards) — verre dépoli. Décor discret : le contenu reste porté par les tokens d'encre. Repli : supprimer cette section rend des cartes solides (--card-bg). ========================================================================== */ .widget, .frappe-card { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--lg-frost); backdrop-filter: var(--lg-frost); box-shadow: inset 0 1px 0 var(--glass-edge-soft), 0 2px 6px rgba(0, 0, 0, .18); } .widget:hover, .frappe-card:hover { background: var(--glass-2); } /* ============================================================================ 6. SIDEBAR DESK — items en verre au survol / sélection (le fond de la sidebar reste le fond de page : pas de panneau opaque) ========================================================================== */ .desk-sidebar .desk-sidebar-item:hover, .sidebar-item-container .item-anchor:hover { background: var(--glass); } .desk-sidebar .desk-sidebar-item.selected, .sidebar-item-container .item-anchor.selected { background: var(--glass-2); box-shadow: inset 0 1px 0 var(--glass-edge-soft); /* arête spéculaire */ } /* ============================================================================ 7. LISTES — lignes calmes, survol en voile de verre, en-tête discret ========================================================================== */ .list-row-head { background: var(--bg-1); } .list-row:hover, .list-row-head:hover, .grid-row:hover { background: var(--glass); } /* ============================================================================ 8. FORMULAIRES — champs verre, focus azure (information), jamais criard ========================================================================== */ .form-control { border: 1px solid var(--glass-line); } .form-control:focus { border-color: var(--azure); box-shadow: 0 0 0 2px var(--tint-azure); } /* ============================================================================ 9. BOUTONS — primaire = dégradé ember signature ; défaut = verre ========================================================================== */ .btn-primary { background-image: var(--grad-ember); border-color: transparent; box-shadow: var(--sh-ember); } .btn-primary:hover, .btn-primary:focus { background-image: var(--grad-ember); filter: brightness(1.06); } .btn-default, .btn-secondary { background-color: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); } .btn-default:hover, .btn-secondary:hover { background-color: var(--glass-2); color: var(--ink); } /* ============================================================================ 10. MODALES / DROPDOWNS — surface solide (lisibilité d'abord), hairline verre + ombre profonde LG ========================================================================== */ .modal-content { background: var(--modal-bg); border: 1px solid var(--glass-line); box-shadow: var(--sh-2); } .dropdown-menu { background: var(--popover-bg); border: 1px solid var(--glass-line); box-shadow: var(--sh-1); } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--glass-2); color: var(--ink); } /* ============================================================================ 11. PAGES WEB (login, portail web Frappe) — carte de connexion en verre (le décor body clair vient du §1c ; nuit = liquid-glass.css) ========================================================================== */ .page-card, .login-content { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--lg-frost); backdrop-filter: var(--lg-frost); border-radius: var(--r-lg); box-shadow: var(--sh-1); /* inclut l'arête spéculaire (--rim) */ } /* ============================================================================ 12. TITRES DE PAGE — la voix Cormorant de l'oracle, sobrement (uniquement le titre principal ; le reste du Desk reste en Inter) ========================================================================== */ .page-title .title-text { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: -.01em; } /* Débranding ZCA (2026-07-12) : masque la signature "Built on Frappe" */ .footer-powered,.footer-powered a{display:none}