@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"); /* ============================================================ * OvoChain Design Tokens v1 * Brand signature: #00d3a6 (Ovo Mint) — NON-NÉGOCIABLE * * Themes: * - Premium (default) Apple-like sobre, mint + or pâle + platine * - Sovereign (alt) Institutional blue, mint + saphir * * Modes: * - light (auto via prefers-color-scheme: light) * - dark (auto via prefers-color-scheme: dark) * - forced via [data-theme-mode="light"|"dark"] sur * * Switch theme via [data-theme="premium"|"sovereign"] sur . * Default = premium (sans data-theme). * ============================================================ */ :root { /* ---------- Typography ---------- */ --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 48px; --fs-4xl: 64px; --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-base: 0; --tracking-wide: 0.08em; /* ---------- Brand signature (universel) ---------- */ --ovo-mint: #00d3a6; --ovo-mint-oklch: oklch(76% 0.15 170); --ovo-mint-deep: #008f72; /* sur fond clair */ --ovo-mint-glow: #66e6c3; /* sur fond sombre */ /* ---------- Spacing scale (8px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Radius ---------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-page: 600ms; /* ---------- Glass blur ---------- */ --glass-blur: blur(24px) saturate(140%); --glass-blur-strong: blur(40px) saturate(160%); /* ---------- Shell layout (barres fixes) ---------- */ --topnav-h: 56px; --bottombar-h: 60px; } /* ============================================================ * THEME PREMIUM (default) — light mode * Cream + Pearl + Mint signature + Or saturé + Platine * ============================================================ */ :root, :root[data-theme="premium"] { --bg-base: #f5f3ed; /* Cream */ --bg-surface: #ffffff; /* Pearl */ --bg-elevated: #ffffff; --bg-glass: rgba(255, 255, 255, 0.65); --text-primary: #1a1a22; /* Ink */ --text-secondary: #5a5a66; --text-muted: #8b8fa0; --text-on-mint: #1a1a22; --text-on-prime: #ffffff; --accent-primary: var(--ovo-mint); --accent-primary-hover: #00bf95; --accent-prime: #b8923a; /* Or saturé pour fond clair */ --accent-secondary: #c8c8d4; /* Platine */ --border-subtle: rgba(0, 0, 0, 0.06); --border-base: rgba(0, 0, 0, 0.08); --border-emphasis: rgba(0, 0, 0, 0.16); --border-glass: rgba(0, 0, 0, 0.06); --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); --shadow-medium: 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08); --shadow-mint: 0 8px 24px rgba(0, 211, 166, 0.18); --shadow-prime: 0 8px 24px rgba(184, 146, 58, 0.18); --gradient-hero: radial-gradient(at 50% 0%, rgba(0, 211, 166, 0.07), transparent 60%), radial-gradient(at 100% 100%, rgba(184, 146, 58, 0.06), transparent 60%), linear-gradient(180deg, #fafaf6 0%, #f5f3ed 100%); --gradient-cta: linear-gradient(135deg, var(--ovo-mint) 0%, var(--ovo-mint-deep) 100%); --gradient-prime: linear-gradient(135deg, #d4b46a 0%, #b8923a 100%); } /* ============================================================ * THEME PREMIUM — dark mode * Obsidian + Carbon + Mint signature + Or pâle + Platine * ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme-mode="light"]), :root[data-theme="premium"]:not([data-theme-mode="light"]) { --bg-base: #0d0d12; /* Obsidian */ --bg-surface: #1c1c26; /* Carbon */ --bg-elevated: #2a2a36; --bg-glass: rgba(255, 255, 255, 0.04); --text-primary: #f0f0f5; --text-secondary: #a8acb8; --text-muted: #6a6e7a; --text-on-mint: #0d0d12; --text-on-prime: #0d0d12; --accent-prime: #d4b46a; /* Or pâle pour fond sombre */ --accent-secondary: #c8c8d4; --border-subtle: rgba(255, 255, 255, 0.04); --border-base: rgba(255, 255, 255, 0.08); --border-emphasis: rgba(255, 255, 255, 0.16); --border-glass: rgba(255, 255, 255, 0.12); --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3); --shadow-medium: 0 4px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5); --shadow-mint: 0 8px 24px rgba(0, 211, 166, 0.30); --gradient-hero: radial-gradient(at 50% 0%, rgba(0, 211, 166, 0.10), transparent 60%), radial-gradient(at 100% 100%, rgba(212, 180, 106, 0.06), transparent 60%), linear-gradient(180deg, #0d0d12 0%, #060608 100%); } } /* Forced dark mode override (data-theme-mode="dark") */ :root[data-theme-mode="dark"], :root[data-theme="premium"][data-theme-mode="dark"] { --bg-base: #0d0d12; --bg-surface: #1c1c26; --bg-elevated: #2a2a36; --bg-glass: rgba(255, 255, 255, 0.04); --text-primary: #f0f0f5; --text-secondary: #a8acb8; --text-muted: #6a6e7a; --text-on-mint: #0d0d12; --text-on-prime: #0d0d12; --accent-prime: #d4b46a; --accent-secondary: #c8c8d4; --border-subtle: rgba(255, 255, 255, 0.04); --border-base: rgba(255, 255, 255, 0.08); --border-emphasis: rgba(255, 255, 255, 0.16); --border-glass: rgba(255, 255, 255, 0.12); --gradient-hero: radial-gradient(at 50% 0%, rgba(0, 211, 166, 0.10), transparent 60%), radial-gradient(at 100% 100%, rgba(212, 180, 106, 0.06), transparent 60%), linear-gradient(180deg, #0d0d12 0%, #060608 100%); } /* ============================================================ * THEME SOVEREIGN (alt) — light mode * Sky Mist + Pearl + Mint + Saphir Deep + Ink * ============================================================ */ :root[data-theme="sovereign"] { --bg-base: #e3eaf5; /* Sky Mist */ --bg-surface: #ffffff; /* Pearl */ --bg-elevated: #ffffff; --bg-glass: rgba(255, 255, 255, 0.6); --text-primary: #0a0a18; --text-secondary: #1a2b6e; --text-muted: #6680a0; --text-on-mint: #0a1a3d; --text-on-prime: #ffffff; --accent-primary: var(--ovo-mint); --accent-primary-hover: #00bf95; --accent-prime: #1a2b6e; /* Saphir Deep */ --accent-secondary: #66e6c3; --border-subtle: rgba(26, 43, 110, 0.06); --border-base: rgba(26, 43, 110, 0.12); --border-emphasis: rgba(26, 43, 110, 0.24); --border-glass: rgba(26, 43, 110, 0.12); --shadow-soft: 0 1px 2px rgba(26,43,110,0.06), 0 4px 12px rgba(26,43,110,0.08); --shadow-medium: 0 4px 8px rgba(26,43,110,0.08), 0 12px 32px rgba(26,43,110,0.12); --shadow-mint: 0 8px 24px rgba(0, 211, 166, 0.18); --shadow-prime: 0 8px 24px rgba(26, 43, 110, 0.16); --gradient-hero: radial-gradient(at 100% 0%, rgba(26, 43, 110, 0.08), transparent 60%), radial-gradient(at 0% 100%, rgba(0, 211, 166, 0.08), transparent 55%), linear-gradient(180deg, #f0f4fa 0%, #e3eaf5 100%); --gradient-cta: linear-gradient(135deg, var(--ovo-mint) 0%, var(--ovo-mint-deep) 100%); --gradient-prime: linear-gradient(135deg, #2a3e8e 0%, #1a2b6e 100%); } /* ============================================================ * THEME SOVEREIGN — dark mode * Abyss + Saphir + Mint + Mint Glow + Snow * ============================================================ */ @media (prefers-color-scheme: dark) { :root[data-theme="sovereign"]:not([data-theme-mode="light"]) { --bg-base: #050a18; /* Abyss */ --bg-surface: #0a1a3d; /* Saphir */ --bg-elevated: #102348; --bg-glass: rgba(10, 26, 61, 0.4); --text-primary: #e8eef5; --text-secondary: #a0b4d0; --text-muted: #6680a0; --text-on-mint: #050a18; --text-on-prime: #050a18; --accent-prime: #66e6c3; /* Mint Glow comme accent prime en dark sovereign */ --accent-secondary: #a0b4d0; --border-subtle: rgba(255, 255, 255, 0.04); --border-base: rgba(255, 255, 255, 0.08); --border-emphasis: rgba(255, 255, 255, 0.16); --border-glass: rgba(255, 255, 255, 0.12); --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3); --shadow-medium: 0 4px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5); --shadow-mint: 0 8px 24px rgba(0, 211, 166, 0.35); --gradient-hero: radial-gradient(at 30% 0%, rgba(0, 211, 166, 0.16), transparent 55%), radial-gradient(at 80% 100%, rgba(10, 26, 61, 0.8), transparent 65%), linear-gradient(180deg, #050a18 0%, #02050d 100%); } } /* Forced dark mode override pour Sovereign */ :root[data-theme="sovereign"][data-theme-mode="dark"] { --bg-base: #050a18; --bg-surface: #0a1a3d; --bg-elevated: #102348; --bg-glass: rgba(10, 26, 61, 0.4); --text-primary: #e8eef5; --text-secondary: #a0b4d0; --text-muted: #6680a0; --text-on-mint: #050a18; --text-on-prime: #050a18; --accent-prime: #66e6c3; --accent-secondary: #a0b4d0; --border-subtle: rgba(255, 255, 255, 0.04); --border-base: rgba(255, 255, 255, 0.08); --border-emphasis: rgba(255, 255, 255, 0.16); --border-glass: rgba(255, 255, 255, 0.12); --gradient-hero: radial-gradient(at 30% 0%, rgba(0, 211, 166, 0.16), transparent 55%), radial-gradient(at 80% 100%, rgba(10, 26, 61, 0.8), transparent 65%), linear-gradient(180deg, #050a18 0%, #02050d 100%); } /* ============================================================ * Utilities (optionnel, peut être déplacé dans utility.css) * ============================================================ */ body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--fs-base); line-height: var(--lh-base); } /* ── Shell layout ────────────────────────────────────────────────── * .app-content est le seul slot pour les pages. * Les pages (
) ne connaissent pas le shell : * elles reçoivent simplement le bon padding via ce conteneur. * TopNav (fixed top --topnav-h) + BottomBar (fixed bottom --bottombar-h) * sont toujours dans le DOM, gèrent leur propre visibilité en interne. * ────────────────────────────────────────────────────────────────── */ .app-content { min-height: 100dvh; /* TopNav est sticky (dans le flux) : pas de padding-top nécessaire. BottomBar est fixed bottom:0 (hors flux) : padding-bottom évite que le bas des pages soit caché sous la barre. */ padding-bottom: var(--bottombar-h); box-sizing: border-box; } /* Page introuvable */ .not-found { padding: var(--space-7) var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--fs-lg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); font-weight: 700; color: var(--text-primary); } h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); } h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); } a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-primary-hover); } .glass { background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--space-5); } .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: 10px 20px; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); text-decoration: none; } .btn-primary { background: var(--gradient-cta); color: var(--text-on-mint); box-shadow: var(--shadow-mint); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 211, 166, 0.32); } .btn-prime { background: var(--gradient-prime); color: var(--text-on-prime); } .btn-ghost { background: transparent; border: 1px solid var(--accent-prime); color: var(--accent-prime); } .btn-ghost:hover { background: var(--accent-prime); color: var(--text-on-prime); } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Composants OvoChain v1 */ .glass { background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--space-5); } .ovo-input { display: flex; flex-direction: column; gap: 4px; } .ovo-input-label { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 500; } .ovo-input input { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-base); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); transition: border-color var(--dur-fast) var(--ease-out); } .ovo-input input:focus { outline: 2px solid var(--ovo-mint); outline-offset: 2px; border-color: var(--ovo-mint); } /* Textarea — même style que .ovo-input input */ .ovo-input-textarea { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-base); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); transition: border-color var(--dur-fast) var(--ease-out); resize: vertical; min-height: 80px; } .ovo-input-textarea:focus { outline: 2px solid var(--ovo-mint); outline-offset: 2px; border-color: var(--ovo-mint); } /* Conteneur du formulaire généré par FormFromSchema */ .form-schema { display: flex; flex-direction: column; gap: var(--space-3); } .ovo-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out); } .ovo-modal-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; } .ovo-modal { max-width: 480px; width: 90%; max-height: 80vh; overflow: auto; } .ovo-modal-title { margin-bottom: var(--space-4); } /* ── Profil coulissant (ProfileSlideOver) — toujours monté, slide via .open ── */ .profile-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); z-index: 1100; display: flex; justify-content: flex-end; align-items: stretch; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out); } .profile-sheet-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; } .profile-sheet { position: relative; width: 420px; max-width: 92vw; height: 100%; border-radius: 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-spring, var(--ease-out)); } .profile-sheet-backdrop.open .profile-sheet { transform: translateX(0); } .profile-sheet-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-glass); color: var(--text-secondary); cursor: pointer; font-size: 14px; transition: border-color var(--dur-fast) var(--ease-out); } .profile-sheet-close:hover { border-color: var(--ovo-mint); color: var(--text-primary); } .profile-sheet-avatar { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; background: var(--bg-surface); border: 1px solid var(--border-glass); color: var(--ovo-mint); } .profile-sheet-name { font-size: 1.5rem; margin: 0; } .profile-sheet-sub { color: var(--text-secondary); margin: 0; } .profile-sheet-row { display: flex; gap: var(--space-3); align-items: center; } .profile-sheet-label { font-size: var(--fs-sm); color: var(--text-secondary); } .profile-sheet-id { font-family: monospace; font-size: var(--fs-sm); color: var(--text-primary); } .profile-sheet-badge { margin-top: var(--space-2); } .profile-sheet-badge .anchor-ok { color: var(--ovo-mint); font-weight: 600; } .profile-sheet-badge .anchor-no { color: #e63946; font-weight: 600; } .profile-sheet-badge .anchor-pending { color: var(--text-secondary); } /* Résultats de recherche cliquables */ .bc-search-result-item { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); } .bc-search-result-item:hover { transform: translateX(3px); } /* Mobile (≤ 640px) : bottom-sheet plein largeur, glisse du bas */ @media (max-width: 640px) { .profile-sheet-backdrop { justify-content: stretch; align-items: flex-end; } .profile-sheet { width: 100%; max-width: 100%; height: auto; max-height: 85vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); } .profile-sheet-backdrop.open .profile-sheet { transform: translateY(0); } } .ovo-toast { padding: 12px 16px; border-radius: var(--radius-md); background: var(--bg-surface); border-left: 3px solid; box-shadow: var(--shadow-medium); font-size: var(--fs-sm); margin-bottom: 8px; } .ovo-toast-info { border-left-color: var(--accent-secondary); } .ovo-toast-success { border-left-color: var(--ovo-mint); } .ovo-toast-warning { border-left-color: #f4a261; } .ovo-toast-error { border-left-color: #e63946; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .trust-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; font-family: var(--font-display); } .trust-dot { width: 8px; height: 8px; border-radius: 50%; } .trust-pending { background: rgba(150,150,160,0.15); color: #6a6e7a; } .trust-pending .trust-dot { background: #c8c8d4; } .trust-soft { background: rgba(244,162,97,0.18); color: #b8923a; } .trust-soft .trust-dot { background: #f4a261; } .trust-verified { background: rgba(132,204,22,0.18); color: #65a30d; } .trust-verified .trust-dot { background: #84cc16; } .trust-trusted { background: rgba(0,211,166,0.18); color: var(--ovo-mint); box-shadow: 0 0 0 1px var(--ovo-mint); } .trust-trusted .trust-dot { background: var(--ovo-mint); box-shadow: 0 0 8px var(--ovo-mint); } .trust-self { background: rgba(212,180,106,0.18); color: var(--accent-prime); box-shadow: 0 0 0 1px var(--accent-prime); } .trust-self .trust-dot { background: var(--accent-prime); box-shadow: 0 0 8px var(--accent-prime); } .contact-card { padding: var(--space-4); cursor: pointer; transition: transform var(--dur-fast); } .contact-card:hover { transform: translateY(-2px); } .contact-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .contact-name { font-weight: 600; } .contact-card-meta { display: flex; gap: 12px; font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); } .vaultbox-card { padding: var(--space-5); cursor: pointer; transition: transform var(--dur-fast); } .vaultbox-card:hover { transform: translateY(-2px); } .vaultbox-name { margin-bottom: var(--space-3); } .vaultbox-stats { display: flex; gap: 16px; font-size: var(--fs-sm); color: var(--text-secondary); } .theme-switcher { display: flex; gap: 8px; } .hero-gradient { min-height: 100vh; background: var(--gradient-hero); display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--space-5); } .page-onboarding .onboarding-stack { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: var(--space-4); } /* Onboarding : hero EN HAUT (empilé vertical), pas en colonne gauche. .hero-gradient est flex-row par défaut → le hero mangeait la largeur. Ici : colonne, contenu collé en haut, centré horizontalement. Mobile-friendly. */ .page-onboarding.hero-gradient { flex-direction: column; justify-content: flex-start; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-4) var(--space-8); } .page-onboarding .onboarding-hero { padding-bottom: var(--space-2); } .page-onboarding .glass { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .page-onboarding h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); } .page-onboarding h2 { font-size: var(--fs-lg); margin-bottom: var(--space-2); } .page-onboarding .subtitle { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; } .page-onboarding .error { color: #e63946; font-size: var(--fs-sm); margin: 0; } .page-onboarding .hint { color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--space-2); } .onboarding-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-xs); font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; text-align: center; margin: var(--space-2) 0; } .onboarding-divider::before, .onboarding-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-base); } .file-drop-zone { display: block; border: 2px dashed var(--border-emphasis); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; text-align: center; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .file-drop-zone:hover { border-color: var(--ovo-mint); } .file-drop-zone.active { border-color: var(--ovo-mint); background: rgba(0,211,166,0.06); } .file-drop-zone.has-file { border-color: var(--ovo-mint); background: rgba(0,211,166,0.04); } .file-drop-inner { color: var(--text-secondary); font-size: var(--fs-sm); } .file-drop-zone .file-picked { color: var(--ovo-mint); font-weight: 600; } .file-drop-zone .file-hint { color: var(--text-muted); } .page-dashboard { max-width: 960px; margin: 0 auto; padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); } .page-header h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-1); } .self-card { padding: var(--space-6); } .self-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .self-name { font-size: var(--fs-xl); margin: 0; } .self-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); } .self-fields dt { color: var(--text-muted); font-weight: 600; } .self-fields dd { margin: 0; } .self-fields code { font-family: var(--font-mono); color: var(--ovo-mint); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); } .stats-grid .glass { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .stat-label { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; font-weight: 500; } .stat-num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--ovo-mint); margin: 0; line-height: 1; } .stat-link { font-size: var(--fs-sm); color: var(--text-secondary); text-decoration: none; align-self: flex-start; transition: color var(--dur-fast); } .stat-link:hover { color: var(--ovo-mint); } .quick-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); } .quick-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-glass); border: 1px solid var(--border-glass); backdrop-filter: var(--glass-blur); color: var(--text-primary); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base); } .quick-nav-item:hover { transform: translateY(-2px); border-color: var(--ovo-mint); } .quick-nav-icon { font-size: var(--fs-lg); } .page-settings { max-width: 720px; margin: 0 auto; padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); } .page-settings .glass { display: flex; flex-direction: column; gap: var(--space-3); } .page-settings h3 { margin-bottom: var(--space-2); } .settings-help { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-2); } .settings-note { font-size: var(--fs-xs); color: var(--accent-prime); margin-top: var(--space-2); font-style: italic; } .settings-success { font-size: var(--fs-sm); color: var(--ovo-mint); padding: var(--space-3); background: rgba(0,211,166,0.06); border-left: 3px solid var(--ovo-mint); border-radius: var(--radius-md); } .about-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-4); font-size: var(--fs-sm); } .about-fields dt { color: var(--text-muted); font-weight: 600; } .about-fields dd code { font-family: var(--font-mono); color: var(--ovo-mint); } .theme-switcher select { padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-base); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-body); } /* Animations OvoChain v1 */ /* ============================================================ * TopNav (barre persistante interior pages) * ============================================================ */ .topnav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); margin: 0 0 var(--space-5) 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-top: none; border-left: none; border-right: none; } .topnav-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--text-primary); text-decoration: none; letter-spacing: var(--tracking-tight); } .topnav-logo { color: var(--ovo-mint); font-size: var(--fs-xl); line-height: 1; } .topnav-links { display: flex; gap: var(--space-2); } .topnav-link { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); color: var(--text-secondary); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); transition: color var(--dur-fast), background var(--dur-fast); } .topnav-link:hover { color: var(--ovo-mint); background: rgba(0,211,166,0.06); } .topnav-self { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-cta); color: var(--text-on-mint); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); transition: transform var(--dur-base) var(--ease-spring); } .topnav-self:hover { transform: scale(1.08); } .topnav-avatar { line-height: 1; } @media (max-width: 720px) { .topnav { padding: var(--space-2) var(--space-4); flex-wrap: wrap; } .topnav-links { gap: 0; flex-wrap: wrap; } .topnav-link { padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); } } /* ============================================================ * IntroLanding (feature_add_contact_via_intro) * ============================================================ */ .page-intro-landing { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-7) var(--space-5); } .page-intro-landing .glass { max-width: 560px; width: 100%; padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); } .page-intro-landing h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--space-2); } .page-intro-landing .subtitle { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-base); margin: 0; } .intro-title-error { color: #e63946; } .error-detail { font-family: var(--font-mono); font-size: var(--fs-xs); background: rgba(230,57,70,0.08); border-left: 3px solid #e63946; padding: var(--space-3); border-radius: var(--radius-md); word-break: break-all; } .intro-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border-base); border-top-color: var(--ovo-mint); border-radius: 50%; animation: ovo-spin 0.8s linear infinite; margin: var(--space-4) auto; } @keyframes ovo-spin { to { transform: rotate(360deg); } } .intro-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); } .intro-fields dt { color: var(--text-muted); font-weight: 600; } .intro-fields dd { margin: 0; } .intro-fields code { font-family: var(--font-mono); color: var(--ovo-mint); } .trust-note { font-size: var(--fs-sm); color: var(--text-secondary); padding: var(--space-3); background: var(--bg-glass); border-radius: var(--radius-md); border-left: 3px solid var(--accent-prime); } .trust-pending-label { color: #6a6e7a; } .intro-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); } .intro-actions .btn { flex: 1; } /* ============================================================ * ContactsPool list * ============================================================ */ .page-contacts { max-width: 1024px; margin: 0 auto; padding: var(--space-7) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .page-help { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; } .filter-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; } .filter-chip { background: transparent; border: 1px solid var(--border-base); padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-2); transition: all var(--dur-fast); } .filter-chip:hover { border-color: var(--ovo-mint); color: var(--ovo-mint); } .filter-chip.active { background: var(--bg-surface); border-color: var(--ovo-mint); color: var(--text-primary); } .contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .contacts-grid a { text-decoration: none; color: inherit; } .empty-state { color: var(--text-muted); text-align: center; padding: var(--space-5); } /* ============================================================ * ContactsPool — recherche * ============================================================ */ .contacts-search input { width: 100%; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-base); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .contacts-search input:focus { outline: none; border-color: var(--ovo-mint); box-shadow: 0 0 0 3px rgba(0,211,166,0.15); } .empty-state-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-7) var(--space-5); text-align: center; } .empty-state-box p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 340px; line-height: var(--lh-loose); margin: 0; } /* ============================================================ * Page /me — identité souveraine * ============================================================ */ .page-me { max-width: 720px; margin: 0 auto; padding: var(--space-7) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .me-hero { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-4); } .me-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--gradient-cta); color: var(--text-on-mint); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); flex-shrink: 0; box-shadow: var(--shadow-mint); } .me-hero-info { display: flex; flex-direction: column; gap: var(--space-2); } .me-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); margin-top: var(--space-2); } .me-copied { color: var(--ovo-mint); font-size: var(--fs-sm); font-weight: 600; align-self: center; } .me-wallet { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); } /* ============================================================ * BCProfile form — page /me * ============================================================ */ .bcprofile-form { display: flex; flex-direction: column; gap: var(--space-4); } .bcprofile-form h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; margin: 0; } .bcprofile-subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .form-full { grid-column: 1 / -1; } @media (max-width: 540px) { .form-grid-2 { grid-template-columns: 1fr; } .form-full { grid-column: 1; } } .form-row-check { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; } .form-row-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ovo-mint); flex-shrink: 0; cursor: pointer; } .form-row-check label { font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; line-height: var(--lh-normal); } .form-feedback-row { display: flex; gap: var(--space-3); align-items: center; min-height: 1.4em; } .form-feedback-ok { color: var(--ovo-mint); font-size: var(--fs-sm); font-weight: 600; } .form-feedback-err { color: #e63946; font-size: var(--fs-sm); } .form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* ── Barre agrégat basse — toujours visible ──────────────────────── */ .bottom-aggregate-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 42px; display: flex; align-items: center; justify-content: center; gap: var(--space-6); background: var(--surface-glass); backdrop-filter: blur(16px) saturate(160%); border-top: 1px solid var(--border-glass); cursor: pointer; transition: background 0.15s; user-select: none; } .bottom-aggregate-bar:hover { background: var(--surface-raised); } .bottom-aggregate-bar .agg-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-secondary); } .bottom-aggregate-bar .agg-label { color: var(--text-muted); } .bottom-aggregate-bar .agg-value { font-weight: 600; color: var(--text-primary); } .bottom-aggregate-bar .agg-sep { color: var(--border-glass); } /* Agrégat détaillé (glass montant) */ .aggregate-detail-panel { pointer-events: none; position: fixed; bottom: 42px; left: 0; right: 0; z-index: 201; max-height: 60vh; overflow-y: auto; background: var(--surface-glass); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border-glass); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 -4px 32px rgba(0,0,0,0.2); } .aggregate-detail-panel--open { transform: translateY(0); pointer-events: auto; } .aggregate-detail-panel .panel-inner { padding: var(--space-4); } .aggregate-detail-panel h3 { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--space-3); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .aggregate-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .aggregate-table th { text-align: right; color: var(--text-muted); font-weight: 500; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border-glass); } .aggregate-table th:first-child { text-align: left; } .aggregate-table td { text-align: right; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--border-glass); color: var(--text-secondary); } .aggregate-table td:first-child { text-align: left; } .aggregate-table tr.total-row td { font-weight: 700; color: var(--text-primary); } .profile-color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); flex-shrink: 0; } /* ── GlassPanel — composant réutilisable, 4 directions ───────────── */ .glass-panel { position: fixed; z-index: 201; background: var(--surface-glass); backdrop-filter: blur(var(--gp-blur, 20px)) saturate(180%); border: 1px solid var(--border-glass); box-shadow: 0 8px 40px rgba(0,0,0,0.25); transition: transform var(--gp-duration, 300ms) cubic-bezier(0.4,0,0.2,1); pointer-events: none; overflow-y: auto; } .glass-panel--open { transform: translate(0,0) !important; pointer-events: auto; } .glass-panel--bottom { bottom: 0; left: 0; right: 0; max-height: var(--gp-size, 82%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; transform: translateY(100%); } .glass-panel--top { top: 0; left: 0; right: 0; max-height: var(--gp-size, 60%); padding-top: 56px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: none; transform: translateY(-100%); } .glass-panel--left { top: 0; bottom: 0; left: 0; width: var(--gp-size, 85%); max-width: 480px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-left: none; transform: translateX(-100%); } .glass-panel--right { top: 0; bottom: 0; right: 0; width: var(--gp-size, 75%); max-width: 480px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-right: none; transform: translateX(100%); } @media (min-width: 600px) { .glass-panel--bottom { left: auto; right: 0; width: 420px; border-radius: var(--radius-lg) 0 0 0; max-height: 100vh; border-right: none; } } .glass-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .glass-panel-overlay--open { opacity: 1; pointer-events: all; } /* ── Sélecteur de profil (contenu) ───────────────────────────────── */ .profile-selector-inner { margin: 0 auto; max-width: 480px; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .profile-selector-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0; } .profile-selector-list { display: flex; flex-direction: column; gap: var(--space-2); } .profile-selector-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-glass); background: none; cursor: pointer; width: 100%; text-align: left; transition: background 0.15s, border-color 0.15s; } .profile-selector-card:hover { background: var(--surface-raised); } .profile-selector-card.active { border-color: var(--profile-color, var(--ovo-mint)); background: color-mix(in srgb, var(--profile-color, var(--ovo-mint)) 8%, transparent); } .profile-selector-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; color: #fff; background: var(--profile-color, var(--ovo-mint)); } .profile-selector-info { flex: 1; min-width: 0; } .profile-selector-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); } .profile-selector-slot { font-size: var(--fs-xs); color: var(--text-muted); } .profile-selector-badge { font-size: var(--fs-xs); color: var(--ovo-mint); font-weight: 600; } .profile-selector-add { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); border-radius: var(--radius-md); border: 1px dashed var(--border-glass); background: none; cursor: pointer; width: 100%; text-align: left; transition: color 0.15s, border-color 0.15s; } .profile-selector-add:hover { color: var(--ovo-mint); border-color: var(--ovo-mint); } /* Ajustement contenu : laisser 42px en bas pour la barre agrégat */ .page-dashboard, .page-me, .page-settings, .page-contacts, .page-vaultboxes { padding-bottom: 58px; } /* ── Settings Panel (contenu) ───────────────────────────────────── */ .settings-panel-header { position: sticky; top: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-glass); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border-glass); z-index: 1; } .settings-panel-handle { display: none; width: 36px; height: 4px; border-radius: 2px; background: var(--border-glass); flex-shrink: 0; } @media (max-width: 600px) { .settings-panel-handle { display: block; } } .settings-panel-title { flex: 1; font-size: var(--fs-base); font-weight: 600; margin: 0; color: var(--text-primary); } .settings-panel-close { background: none; border: 1px solid var(--border-glass); border-radius: var(--radius-sm); color: var(--text-secondary); width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--fs-sm); transition: color 0.15s, border-color 0.15s; } .settings-panel-close:hover { color: var(--text-primary); border-color: var(--ovo-mint); } .settings-panel-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); } .settings-section { display: flex; flex-direction: column; gap: var(--space-3); } .settings-section-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0; } .settings-help { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; line-height: var(--lh-normal); } .settings-help--muted { color: var(--text-muted); font-style: italic; } .settings-help--warn { color: #f4a261; } .settings-success { color: var(--ovo-mint); font-size: var(--fs-sm); font-weight: 600; } .settings-select { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); background: var(--surface-glass); color: var(--text-primary); font-size: var(--fs-sm); width: 100%; } .settings-select--disabled { opacity: 0.45; cursor: not-allowed; } /* TopNav — bouton engrenage */ .topnav-settings-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: 1.05rem; transition: color 0.15s; line-height: 1; } .topnav-settings-btn:hover { color: var(--ovo-mint); } /* ───────────────────────────────────────────────────────────────────── * Onboarding hero (text:welcome, h1+p hors box, pleine largeur) * ───────────────────────────────────────────────────────────────────── */ .onboarding-hero { width: 100%; padding: var(--space-6, 32px) var(--space-4, 16px) var(--space-4, 16px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-onboarding-title { font-size: clamp(28px, 5vw, 48px); font-weight: 700; margin: 0 0 var(--space-2, 8px); color: var(--text-primary); letter-spacing: -0.02em; text-align: center; } .page-onboarding-subtitle { font-size: var(--fs-lg, 16px); color: var(--text-secondary); margin: 0; max-width: 600px; text-align: center; } /* ───────────────────────────────────────────────────────────────────── * Container générique CollapsibleGlass — transition base/expanded * ───────────────────────────────────────────────────────────────────── */ .collapsible-glass { display: flex; flex-direction: column; padding: var(--space-4, 16px); border-radius: var(--radius-lg, 12px); transition: max-height 250ms ease-out, padding 250ms ease-out; overflow: hidden; } .collapsible-glass--expanded { /* extension visuelle si besoin */ } /* ───────────────────────────────────────────────────────────────────── * BcSearchBox — barre style Google (input + bouton search) * ───────────────────────────────────────────────────────────────────── */ .bc-search-bar { display: flex; align-items: stretch; gap: var(--space-2, 8px); } .bc-search-input { flex: 1; min-width: 0; padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--border-glass); border-radius: var(--radius-md, 8px); background: var(--surface-glass); color: var(--text-primary); font-size: var(--fs-md, 14px); outline: none; transition: border-color 150ms; } .bc-search-input:focus { border-color: var(--ovo-mint); box-shadow: 0 0 0 3px rgba(0, 211, 166, 0.15); } .bc-search-submit { flex-shrink: 0; white-space: nowrap; padding: var(--space-3, 12px) var(--space-4, 16px); } .bc-search-clear { flex-shrink: 0; padding: var(--space-2, 8px) var(--space-3, 12px); font-size: 1rem; line-height: 1; } .bc-search-expanded { margin-top: var(--space-4, 16px); display: flex; flex-direction: column; gap: var(--space-3, 12px); } .bc-search-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; padding: var(--space-2, 8px) 0; font-size: var(--fs-sm, 13px); color: var(--text-secondary); border-bottom: 1px solid var(--border-glass); } .bc-search-zkp-badge { padding: var(--space-1, 4px) var(--space-2, 8px); border-radius: var(--radius-sm, 4px); background: rgba(0, 211, 166, 0.08); color: var(--ovo-mint); font-weight: 600; font-size: var(--fs-xs, 11px); } .bc-search-sort { display: flex; align-items: center; gap: var(--space-2, 8px); font-size: var(--fs-sm, 13px); } .bc-search-sort select { padding: var(--space-1, 4px) var(--space-2, 8px); border: 1px solid var(--border-glass); border-radius: var(--radius-sm, 4px); background: var(--surface-glass); color: var(--text-primary); } .bc-search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1, 4px); } .bc-search-result-item { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "kind title timestamp" "kind subtitle subtitle"; gap: var(--space-1, 4px) var(--space-3, 12px); padding: var(--space-3, 12px); border-radius: var(--radius-md, 8px); background: var(--surface-glass); cursor: pointer; transition: background 150ms; } .bc-search-result-item:hover { background: rgba(0, 211, 166, 0.06); } .bc-search-result-kind { grid-area: kind; font-size: 1.5rem; align-self: center; } .bc-search-result-title { grid-area: title; font-weight: 600; color: var(--text-primary); } .bc-search-result-subtitle { grid-area: subtitle; color: var(--text-secondary); font-size: var(--fs-sm, 13px); } .bc-search-result-timestamp{ grid-area: timestamp; color: var(--text-muted); font-size: var(--fs-xs, 11px); } .bc-search-empty, .bc-search-error { padding: var(--space-4, 16px); text-align: center; color: var(--text-secondary); font-style: italic; } .bc-search-error { color: var(--color-error, #e53935); font-style: normal; } /* ───────────────────────────────────────────────────────────────────── * Sections cont onboarding (creer-id / importer-id) — utilisent * CollapsibleGlass qui pose .collapsible-glass + .glass. Les classes * internes -base / -expanded gèrent le layout interne. * ───────────────────────────────────────────────────────────────────── */ .cont.creer-id, .cont.importer-id { display: flex; flex-direction: column; gap: var(--space-3, 12px); padding: var(--space-4, 16px) var(--space-5, 24px); } .creer-id-base, .importer-id-base { display: flex; flex-direction: column; gap: var(--space-3, 12px); } .creer-id-expanded, .importer-id-expanded { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); padding-top: var(--space-4, 16px); border-top: 1px solid var(--border-glass); animation: collapsible-slide-down 250ms ease-out; } .creer-id-secure { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding: var(--space-3, 12px); background: rgba(0, 211, 166, 0.04); border-radius: var(--radius-md, 8px); border: 1px solid var(--border-glass); } @keyframes collapsible-slide-down { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { opacity: 1; transform: translateY(0); max-height: 2000px; } } /* widget:lang_switcher (FR | EN) — composant standalone monté dans le shell. Bordure et shadow explicites (pas --border-glass qui est trop faible en light theme et rend le switcher quasi-invisible sur l'hero-gradient). */ .lang-switcher { display: inline-flex; align-items: center; gap: 0; border-radius: var(--radius-sm); border: 1px solid rgba(0, 0, 0, 0.18); overflow: hidden; line-height: 1; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); } @media (prefers-color-scheme: dark) { .lang-switcher { border-color: rgba(255, 255, 255, 0.18); background: rgba(20, 20, 28, 0.78); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40); } } /* Variante floating (montée en standalone dans App, visible y compris sur les routes publiques où la TopNav est cachée). */ .lang-switcher-floating { position: fixed; top: var(--space-3, 12px); right: var(--space-3, 12px); z-index: 100; /* < LockOverlay (9999), > app-content (auto) */ } @media (min-width: 768px) { .lang-switcher-floating { top: var(--space-4, 16px); right: var(--space-4, 16px); } } .lang-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; transition: background 0.15s, color 0.15s; } .lang-btn + .lang-btn { border-left: 1px solid var(--border-glass); } .lang-btn:hover { color: var(--ovo-mint); } .lang-btn-active { background: var(--ovo-mint); color: var(--text-on-mint, #0a0a0a); } .lang-btn-active:hover { color: var(--text-on-mint, #0a0a0a); } /* Photo picker */ .photo-picker { display: flex; flex-direction: column; gap: var(--space-2); } .photo-picker-label { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 500; } .photo-picker-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .photo-preview-empty { width: 56px; height: 56px; flex-shrink: 0; border: 2px dashed var(--border-glass); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); } .photo-preview-img { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-md); } .photo-picker-btn { cursor: pointer; } /* Identity codes — ULID + pubkey entièrement visibles */ .identity-code { display: block; font-size: var(--fs-xs); word-break: break-all; user-select: all; cursor: text; color: var(--text-secondary); background: var(--surface-raised); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-glass); line-height: 1.6; } /* ── Panneau générique : header + bouton fermer ───────────────────── */ .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .panel-header h3 { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .panel-close-btn { background: none; border: none; cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; line-height: 1; } .panel-close-btn:hover { color: var(--text-primary); background: var(--surface-raised); } /* ── Lignes agrégat par profil ───────────────────────────────────── */ .agg-profile-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-glass); font-size: var(--fs-sm); } .agg-profile-row:last-child { border-bottom: none; } .agg-profile-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .agg-profile-name { flex: 1; color: var(--text-primary); font-weight: 500; } .agg-profile-msgs { font-size: var(--fs-xs); color: var(--ovo-mint); min-width: 42px; text-align: right; } .agg-profile-ovo { font-size: var(--fs-xs); color: var(--text-muted); min-width: 72px; text-align: right; } /* ── Ligne totaux en bas du panneau agrégat ──────────────────────── */ .agg-totals-row { display: flex; gap: var(--space-4); justify-content: space-between; border-top: 1px solid var(--border-glass); margin-top: var(--space-3); padding-top: var(--space-3); } .agg-total-item { display: flex; flex-direction: column; gap: 2px; } .agg-total-item .agg-label { font-size: var(--fs-xs); color: var(--text-muted); } .agg-total-item .agg-value { font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); } /* ── TopNav logo SVG ─────────────────────────────────────────────── */ .topnav-logo-img { width: 24px; height: auto; flex-shrink: 0; /* Le SVG est sur fond transparent — inversion auto en dark mode */ } /* ── TopNav logo-bouton (remplace le lien ) ───────────────────── */ .topnav-brand-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-weight: 600; font-size: var(--fs-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: opacity 0.15s; font-family: inherit; } .topnav-brand-btn:hover { opacity: 0.75; } /* ── OVO Explorer — Google-style ─────────────────────────────────── */ .page-explorer { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--space-6) var(--space-4) var(--space-8); gap: 0; } /* Hero : logo + titre centré */ .explorer-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: clamp(48px, 12vh, 120px); margin-bottom: var(--space-5); } .explorer-logo { width: 56px; height: auto; } .explorer-title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-primary); margin: 0; letter-spacing: -0.5px; } /* Barre de recherche */ .explorer-search-wrap { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .explorer-search-bar { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-base); border: 1.5px solid var(--border-glass); border-radius: 9999px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: border-color 0.15s, box-shadow 0.15s; } .explorer-search-bar:focus-within { border-color: var(--ovo-mint); box-shadow: 0 2px 16px color-mix(in srgb, var(--ovo-mint) 18%, transparent); } .explorer-search-icon { font-size: 18px; opacity: 0.5; flex-shrink: 0; } .explorer-search-input { flex: 1; border: none; background: transparent; font-size: var(--fs-base); color: var(--text-primary); outline: none; font-family: var(--font-mono); min-width: 0; } .explorer-search-input::placeholder { color: var(--text-tertiary); font-family: var(--font-body); } .explorer-search-btn { flex-shrink: 0; padding: var(--space-1) var(--space-3); background: var(--ovo-mint); color: #fff; font-weight: 600; border: none; border-radius: 9999px; cursor: pointer; font-size: var(--fs-sm); white-space: nowrap; transition: opacity 0.15s; } .explorer-search-btn:hover:not(:disabled) { opacity: 0.85; } .explorer-search-btn:disabled { opacity: 0.35; cursor: not-allowed; } .explorer-hint { font-size: var(--fs-xs); color: var(--text-tertiary); text-align: center; margin: 0; } /* Résultat identité */ .explorer-result-wrap { width: 100%; max-width: 600px; margin-top: var(--space-5); } .explorer-result-card { padding: var(--space-4); border-radius: var(--radius-lg); } .explorer-result-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .explorer-result-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ovo-mint); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; flex-shrink: 0; } .explorer-result-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); } .explorer-result-tag { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; margin-top: 2px; } .trust-pending { background: rgba(160,160,160,0.18); color: var(--text-secondary); } .explorer-result-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); font-size: var(--fs-sm); margin: 0 0 var(--space-3); } .explorer-result-fields dt { color: var(--text-tertiary); font-weight: 500; } .explorer-result-fields dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; } .explorer-result-fields code { font-size: var(--fs-xs); } .explorer-muted { color: var(--text-tertiary) !important; } .explorer-stub-note { font-size: var(--fs-xs); color: var(--text-tertiary); border-top: 1px solid var(--border-glass); padding-top: var(--space-2); margin: 0; } /* Bouton d'entrée depuis l'onboarding */ .explorer-entry-card { text-align: center; } /* ── BottomBar root wrapper ─────────────────────────────────────────── */ /* Toujours dans le DOM (hydration-safe) — invisible tant que l'identité */ /* n'est pas chargée. bottom-bar-root--visible bascule via signal Leptos. */ .bottom-bar-root { display: none; } .bottom-bar-root--visible { display: contents; } /* ── Profile selector header ─────────────────────────────────────── */ .profile-selector-header { display: flex; align-items: center; justify-content: space-between; } /* ── Hub identity panel ──────────────────────────────────────────── */ .hub-panel { display: flex; flex-direction: column; padding: var(--space-4); gap: var(--space-3); } .hub-identity { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; } .hub-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ovo-mint); color: #0F172A; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; flex-shrink: 0; } .hub-identity-info { flex: 1; min-width: 0; } .hub-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-ulid { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); display: block; margin-top: 2px; } .hub-divider { height: 1px; background: var(--border-glass); margin: 0 calc(-1 * var(--space-4)); } .hub-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .hub-nav-item { display: flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-2); background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; text-align: center; } .hub-nav-item:hover { border-color: var(--ovo-mint); background: rgba(0,211,166,0.08); } .hub-nav-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); } .hub-actions { display: flex; flex-direction: column; gap: var(--space-2); } .hub-action-item { width: 100%; padding: var(--space-2) var(--space-3); background: none; border: 1px solid var(--border-glass); border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); text-align: left; transition: color 150ms ease, border-color 150ms ease; } .hub-action-item:hover { color: var(--text-primary); border-color: var(--border-glass); } .hub-action-danger { color: #e05260 !important; border-color: rgba(224,82,96,0.35) !important; } .hub-action-danger:hover { color: #ff6b7a !important; border-color: rgba(224,82,96,0.7) !important; background: rgba(224,82,96,0.08) !important; } /* ── Écran de verrouillage session ───────────────────────────────── */ .session-lock-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.85); backdrop-filter: blur(24px) saturate(160%); } .session-lock-card { width: min(400px, 92vw); background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-xl); padding: var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: 0 24px 64px rgba(0,0,0,0.5); } .session-lock-icon { width: 52px; height: 52px; border-radius: 9999px; background: rgba(224,82,96,0.15); border: 1px solid rgba(224,82,96,0.3); display: flex; align-items: center; justify-content: center; align-self: center; font-size: 22px; color: #e05260; } .session-lock-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); text-align: center; margin: 0; } .session-lock-subtitle { font-size: var(--fs-sm); color: var(--text-secondary); text-align: center; margin: 0; line-height: 1.5; } .session-lock-identity { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); border: 1px solid var(--border-glass); } .session-lock-avatar { width: 36px; height: 36px; border-radius: 9999px; background: var(--ovo-mint); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: #0f172a; flex-shrink: 0; } .session-lock-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); } .session-lock-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } .session-lock-logout-link { background: none; border: none; cursor: pointer; font-size: var(--fs-xs); color: var(--text-tertiary); text-align: center; padding: var(--space-1); transition: color 150ms ease; } .session-lock-logout-link:hover { color: #e05260; } /* ── Bouton "Nouveau profil" désactivé ───────────────────────────── */ .profile-selector-add:disabled { opacity: 0.45; cursor: not-allowed; } /* ── /me page — state machine ────────────────────────────────────── */ .me-cards-section--hidden, .me-form-section--hidden { display: none; } .me-cards-section { padding: var(--space-3) 0 var(--space-5); } .me-cards-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .me-cards-header h3 { margin: 0; font-size: var(--fs-lg); } .me-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); } /* ── ProfileCard ─────────────────────────────────────────────────── */ .profile-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4); background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); cursor: pointer; text-align: center; transition: border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease, opacity 200ms ease, transform 200ms ease; user-select: none; } .profile-card:hover { border-color: var(--ovo-mint); box-shadow: var(--elevation-2); } .profile-card:focus-visible { outline: 2px solid var(--ovo-mint); outline-offset: 2px; } .profile-card--selected { border-color: var(--ovo-mint); box-shadow: 0 0 0 2px var(--ovo-mint), var(--elevation-3); transform: scale(1.02); z-index: 1; } .profile-card--blurred { filter: blur(4px); opacity: 0.5; pointer-events: none; } .profile-card-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ovo-mint); color: #0F172A; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; flex-shrink: 0; } .profile-card-info { flex: 1; } .profile-card-name { font-weight: 600; font-size: var(--fs-base); color: var(--text-primary); } .profile-card-org { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; } .profile-card-slot { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); } /* ── Detail glass panel ──────────────────────────────────────────── */ .me-detail-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-glass); position: sticky; top: 0; background: var(--surface-glass); backdrop-filter: blur(20px) saturate(180%); z-index: 1; } .me-detail-header h3 { margin: 0; font-size: var(--fs-base); font-weight: 600; } .me-detail-body { padding: var(--space-4); } .profile-detail-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; } .profile-detail-fields dt { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: 500; } .profile-detail-fields dd { font-size: var(--fs-sm); color: var(--text-primary); margin: 0; word-break: break-word; } /* ── Wallet section on /me ───────────────────────────────────────── */ .me-wallet-section { margin-top: var(--space-5); } .me-wallet-section h3 { margin-bottom: var(--space-3); } /* ── Shared helpers ──────────────────────────────────────────────── */ .me-back-btn { margin-bottom: var(--space-3); } .btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); } .stat-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin: 2px 0 var(--space-2); } .profile-selector-add:disabled:hover { color: var(--text-muted); border-color: var(--border-glass); } /* ── Onboarding 3-step ─────────────────────────────────────────────────── */ .onboarding-step-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ovo-mint); background: color-mix(in srgb, var(--ovo-mint) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ovo-mint) 30%, transparent); border-radius: 99px; padding: 0.2rem 0.75rem; margin-bottom: 0.75rem; } .btn-row { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; } .btn-row > * { flex: 1; } /* ── Photo de profil (step 2) ──────────────────────────────────────────── */ .profile-photo-label { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 1rem; } .profile-avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--ovo-mint) 20%, var(--surface-glass)); border: 2px solid var(--ovo-mint); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--ovo-mint); transition: opacity 150ms; } .profile-avatar-placeholder:hover { opacity: 0.8; } .profile-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ovo-mint); } .profile-photo-hint { font-size: 0.75rem; color: var(--text-tertiary); } /* ── Progress glass ────────────────────────────────────────────────────── */ .progress-glass { position: fixed; bottom: calc(var(--bottombar-h, 56px) + 1rem); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 2rem)); background: var(--surface-glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--border-glass); border-radius: 1rem; padding: 1rem 1.25rem; z-index: 500; box-shadow: 0 8px 32px rgba(0,0,0,0.25); animation: progress-glass-in 200ms ease; } @keyframes progress-glass-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .progress-glass-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.75rem; } .progress-glass-steps { display: flex; flex-direction: column; gap: 0.4rem; } .progress-step { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; transition: opacity 200ms; } .progress-step--pending { opacity: 0.35; } .progress-step--active { opacity: 1; } .progress-step--done { opacity: 0.7; } .progress-step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; background: var(--surface-base); border: 1px solid var(--border-glass); color: var(--text-secondary); } .progress-step--active .progress-step-num { background: var(--ovo-mint); border-color: var(--ovo-mint); color: #0a1628; } .progress-step--done .progress-step-num { background: color-mix(in srgb, var(--ovo-mint) 20%, transparent); border-color: var(--ovo-mint); color: var(--ovo-mint); } .progress-step-label { flex: 1; font-size: 0.82rem; color: var(--text-primary); } .progress-step--pending .progress-step-label { color: var(--text-tertiary); } .progress-step-icon { font-size: 0.82rem; color: var(--ovo-mint); width: 1.2rem; text-align: center; } /* ── Modal overlay ─────────────────────────────────────────────────────── */ .ovo-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 600; } .ovo-modal { background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: 1rem; padding: 1.5rem; width: min(420px, calc(100vw - 2rem)); box-shadow: 0 8px 32px rgba(0,0,0,0.35); animation: progress-glass-in 180ms ease; } .ovo-modal-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; } .ovo-modal-body { /* layout handled by children */ } /* ── CreerIdBox — zones public / privé ────────────────────────────────── */ .creer-id-zone { border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border-glass); } .creer-id-zone-public { background: color-mix(in srgb, var(--surface-base, #0a1628) 60%, transparent); border-color: var(--border-glass); } .creer-id-zone-private { background: color-mix(in srgb, var(--ovo-mint) 5%, var(--surface-base, #0a1628)); border-color: color-mix(in srgb, var(--ovo-mint) 30%, transparent); } .creer-id-zone-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.35rem; } .creer-id-zone-private .creer-id-zone-label { color: var(--ovo-mint); } .creer-id-lock-icon { font-size: 0.85rem; } .creer-id-zone-private-hint { font-size: 0.78rem; color: var(--text-secondary); font-style: italic; margin: 0 0 0.75rem; } .creer-id-private-fields { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; } .creer-id-private-field { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-secondary); opacity: 0.65; } .creer-id-lock-icon-sm { font-size: 0.65rem; } .creer-id-private-field-label { font-style: italic; } /* ── Sélecteur type d'entité (pill buttons) ────────────────────────────── */ .creer-id-entity-type { margin-bottom: 0.85rem; } .creer-id-entity-label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.4rem; } .creer-id-entity-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; } .entity-pill { padding: 0.3rem 0.75rem; border-radius: 99px; border: 1px solid var(--border-glass); background: transparent; color: var(--text-secondary); font-size: 0.78rem; cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; } .entity-pill:hover { border-color: color-mix(in srgb, var(--ovo-mint) 50%, transparent); color: var(--text-primary); } .entity-pill--active { background: color-mix(in srgb, var(--ovo-mint) 15%, transparent); border-color: var(--ovo-mint); color: var(--ovo-mint); font-weight: 600; } /* ── Mot de passe — hint force ─────────────────────────────────────────── */ .password-strength-hint { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.6rem; line-height: 1.4; } /* ── Modal export confirm hint ─────────────────────────────────────────── */ .creer-id-export-confirm-hint { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════ * SYSTÈME DE DESIGN — passation Claude Design * Aucune règle ici ne touche au comportement : uniquement l'allure. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Le mono marque CE QUI VIENT DE LA CHAÎNE ──────────────────────────── * * Il n'est pas décoratif. Un ULID, une clé publique, un montant OVO, un * numéro de bloc sont GRAVÉS — le mono le dit sans le écrire. Une phrase * rédigée par un humain ne l'est jamais. Le lecteur apprend la règle en * trois écrans et sait ensuite, d'un coup d'œil, ce qui est vérifiable. */ code, pre, .mono, .self-card code, .empty-state-text code { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; letter-spacing: 0; color: var(--text-secondary); background: oklch(100% 0 0 / 0.04); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 0.1em 0.4em; word-break: break-all; } /* Libellés techniques en capitales : l'interlettrage les sépare du corps. */ .form-row-check > span:first-child { font-size: 12.5px; letter-spacing: 0.02em; color: var(--text-secondary); } /* ── Le verre RESPIRE ──────────────────────────────────────────────────── * * Deux halos en dérive lente sous la surface : un mint (H172), un violet * (H265). C'est ce qui distingue une surface vivante d'un rectangle * translucide. Coût réel : deux dégradés flous par panneau, aucun calcul. */ /* ⚠️ NE PAS toucher au `position` de `.glass-panel`. * * Il est en `position: fixed` avec `translateY(100%)` pour rester HORS ÉCRAN * tant qu'il est fermé. Lui poser `position: relative` le remet dans le flux : * le panneau Paramètres s'affichait alors en permanence, ouvert, sur toutes les * pages. Un halo décoratif ne doit jamais changer le positionnement de ce qu'il * décore. */ .self-card, .bcprofile-form { position: relative; isolation: isolate; } .self-card::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; background: radial-gradient(38% 44% at 22% 18%, oklch(70% 0.13 172 / 0.20), transparent 70%), radial-gradient(34% 40% at 82% 78%, oklch(66% 0.12 265 / 0.16), transparent 70%); filter: blur(34px); animation: ovo-derive 17s ease-in-out infinite alternate; } @keyframes ovo-derive { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } } /* Le verre lui-même : une seule recette, partout. */ .self-card, .bcprofile-form { background: var(--bg-glass); backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%); border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); border-radius: 18px; } /* ── L'accent ne sert qu'à une chose ───────────────────────────────────── * Le vert signifie « ancré sur la chaîne », jamais « succès » ni « actif ». * Si un bouton vert pouvait vouloir dire autre chose, la couleur ne * voudrait plus rien dire du tout. */ .btn-primary { background: linear-gradient(180deg, #00d3a6, #009375); box-shadow: var(--glow-accent); color: var(--text-on-mint); font-weight: 600; } .btn-primary:hover { filter: brightness(1.1); } .btn-primary:disabled { opacity: 0.5; box-shadow: none; } /* ── L'information reste, le mouvement disparaît ───────────────────────── * Sous prefers-reduced-motion, les halos s'immobilisent. Ils ne portent * aucune information : les retirer n'enlève rien. */ @media (prefers-reduced-motion: reduce) { .glass-panel::before, .self-card::before { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ * ÉCRAN 01 — ACCUEIL (maquette Claude Design, `Accueil.dc.html`) * * Le parti pris de la maquette : l'accueil est un EXPLORATEUR DE CHAÎNE, * pas un écran de connexion. La recherche est l'objet principal ; les deux * portes d'entrée viennent en dessous. Un visiteur sans identité voit donc * d'abord ce que le produit sait montrer, pas ce qu'il lui réclame. * ═══════════════════════════════════════════════════════════════════════ */ .ovo-hero { max-width: 760px; margin: 0 auto; padding: 56px 20px 40px; text-align: center; } /* Puce de section : 10px capitales, interlettrage large. En dessous de 11px * on ne descend PAS à --text-muted (3,2:1) — contrat de contraste. */ .ovo-eyebrow { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ovo-mint); border: 1px solid var(--border-glass); border-radius: 999px; padding: 5px 12px; margin-bottom: 20px; } .ovo-hero-title { font-family: var(--font-display); font-size: clamp(27px, 5vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 14px; } .ovo-hero-sub { font-size: 15px; line-height: 1.55; color: var(--text-secondary); max-width: 560px; margin: 0 auto 28px; } /* ── Barre de recherche ────────────────────────────────────────────────── * Champ et bouton SOLIDAIRES au-dessus de 400px, découplés en dessous : la * barre unifiée devient illisible sur un écran de téléphone. */ .ovo-search { display: flex; gap: 8px; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-emphasis); border-radius: 999px; padding: 7px 7px 7px 18px; max-width: 620px; margin: 0 auto 18px; transition: border-color 120ms ease-out; } .ovo-search:focus-within { border-color: var(--ovo-mint); } .ovo-search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text-primary); font-size: 14px; min-width: 0; } .ovo-search input::placeholder { color: var(--text-muted); } @media (max-width: 400px) { .ovo-search { flex-direction: column; border-radius: 14px; padding: 12px; } .ovo-search input { width: 100%; } } /* Filtres : ils disent ce que la chaîne SAIT contenir. Informatifs autant * que fonctionnels — on apprend le modèle de données en les lisant. */ .ovo-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ovo-chip { font-size: 12px; color: var(--text-secondary); background: oklch(100% 0 0 / 0.03); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: border-color 120ms ease-out, color 120ms ease-out; } .ovo-chip:hover { border-color: var(--border-glass); color: var(--text-primary); } /* ── Les deux portes ───────────────────────────────────────────────────── * ASYMÉTRIE ASSUMÉE : « créer » porte l'accent et la lueur, « importer » * reste sobre. Un visiteur nouveau est majoritaire ; un utilisateur connu * sait déjà où il va. */ .ovo-portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 900px; margin: 28px auto 0; padding: 0 20px; } .ovo-porte { /* ⚠️ TRANSPARENT. `CreerIdBox` et `ImporterIdBox` portent DÉJÀ leur propre * cadre (`CollapsibleGlass`). Redonner ici un fond et une bordure produisait * une carte dans une carte — deux bordures imbriquées, visibles et laides. * Ce conteneur ne sert qu'à la grille. */ background: transparent; border: 0; padding: 0; text-align: left; } /* L'asymétrie se joue sur la LUEUR, pas sur un second cadre. */ .ovo-porte--accent { filter: drop-shadow(0 0 18px oklch(78% 0.15 172 / 0.16)); } .ovo-porte h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin: 12px 0 8px; } .ovo-porte p { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 18px; } /* Le pied : la promesse, dite une fois, sans emphase. */ .ovo-pied { text-align: center; font-size: 12.5px; color: var(--text-tertiary); margin: 32px auto 0; max-width: 620px; padding: 0 20px 40px; } /* ═══════════════════════════════════════════════════════════════════════ * GLASSE À QUATRE FACES (maquette Claude Design) * * Une surcouche, pas une route. Elle RECOUVRE la page — qu'on voit vivre * derrière le verre — sans y naviguer. Le basculeur ne bouge jamais ; seul * le contenu glisse. Ce qui reste fixe permet de se repérer. * ═══════════════════════════════════════════════════════════════════════ */ .glasse-overlay { position: fixed; inset: 0; z-index: 300; background: oklch(8% 0.01 195 / 0.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; } .glasse-overlay--open { opacity: 1; pointer-events: auto; } .glasse { position: fixed; z-index: 301; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; background: var(--bg-glass); backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%); border-left: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); transform: translateX(100%); transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .glasse--open { transform: translateX(0); } /* En dessous de 600px la glasse prend tout l'écran : une feuille latérale * de 480px sur un téléphone laisse une bande inutile et illisible. */ @media (max-width: 600px) { .glasse { width: 100%; border-left: 0; border-radius: 26px 26px 0 0; } } /* ── Le basculeur — invariant ────────────────────────────────────────── */ .glasse-switch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; } .glasse-switch-btn { font-family: var(--font-display); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 7px 6px; cursor: pointer; transition: color 120ms ease-out, background 120ms ease-out; } .glasse-switch-btn:hover { color: var(--text-primary); } .glasse-switch-btn--on { color: var(--text-on-mint); background: linear-gradient(180deg, #00d3a6, #009375); box-shadow: var(--glow-accent); } /* ── La piste : quatre panneaux côte à côte, un seul visible ─────────── */ .glasse-piste { display: grid; grid-template-columns: repeat(4, 100%); width: 400%; flex: 1 1 auto; transition: transform 180ms ease-out; overflow: hidden; } .glasse-face { overflow-y: auto; padding: 18px; } @media (prefers-reduced-motion: reduce) { .glasse, .glasse-piste, .glasse-overlay { transition: none; } } /* Contenu des faces */ .glasse-titre { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin: 4px 0 4px; } .glasse-sous { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; } .glasse-note { font-size: 13px; line-height: 1.55; color: var(--text-tertiary); margin: 14px 0 0; } .glasse-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; } .glasse-dl dt { font-size: 12px; color: var(--text-tertiary); } .glasse-dl dd { margin: 0; font-size: 12px; } /* Les compteurs : le chiffre porte, le libellé accompagne. */ .glasse-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .glasse-stats > div { background: oklch(100% 0 0 / 0.03); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 10px; text-align: center; } .glasse-stat-v { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 22px; font-weight: 500; color: var(--ovo-mint); letter-spacing: -0.02em; } .glasse-stat-l { display: block; font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; } .glasse-liste { list-style: none; padding: 0; margin: 10px 0 0; } .glasse-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); } .glasse-liste a { text-decoration: none; } .glasse-bloc { font-size: 11px; color: var(--text-tertiary); } /* ============================================================================ * PROGRESS BADGE — composant transverse (L1, claude_design HANDOFF.md §1-2). * Paramétré par la LISTE des crans reçue en props, jamais un nombre fixe codé * en dur. Trois zones de couleur : en chemin = --state-pending, "acquis" * (COMMITTED, mint atténué) = --state-acquis, "scellé" (BLOCK_SEALED, * --ovo-mint plein + ◆). Échec (REJECTED) = --state-stale, ambre, JAMAIS * rouge, jamais le mot "erreur". * * Les tokens --state-* sont posés une seule fois, dans le :root universel de * design-tokens.css (comme --ovo-mint) : même valeur en clair, en auto-sombre * et en sombre forcé. Aucun repli inline ici. * ============================================================================ */ .progress-badge { display: flex; flex-direction: column; gap: var(--space-3); } .progress-badge-crans { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .progress-badge-cran { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 500; border: 1px solid transparent; transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out; } .progress-badge-label { font-family: var(--font-body); } /* Pas encore atteint : contour discret, aucune couleur d'état. */ .progress-badge-cran--en-chemin { color: var(--text-muted); background: oklch(100% 0 0 / 0.04); border-color: var(--border-subtle); } /* Jalon intermédiaire atteint (consensus lancé / quorum atteint) : rempli, * toujours dans la teinte "pending" — le mint reste réservé à acquis/scellé. */ .progress-badge-cran--atteint { color: var(--state-pending-text); background: var(--state-pending-bg); border-color: var(--state-pending-border); } .progress-badge-cran--acquis { color: var(--state-acquis); background: var(--state-acquis-bg); border-color: var(--state-acquis); } .progress-badge-cran--scelle { color: var(--text-on-mint); background: linear-gradient(180deg, var(--ovo-mint), var(--ovo-mint-deep)); border-color: var(--ovo-mint); box-shadow: var(--glow-accent, 0 0 22px rgba(0, 211, 166, 0.24)); } .progress-badge-marqueur { font-size: 11px; line-height: 1; } /* ── Arrêt (REJECTED) : les crans ATTEINTS passent à l'ambre. Les crans * jamais atteints restent en-chemin — l'arrêt ne "remonte" pas la piste. ── */ .progress-badge--arrete .progress-badge-cran--atteint { color: var(--state-stale-text); background: var(--state-stale-bg); border-color: var(--state-stale); } /* Le DERNIER cran atteint, lui seul, clignote — hors reduced-motion. */ .progress-badge-cran--dernier { animation: progress-badge-clignote 1.1s ease-in-out infinite; } @keyframes progress-badge-clignote { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .progress-badge-arret-libelle { margin: 0; font-size: var(--fs-sm); color: var(--state-stale-text); } .progress-badge-relire { align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; color: var(--text-on-mint); background: linear-gradient(180deg, #00d3a6, #009375); border: none; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); cursor: pointer; } .progress-badge-relire:hover { filter: brightness(1.1); } /* L'information reste, le mouvement disparaît : sous reduced-motion, le * dernier cran atteint reste identifiable SANS clignoter (contour marqué, * statique) et les crans se remplissent sans transition. */ @media (prefers-reduced-motion: reduce) { .progress-badge-cran { transition: none; } .progress-badge-cran--dernier { animation: none; outline: 2px solid var(--state-stale); outline-offset: 2px; } }