/* ============================================================ Design System Premium — 9 PWAs macalculatriceenligne.com Inspired by Linear / Vercel / Stripe Light mode only. Mobile-first. Dark mode forbidden. ------------------------------------------------------------ Usage: load AFTER the app's own CSS (app.css) to override. Activate per-app palette by setting class on : .app-bilan-sante, .app-grossesse, .app-rh-pro, .app-interets-legaux, .app-simulateur-ir, .app-electricien-nfc, .app-assmat, .app-finance-retraite, .app-construction ============================================================ */ :root { /* Neutrals shared across all apps */ --n-0: #FFFFFF; --n-25: #FCFCFD; --n-50: #F7F8FA; --n-100: #EFF1F5; --n-150: #E4E7EC; --n-200: #D0D5DD; --n-300: #98A2B3; --n-500: #667085; --n-700: #344054; --n-900: #101828; --n-950: #0C111C; /* Semantic */ --ds-success: #047857; --ds-success-soft: #D1FAE5; --ds-warning: #B45309; --ds-warning-soft: #FEF3C7; --ds-danger: #B91C1C; --ds-danger-soft: #FEE2E2; --ds-info: #0369A1; --ds-info-soft: #E0F2FE; /* Default app accent (overridden by .app-* classes) */ --app-primary: #0F172A; --app-primary-dark: #020617; --app-primary-soft: #F1F5F9; --app-on-primary: #FFFFFF; /* Typography */ --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ds-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* Font sizes */ --fs-11: 0.6875rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-17: 1.0625rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-44: 2.75rem; --ls-tight: -0.02em; --ls-snug: -0.01em; /* Spacing scale (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-18: 72px; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px; /* Shadows (Linear-style: soft, subtle) */ --sh-xs: 0 1px 2px rgba(16,24,40,.04); --sh-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); --sh-md: 0 4px 8px -2px rgba(16,24,40,.06), 0 2px 4px -2px rgba(16,24,40,.04); --sh-lg: 0 12px 20px -4px rgba(16,24,40,.08), 0 4px 8px -2px rgba(16,24,40,.04); /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 120ms var(--ease); --t-base: 180ms var(--ease); --t-slow: 240ms var(--ease); /* Max width shell (centered column on desktop) */ --ds-shell: 480px; } /* ------------------------------------------------------------ Per-app accent palettes (override --app-*) ------------------------------------------------------------ */ body.app-bilan-sante { --app-primary:#0F766E; --app-primary-dark:#0B524D; --app-primary-soft:#CCFBF1; } body.app-grossesse { --app-primary:#BE185D; --app-primary-dark:#9D174D; --app-primary-soft:#FCE7F3; } body.app-rh-pro { --app-primary:#1E3A8A; --app-primary-dark:#172554; --app-primary-soft:#DBEAFE; } body.app-interets-legaux{ --app-primary:#92400E; --app-primary-dark:#78350F; --app-primary-soft:#FEF3C7; } body.app-simulateur-ir { --app-primary:#1D4ED8; --app-primary-dark:#1E40AF; --app-primary-soft:#DBEAFE; } body.app-electricien-nfc{ --app-primary:#C2410C; --app-primary-dark:#9A3412; --app-primary-soft:#FFEDD5; } body.app-assmat { --app-primary:#6D28D9; --app-primary-dark:#5B21B6; --app-primary-soft:#EDE9FE; } body.app-finance-retraite { --app-primary:#0891B2; --app-primary-dark:#0E7490; --app-primary-soft:#CFFAFE; } body.app-construction { --app-primary:#15803D; --app-primary-dark:#166534; --app-primary-soft:#DCFCE7; } /* ------------------------------------------------------------ Per-app override of legacy CSS variables (so existing screens inherit premium palette automatically) ------------------------------------------------------------ */ /* Bilan Santé */ body.app-bilan-sante { --bsc-primary: var(--app-primary); --bsc-primary-dark: var(--app-primary-dark); --bsc-primary-light: var(--app-primary-soft); --bsc-secondary: #0369A1; --bsc-secondary-light: #E0F2FE; --bsc-accent: #B45309; --bsc-accent-light: #FEF3C7; --bsc-success: var(--ds-success); --bsc-danger: var(--ds-danger); --bsc-danger-light: var(--ds-danger-soft); --bsc-warning: var(--ds-warning); --bsc-text: var(--n-900); --bsc-text-light: var(--n-700); --bsc-text-muted: var(--n-500); --bsc-bg: var(--n-50); --bsc-card: var(--n-0); --bsc-border: var(--n-150); --bsc-radius: var(--r-lg); --bsc-radius-sm: var(--r-md); --bsc-shadow: var(--sh-sm); --bsc-shadow-lg: var(--sh-lg); } /* Grossesse */ body.app-grossesse { --grs-primary: var(--app-primary); --grs-primary-dark: var(--app-primary-dark); --grs-primary-light: var(--app-primary-soft); --grs-accent: #0369A1; --grs-text: var(--n-900); --grs-text-light: var(--n-700); --grs-text-muted: var(--n-500); --grs-bg: var(--n-50); --grs-card: var(--n-0); --grs-border: var(--n-150); --grs-radius: var(--r-lg); --grs-shadow: var(--sh-sm); } /* RH Pro */ body.app-rh-pro { --rh-primary: var(--app-primary); --rh-primary-dark: var(--app-primary-dark); --rh-primary-soft: var(--app-primary-soft); --rh-bg: var(--n-50); --rh-card: var(--n-0); --rh-border: var(--n-150); --rh-text: var(--n-900); --rh-text-muted: var(--n-500); --rh-shadow: var(--sh-sm); --rh-radius: var(--r-lg); } /* Intérêts Légaux */ body.app-interets-legaux { --il-primary: var(--app-primary); --il-primary-dark: var(--app-primary-dark); --il-primary-soft: var(--app-primary-soft); --il-bg: var(--n-50); --il-card: var(--n-0); --il-border: var(--n-150); --il-text: var(--n-900); --il-text-muted: var(--n-500); --il-shadow: var(--sh-sm); --il-radius: var(--r-lg); } /* Simulateur IR */ body.app-simulateur-ir { --ir-primary: var(--app-primary); --ir-primary-dark: var(--app-primary-dark); --ir-primary-soft: var(--app-primary-soft); --ir-bg: var(--n-50); --ir-card: var(--n-0); --ir-border: var(--n-150); --ir-text: var(--n-900); --ir-text-muted: var(--n-500); --ir-shadow: var(--sh-sm); --ir-radius: var(--r-lg); } /* Électricien NFC */ body.app-electricien-nfc { --elec-primary: var(--app-primary); --elec-primary-dark: var(--app-primary-dark); --elec-primary-soft: var(--app-primary-soft); --elec-bg: var(--n-50); --elec-card: var(--n-0); --elec-border: var(--n-150); --elec-text: var(--n-900); --elec-text-muted: var(--n-500); --elec-shadow: var(--sh-sm); --elec-radius: var(--r-lg); } /* Déclaration Assmat */ body.app-assmat { --da-primary: var(--app-primary); --da-primary-dark: var(--app-primary-dark); --da-primary-soft: var(--app-primary-soft); --da-bg: var(--n-50); --da-card: var(--n-0); --da-border: var(--n-150); --da-text: var(--n-900); --da-text-muted: var(--n-500); --da-shadow: var(--sh-sm); --da-radius: var(--r-lg); } /* Finance Retraite Pro */ body.app-finance-retraite { --fir-primary: var(--app-primary); --fir-primary-dark: var(--app-primary-dark); --fir-primary-soft: var(--app-primary-soft); --fir-bg: var(--n-50); --fir-card: var(--n-0); --fir-border: var(--n-150); --fir-text: var(--n-900); --fir-text-muted: var(--n-500); --fir-shadow: var(--sh-sm); --fir-radius: var(--r-lg); } /* Construction / Rénovation Pro */ body.app-construction { --constr-primary: var(--app-primary); --constr-primary-dark: var(--app-primary-dark); --constr-primary-soft: var(--app-primary-soft); --constr-bg: var(--n-50); --constr-card: var(--n-0); --constr-border: var(--n-150); --constr-text: var(--n-900); --constr-text-muted: var(--n-500); --constr-shadow: var(--sh-sm); --constr-radius: var(--r-lg); } /* ------------------------------------------------------------ Base reset + body ------------------------------------------------------------ */ body { font-family: var(--ds-font); font-size: var(--fs-15); line-height: 1.55; color: var(--n-900); background: var(--n-50); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01', 'ss03'; } /* ------------------------------------------------------------ Utility: shell centered on desktop ------------------------------------------------------------ */ @media (min-width: 640px) { body[class*="app-"] { background: var(--n-100); } body[class*="app-"] .bsc-header, body[class*="app-"] .grs-header, body[class*="app-"] .rh-header, body[class*="app-"] .il-header, body[class*="app-"] .ir-header, body[class*="app-"] .elec-header, body[class*="app-"] .da-header { max-width: var(--ds-shell); margin: 0 auto; border-left: 1px solid var(--n-150); border-right: 1px solid var(--n-150); } body[class*="app-"] #screens, body[class*="app-"] .bsc-screen, body[class*="app-"] .grs-screen, body[class*="app-"] .rh-screen, body[class*="app-"] .il-screen, body[class*="app-"] .ir-screen, body[class*="app-"] .elec-screen, body[class*="app-"] .da-screen { max-width: var(--ds-shell); margin: 0 auto; background: var(--n-0); min-height: calc(100dvh - 120px); border-left: 1px solid var(--n-150); border-right: 1px solid var(--n-150); } body[class*="app-"] .bsc-nav, body[class*="app-"] .grs-nav, body[class*="app-"] .rh-nav, body[class*="app-"] .il-nav, body[class*="app-"] .ir-nav, body[class*="app-"] .elec-nav, body[class*="app-"] .da-nav { max-width: var(--ds-shell); left: 50% !important; right: auto !important; transform: translateX(-50%); border-left: 1px solid var(--n-150); border-right: 1px solid var(--n-150); } } /* ------------------------------------------------------------ Typography overrides ------------------------------------------------------------ */ body[class*="app-"] h1 { font-size: var(--fs-24); font-weight: 600; letter-spacing: var(--ls-snug); line-height: 1.3; color: var(--n-900); } body[class*="app-"] h2 { font-size: var(--fs-20); font-weight: 600; letter-spacing: var(--ls-snug); color: var(--n-900); } body[class*="app-"] h3 { font-size: var(--fs-17); font-weight: 600; color: var(--n-900); } body[class*="app-"] h4 { font-size: var(--fs-15); font-weight: 600; color: var(--n-900); } body[class*="app-"] p { color: var(--n-700); line-height: 1.6; } body[class*="app-"] small, body[class*="app-"] .ds-caption { font-size: var(--fs-13); color: var(--n-500); } /* ============================================================ COMPONENTS LIBRARY Prefix: .ds-* (for new components) Also overrides: .bsc-card, .bsc-btn, .bsc-input, etc. ============================================================ */ /* ---- Card ---- */ .ds-card { background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-3); box-shadow: var(--sh-sm); } .ds-card--elevated { box-shadow: var(--sh-md); border-color: var(--n-150); } .ds-card--outlined { box-shadow: none; border-color: var(--n-200); } .ds-card--ghost { background: var(--n-50); border-color: transparent; box-shadow: none; } /* Override legacy cards so they inherit the refined look */ body[class*="app-"] .bsc-card, body[class*="app-"] .grs-card, body[class*="app-"] .rh-card, body[class*="app-"] .il-card, body[class*="app-"] .ir-card, body[class*="app-"] .elec-card, body[class*="app-"] .da-card { background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-3); box-shadow: var(--sh-sm); } /* ---- Card stat (metric) ---- */ .ds-stat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4); background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-lg); box-shadow: var(--sh-sm); position: relative; overflow: hidden; } .ds-stat__icon { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--app-primary-soft); color: var(--app-primary); display: inline-flex; align-items: center; justify-content: center; } .ds-stat__icon svg { width: 18px; height: 18px; } .ds-stat__label { font-size: var(--fs-13); color: var(--n-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .ds-stat__value { font-size: var(--fs-44); font-weight: 600; line-height: 1.05; letter-spacing: var(--ls-tight); color: var(--n-900); font-variant-numeric: tabular-nums; } .ds-stat__sub { font-size: var(--fs-13); color: var(--n-500); } .ds-stat__trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: 600; } .ds-stat__trend--up { color: var(--ds-success); } .ds-stat__trend--down { color: var(--ds-danger); } .ds-stat__trend--flat { color: var(--n-500); } /* Override legacy metric card */ body[class*="app-"] .bsc-metric-card, body[class*="app-"] .grs-metric-card, body[class*="app-"] .rh-metric-card { background: var(--n-0); border: 1px solid var(--n-150); border-top: 1px solid var(--n-150); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s-5) var(--s-4); } body[class*="app-"] .bsc-metric-card .metric-value, body[class*="app-"] .grs-metric-card .metric-value { font-size: var(--fs-32); font-weight: 600; letter-spacing: var(--ls-tight); color: var(--n-900); font-variant-numeric: tabular-nums; } body[class*="app-"] .bsc-metric-card .metric-label, body[class*="app-"] .grs-metric-card .metric-label { font-size: var(--fs-11); color: var(--n-500); } body[class*="app-"] .bsc-metric-card .metric-icon { display: none; } /* retire emoji sans rien casser */ /* Accent stripe on top only for semantic variants */ body[class*="app-"] .bsc-metric-card.danger { border-top: 3px solid var(--ds-danger); } body[class*="app-"] .bsc-metric-card.warning { border-top: 3px solid var(--ds-warning); } body[class*="app-"] .bsc-metric-card.success { border-top: 3px solid var(--ds-success); } body[class*="app-"] .bsc-metric-card.accent { border-top: 3px solid var(--app-primary); } body[class*="app-"] .bsc-metric-card.secondary { border-top: 3px solid var(--ds-info); } /* ---- Callout ---- */ .ds-callout { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); border-left: 3px solid transparent; background: var(--n-50); margin-bottom: var(--s-3); } .ds-callout__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; } .ds-callout__body { flex: 1; min-width: 0; } .ds-callout__title { font-size: var(--fs-14); font-weight: 600; color: var(--n-900); margin-bottom: 2px; } .ds-callout__text { font-size: var(--fs-14); color: var(--n-700); line-height: 1.55; } .ds-callout--info { background: var(--ds-info-soft); border-left-color: var(--ds-info); } .ds-callout--info .ds-callout__icon { color: var(--ds-info); } .ds-callout--success { background: var(--ds-success-soft); border-left-color: var(--ds-success); } .ds-callout--success .ds-callout__icon { color: var(--ds-success); } .ds-callout--warning { background: var(--ds-warning-soft); border-left-color: var(--ds-warning); } .ds-callout--warning .ds-callout__icon { color: var(--ds-warning); } .ds-callout--danger { background: var(--ds-danger-soft); border-left-color: var(--ds-danger); } .ds-callout--danger .ds-callout__icon { color: var(--ds-danger); } .ds-callout--primary { background: var(--app-primary-soft); border-left-color: var(--app-primary); } .ds-callout--primary .ds-callout__icon { color: var(--app-primary); } /* ---- Buttons ---- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--ds-font); font-size: var(--fs-14); font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); white-space: nowrap; user-select: none; } .ds-btn svg { width: 16px; height: 16px; } .ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 18%, transparent); } .ds-btn:active { transform: translateY(1px); } .ds-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .ds-btn--primary { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); } .ds-btn--primary:hover { background: var(--app-primary-dark); border-color: var(--app-primary-dark); color: var(--app-on-primary); } .ds-btn--secondary { background: var(--n-100); color: var(--n-900); border-color: var(--n-150); } .ds-btn--secondary:hover { background: var(--n-150); color: var(--n-900); } .ds-btn--ghost { background: transparent; color: var(--n-700); border-color: transparent; } .ds-btn--ghost:hover { background: var(--n-100); color: var(--n-900); } .ds-btn--danger { background: var(--ds-danger); color: var(--n-0); border-color: var(--ds-danger); } .ds-btn--danger:hover { background: #991B1B; border-color: #991B1B; color: var(--n-0); } .ds-btn--sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-13); border-radius: var(--r-sm); } .ds-btn--lg { height: 48px; padding: 0 var(--s-5); font-size: var(--fs-15); } .ds-btn--xl { height: 56px; padding: 0 var(--s-6); font-size: var(--fs-17); border-radius: var(--r-md); } .ds-btn--block { width: 100%; } /* Override legacy buttons */ body[class*="app-"] .bsc-btn, body[class*="app-"] .grs-btn, body[class*="app-"] .rh-btn, body[class*="app-"] .il-btn, body[class*="app-"] .ir-btn, body[class*="app-"] .elec-btn, body[class*="app-"] .da-btn { background: var(--app-primary); color: var(--app-on-primary); border: 1px solid var(--app-primary); border-radius: var(--r-md); padding: 0 var(--s-4); height: 44px; font-weight: 600; font-size: var(--fs-14); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); text-transform: none; letter-spacing: 0; } body[class*="app-"] .bsc-btn:hover, body[class*="app-"] .grs-btn:hover, body[class*="app-"] .rh-btn:hover, body[class*="app-"] .il-btn:hover, body[class*="app-"] .ir-btn:hover, body[class*="app-"] .elec-btn:hover, body[class*="app-"] .da-btn:hover { background: var(--app-primary-dark); border-color: var(--app-primary-dark); color: var(--app-on-primary); transform: none; } body[class*="app-"] .bsc-btn-secondary, body[class*="app-"] .grs-btn-secondary { background: var(--n-100); color: var(--n-900); border-color: var(--n-150); } body[class*="app-"] .bsc-btn-secondary:hover, body[class*="app-"] .grs-btn-secondary:hover { background: var(--n-150); color: var(--n-900); } body[class*="app-"] .bsc-btn-outline { background: transparent; color: var(--app-primary); border: 1px solid var(--app-primary); } body[class*="app-"] .bsc-btn-outline:hover { background: var(--app-primary-soft); color: var(--app-primary-dark); } /* ---- Inputs ---- */ .ds-field { margin-bottom: var(--s-4); } .ds-field__label { display: block; font-size: var(--fs-13); font-weight: 500; color: var(--n-700); margin-bottom: 6px; } .ds-input, .ds-select, .ds-textarea { width: 100%; height: 44px; padding: 0 var(--s-4); border: 1px solid var(--n-200); border-radius: var(--r-md); background: var(--n-0); color: var(--n-900); font-family: var(--ds-font); font-size: var(--fs-15); font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), box-shadow var(--t-fast); -webkit-appearance: none; appearance: none; } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 12%, transparent); } .ds-textarea { height: auto; min-height: 96px; padding-top: var(--s-3); padding-bottom: var(--s-3); } /* Override legacy inputs */ body[class*="app-"] .bsc-input, body[class*="app-"] .grs-input, body[class*="app-"] .rh-input, body[class*="app-"] .il-input, body[class*="app-"] .ir-input, body[class*="app-"] .elec-input, body[class*="app-"] .da-input, body[class*="app-"] .bsc-select, body[class*="app-"] .grs-select { border: 1px solid var(--n-200); border-radius: var(--r-md); height: 44px; padding: 0 var(--s-4); font-size: var(--fs-15); font-variant-numeric: tabular-nums; background: var(--n-0); color: var(--n-900); transition: border-color var(--t-fast), box-shadow var(--t-fast); } body[class*="app-"] .bsc-input:focus, body[class*="app-"] .grs-input:focus, body[class*="app-"] .rh-input:focus, body[class*="app-"] .il-input:focus, body[class*="app-"] .ir-input:focus, body[class*="app-"] .elec-input:focus, body[class*="app-"] .da-input:focus, body[class*="app-"] .bsc-select:focus, body[class*="app-"] .grs-select:focus { outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 12%, transparent); } body[class*="app-"] .bsc-label, body[class*="app-"] .grs-label, body[class*="app-"] .rh-label { font-size: var(--fs-13); color: var(--n-700); font-weight: 500; text-transform: none; letter-spacing: 0; } /* ---- Badges ---- */ .ds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--fs-11); font-weight: 600; line-height: 1.5; border-radius: var(--r-full); background: var(--n-100); color: var(--n-700); border: 1px solid transparent; letter-spacing: 0.01em; } .ds-badge svg { width: 12px; height: 12px; } .ds-badge--premium { background: var(--app-primary-soft); color: var(--app-primary); } .ds-badge--free { background: var(--ds-success-soft); color: var(--ds-success); } .ds-badge--new { background: var(--ds-info-soft); color: var(--ds-info); } .ds-badge--locked { background: var(--n-100); color: var(--n-700); } .ds-badge--warning { background: var(--ds-warning-soft); color: var(--ds-warning); } .ds-badge--danger { background: var(--ds-danger-soft); color: var(--ds-danger); } .ds-badge--success { background: var(--ds-success-soft); color: var(--ds-success); } /* Override legacy premium tag */ body[class*="app-"] .bsc-tag, body[class*="app-"] .bsc-tag-premium, body[class*="app-"] .grs-tag-premium { background: var(--app-primary-soft); color: var(--app-primary); border-radius: var(--r-full); font-size: var(--fs-11); font-weight: 600; padding: 2px 8px; text-transform: none; letter-spacing: 0.01em; } /* ---- Chip ---- */ .ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s-3); font-size: var(--fs-13); font-weight: 500; color: var(--n-700); background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-full); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); white-space: nowrap; text-decoration: none; } .ds-chip:hover { background: var(--n-100); border-color: var(--n-200); } .ds-chip--active { background: var(--app-primary-soft); color: var(--app-primary); border-color: var(--app-primary); } .ds-chip svg { width: 14px; height: 14px; } /* ---- Progress ring (SVG score) ---- */ .ds-ring { position: relative; width: 160px; height: 160px; display: inline-block; } .ds-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ds-ring__track { fill: none; stroke: var(--n-150); stroke-width: 10; } .ds-ring__progress { fill: none; stroke: var(--app-primary); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 800ms var(--ease); } .ds-ring__progress--success { stroke: var(--ds-success); } .ds-ring__progress--warning { stroke: var(--ds-warning); } .ds-ring__progress--danger { stroke: var(--ds-danger); } .ds-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; } .ds-ring__value { font-size: var(--fs-32); font-weight: 600; color: var(--n-900); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); line-height: 1; } .ds-ring__unit { font-size: var(--fs-13); color: var(--n-500); font-weight: 500; } .ds-ring--locked .ds-ring__progress { stroke: var(--n-200); } .ds-ring--locked .ds-ring__value { color: var(--n-300); } .ds-ring--locked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); } .ds-ring__lock-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; color: var(--n-500); z-index: 2; } /* ---- Metric row (label left / value right) ---- */ .ds-metric-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--n-150); } .ds-metric-row:last-child { border-bottom: none; } .ds-metric-row__label { font-size: var(--fs-14); color: var(--n-500); font-weight: 500; } .ds-metric-row__value { font-size: var(--fs-15); font-weight: 600; color: var(--n-900); font-variant-numeric: tabular-nums; } .ds-metric-row__unit { font-size: var(--fs-13); color: var(--n-500); font-weight: 400; margin-left: 4px; } /* ---- Insight block ---- */ .ds-insight { display: flex; gap: var(--s-3); padding: var(--s-4); background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-md); margin-bottom: var(--s-3); } .ds-insight__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--app-primary); } .ds-insight__title { font-size: var(--fs-14); font-weight: 600; color: var(--n-900); margin-bottom: 4px; } .ds-insight__text { font-size: var(--fs-14); color: var(--n-700); line-height: 1.55; } /* ---- Paywall hero ---- */ .ds-paywall { position: relative; padding: var(--s-6) var(--s-5); background: linear-gradient(180deg, var(--app-primary-soft) 0%, var(--n-0) 100%); border: 1px solid var(--n-150); border-radius: var(--r-xl); margin: var(--s-5) 0; text-align: center; } .ds-paywall__badge-row { display: flex; gap: var(--s-2); justify-content: center; margin-bottom: var(--s-3); flex-wrap: wrap; } .ds-paywall__title { font-size: var(--fs-24); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--n-900); margin-bottom: var(--s-2); line-height: 1.25; } .ds-paywall__sub { font-size: var(--fs-15); color: var(--n-500); max-width: 32ch; margin: 0 auto var(--s-5); line-height: 1.5; } .ds-paywall__teaser { margin: var(--s-4) auto; display: flex; justify-content: center; } .ds-paywall__bullets { list-style: none; padding: 0; margin: 0 0 var(--s-5); text-align: left; display: flex; flex-direction: column; gap: var(--s-2); } .ds-paywall__bullets li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-14); color: var(--n-700); line-height: 1.5; } .ds-paywall__bullets svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--app-primary); margin-top: 1px; } .ds-paywall__proof { display: flex; gap: var(--s-2); padding: var(--s-3); background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-md); margin-bottom: var(--s-4); text-align: left; font-size: var(--fs-13); color: var(--n-500); font-style: italic; line-height: 1.5; } .ds-paywall__proof svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--n-300); margin-top: 2px; } .ds-paywall__cta { width: 100%; margin-bottom: var(--s-3); } .ds-paywall__footer { font-size: var(--fs-11); color: var(--n-500); display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: wrap; } .ds-paywall__footer svg { width: 12px; height: 12px; color: var(--n-300); } .ds-paywall__price-row { display: flex; align-items: baseline; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-2); } .ds-paywall__price { font-size: var(--fs-32); font-weight: 700; color: var(--n-900); letter-spacing: var(--ls-tight); } .ds-paywall__price-note { font-size: var(--fs-13); color: var(--n-500); } /* ---- Legacy premium-wall refinement (applies Linear-style to existing paywalls) ---- */ body[class*="app-"] .bsc-premium-wall, body[class*="app-"] .grs-premium-wall { border-radius: var(--r-xl); overflow: hidden; margin: var(--s-5) 0; background: linear-gradient(180deg, var(--app-primary-soft) 0%, var(--n-0) 60%); border: 1px solid var(--n-150); box-shadow: var(--sh-md); } body[class*="app-"] .bsc-premium-preview { background: transparent; filter: none; opacity: 0.55; padding: var(--s-5) var(--s-4) 0; border-radius: 0; border-bottom: 1px dashed var(--n-200); } body[class*="app-"] .bsc-premium-content { background: transparent; border: none; box-shadow: none; margin-top: 0; padding: var(--s-6) var(--s-5); } body[class*="app-"] .bsc-premium-badge { background: var(--app-primary-soft); color: var(--app-primary); font-size: var(--fs-11); font-weight: 600; text-transform: none; letter-spacing: 0.02em; padding: 4px 10px; border-radius: var(--r-full); margin-bottom: var(--s-3); background-image: none; } body[class*="app-"] .bsc-premium-price-line { font-size: var(--fs-32); font-weight: 700; color: var(--n-900); letter-spacing: var(--ls-tight); margin: var(--s-2) 0 var(--s-4); } body[class*="app-"] .bsc-premium-price-line span { font-size: var(--fs-13); color: var(--n-500); font-weight: 500; } body[class*="app-"] .bsc-premium-benefits li { font-size: var(--fs-14); color: var(--n-700); padding: 6px 0; } body[class*="app-"] .bsc-premium-benefits li::before { color: var(--ds-success); font-size: var(--fs-14); } body[class*="app-"] .bsc-premium-comparison { background: var(--n-50); border: 1px solid var(--n-150); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--fs-13); color: var(--n-500); } body[class*="app-"] .bsc-premium-comparison strong { color: var(--ds-success); } body[class*="app-"] .bsc-rgpd-badge { background: var(--ds-success-soft); color: var(--ds-success); font-weight: 600; font-size: var(--fs-11); padding: 4px 10px; border-radius: var(--r-full); } /* Legacy .bsc-table refinement */ body[class*="app-"] .bsc-table { border: 1px solid var(--n-150); border-radius: var(--r-md); overflow: hidden; background: var(--n-0); } body[class*="app-"] .bsc-table th { background: var(--n-50); color: var(--n-500); font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.05em; border-bottom: 1px solid var(--n-150); padding: var(--s-3) var(--s-4); } body[class*="app-"] .bsc-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--n-150); font-variant-numeric: tabular-nums; color: var(--n-700); } body[class*="app-"] .bsc-table tbody tr:last-child td { border-bottom: none; } body[class*="app-"] .bsc-table tbody tr:hover td { background: var(--n-50); } /* Legacy progress bar — smoother */ body[class*="app-"] .bsc-progress-bar, body[class*="app-"] .grs-progress-bar { background: var(--n-100); border-radius: var(--r-full); height: 8px; } body[class*="app-"] .bsc-progress-fill, body[class*="app-"] .grs-progress-fill { background: var(--app-primary); background-image: none; } body[class*="app-"] .bsc-progress-fill.danger { background: var(--ds-danger); } body[class*="app-"] .bsc-progress-fill.warning { background: var(--ds-warning); } /* Legacy score-ring (bilan-sante) — premium refinement */ body.app-bilan-sante .bsc-score-ring { border: 8px solid var(--n-150); border-top-color: var(--app-primary); width: 140px; height: 140px; } body.app-bilan-sante .bsc-score-ring .score-val { color: var(--n-900); font-size: var(--fs-32); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); } body.app-bilan-sante .bsc-score-ring .score-max { color: var(--n-500); font-size: var(--fs-11); font-weight: 500; } /* Legacy gauge (chart.js wrapper) */ body[class*="app-"] .bsc-gauge-value { font-size: var(--fs-32); font-weight: 700; color: var(--n-900); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; } body[class*="app-"] .bsc-gauge-label { color: var(--n-500); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } /* Result hero / screen title / breadcrumb — common legacy patterns */ body[class*="app-"] .bsc-result-hero, body[class*="app-"] .grs-result-hero { background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--sh-sm); margin-bottom: var(--s-4); text-align: center; } body[class*="app-"] .bsc-result-hero-label { font-size: var(--fs-11); color: var(--n-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-2); } body[class*="app-"] .bsc-result-hero-value { font-size: var(--fs-44); font-weight: 700; color: var(--n-900); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: var(--s-2); } body[class*="app-"] .bsc-screen-title, body[class*="app-"] .grs-screen-title, body[class*="app-"] .rh-screen-title, body[class*="app-"] .il-screen-title, body[class*="app-"] .ir-screen-title, body[class*="app-"] .elec-screen-title, body[class*="app-"] .da-screen-title { font-size: var(--fs-24); font-weight: 600; color: var(--n-900); letter-spacing: var(--ls-snug); margin-bottom: var(--s-4); padding-top: var(--s-3); } body[class*="app-"] .bsc-section, body[class*="app-"] .grs-section { margin-bottom: var(--s-5); } body[class*="app-"] .bsc-breadcrumb, body[class*="app-"] .grs-breadcrumb { margin-bottom: var(--s-3); } body[class*="app-"] .bsc-back-btn, body[class*="app-"] .grs-back-btn { background: transparent; border: none; color: var(--n-500); font-size: var(--fs-13); font-weight: 500; cursor: pointer; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); transition: background var(--t-fast); } body[class*="app-"] .bsc-back-btn:hover, body[class*="app-"] .grs-back-btn:hover { background: var(--n-100); color: var(--n-900); } body[class*="app-"] .bsc-profile-summary, body[class*="app-"] .grs-profile-summary { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--n-50); border: 1px solid var(--n-150); border-radius: var(--r-md); margin-bottom: var(--s-4); font-size: var(--fs-13); color: var(--n-500); } body[class*="app-"] .bsc-profile-summary span, body[class*="app-"] .grs-profile-summary span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: var(--n-700); font-weight: 500; } body[class*="app-"] .bsc-profile-summary span + span::before, body[class*="app-"] .grs-profile-summary span + span::before { content: '·'; color: var(--n-300); margin-right: 4px; } /* Empty state refinement */ body[class*="app-"] .bsc-empty-state, body[class*="app-"] .grs-empty-state { text-align: center; padding: var(--s-8) var(--s-4); background: var(--n-50); border: 1px dashed var(--n-200); border-radius: var(--r-lg); color: var(--n-500); } body[class*="app-"] .bsc-empty-state p, body[class*="app-"] .grs-empty-state p { margin-bottom: var(--s-3); font-size: var(--fs-14); color: var(--n-500); } /* Sex selector / activity / goal grids — quietly refined */ body[class*="app-"] .bsc-sex-btn, body[class*="app-"] .bsc-activity-btn, body[class*="app-"] .bsc-goal-btn, body[class*="app-"] .grs-sex-btn, body[class*="app-"] .grs-goal-btn { background: var(--n-0); border: 1px solid var(--n-200); color: var(--n-700); border-radius: var(--r-md); font-size: var(--fs-13); font-weight: 500; padding: var(--s-3) var(--s-2); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); cursor: pointer; font-family: var(--ds-font); } body[class*="app-"] .bsc-sex-btn:hover, body[class*="app-"] .bsc-activity-btn:hover, body[class*="app-"] .bsc-goal-btn:hover, body[class*="app-"] .grs-sex-btn:hover, body[class*="app-"] .grs-goal-btn:hover { background: var(--n-50); border-color: var(--n-300); } body[class*="app-"] .bsc-sex-btn.active, body[class*="app-"] .bsc-activity-btn.active, body[class*="app-"] .bsc-goal-btn.active, body[class*="app-"] .grs-sex-btn.active, body[class*="app-"] .grs-goal-btn.active { background: var(--app-primary-soft); border-color: var(--app-primary); color: var(--app-primary); } body[class*="app-"] .bsc-sex-selector, body[class*="app-"] .grs-sex-selector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } body[class*="app-"] .bsc-activity-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); } body[class*="app-"] .bsc-goal-grid, body[class*="app-"] .grs-goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } /* Onboarding modal refinement */ body[class*="app-"] .bsc-onboarding-card, body[class*="app-"] .grs-onboarding-card { background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-xl); box-shadow: var(--sh-lg); } /* ---- Table premium ---- */ .ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-md); overflow: hidden; } .ds-table th, .ds-table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--n-150); font-variant-numeric: tabular-nums; } .ds-table th { font-size: var(--fs-11); font-weight: 600; color: var(--n-500); text-transform: uppercase; letter-spacing: 0.05em; background: var(--n-50); } .ds-table tbody tr:last-child td { border-bottom: none; } .ds-table tbody tr:hover td { background: var(--n-50); } .ds-table td.num, .ds-table th.num { text-align: right; } /* Apply premium style to existing tables inside apps */ body[class*="app-"] .bsc-screen table, body[class*="app-"] .grs-screen table, body[class*="app-"] .rh-screen table, body[class*="app-"] .il-screen table, body[class*="app-"] .ir-screen table, body[class*="app-"] .elec-screen table, body[class*="app-"] .da-screen table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-md); overflow: hidden; margin: var(--s-3) 0; } body[class*="app-"] .bsc-screen table th, body[class*="app-"] .grs-screen table th, body[class*="app-"] .rh-screen table th, body[class*="app-"] .il-screen table th, body[class*="app-"] .ir-screen table th, body[class*="app-"] .elec-screen table th, body[class*="app-"] .da-screen table th { padding: var(--s-3) var(--s-4); text-align: left; font-size: var(--fs-11); font-weight: 600; color: var(--n-500); text-transform: uppercase; letter-spacing: 0.05em; background: var(--n-50); border-bottom: 1px solid var(--n-150); } body[class*="app-"] .bsc-screen table td, body[class*="app-"] .grs-screen table td, body[class*="app-"] .rh-screen table td, body[class*="app-"] .il-screen table td, body[class*="app-"] .ir-screen table td, body[class*="app-"] .elec-screen table td, body[class*="app-"] .da-screen table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--n-150); font-variant-numeric: tabular-nums; color: var(--n-700); } body[class*="app-"] .bsc-screen table tbody tr:last-child td, body[class*="app-"] .grs-screen table tbody tr:last-child td, body[class*="app-"] .rh-screen table tbody tr:last-child td { border-bottom: none; } body[class*="app-"] .bsc-screen table tbody tr:hover td, body[class*="app-"] .grs-screen table tbody tr:hover td { background: var(--n-50); } /* ---- App header premium ---- */ .ds-app-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: var(--s-3); height: 56px; padding: 0 var(--s-4); background: color-mix(in srgb, var(--n-0) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--n-150); } .ds-app-header__title { flex: 1; font-size: var(--fs-15); font-weight: 600; color: var(--n-900); text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-app-header .ds-btn { flex-shrink: 0; } /* Override legacy headers */ body[class*="app-"] .bsc-header, body[class*="app-"] .grs-header, body[class*="app-"] .rh-header, body[class*="app-"] .il-header, body[class*="app-"] .ir-header, body[class*="app-"] .elec-header, body[class*="app-"] .da-header { height: 56px; padding: 0 var(--s-4); background: color-mix(in srgb, var(--n-0) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--n-150); box-shadow: none; } body[class*="app-"] .bsc-header-title, body[class*="app-"] .grs-header-title, body[class*="app-"] .rh-header-title { font-size: var(--fs-15); font-weight: 600; color: var(--n-900); } body[class*="app-"] .bsc-header-logo span:first-child, body[class*="app-"] .grs-header-logo span:first-child { /* discreetly shrink emoji logo in header — not hidden, still branding-safe */ font-size: 1.1rem; filter: grayscale(0.2); } /* ---- Bottom nav premium ---- */ body[class*="app-"] .bsc-nav, body[class*="app-"] .grs-nav, body[class*="app-"] .rh-nav, body[class*="app-"] .il-nav, body[class*="app-"] .ir-nav, body[class*="app-"] .elec-nav, body[class*="app-"] .da-nav { height: 64px; background: var(--n-0); border-top: 1px solid var(--n-150); box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0); } body[class*="app-"] .bsc-nav-item, body[class*="app-"] .grs-nav-item, body[class*="app-"] .rh-nav-item, body[class*="app-"] .il-nav-item, body[class*="app-"] .ir-nav-item, body[class*="app-"] .elec-nav-item, body[class*="app-"] .da-nav-item { color: var(--n-500); font-size: var(--fs-11); font-weight: 500; transition: color var(--t-fast); gap: 4px; position: relative; } body[class*="app-"] .bsc-nav-item .nav-icon, body[class*="app-"] .grs-nav-item .nav-icon, body[class*="app-"] .rh-nav-item .nav-icon, body[class*="app-"] .il-nav-item .nav-icon, body[class*="app-"] .ir-nav-item .nav-icon, body[class*="app-"] .elec-nav-item .nav-icon, body[class*="app-"] .da-nav-item .nav-icon { font-size: 1.2rem; line-height: 1; filter: grayscale(0.6) contrast(0.9); transition: filter var(--t-fast), transform var(--t-fast); } body[class*="app-"] .bsc-nav-item.active, body[class*="app-"] .grs-nav-item.active, body[class*="app-"] .rh-nav-item.active, body[class*="app-"] .il-nav-item.active, body[class*="app-"] .ir-nav-item.active, body[class*="app-"] .elec-nav-item.active, body[class*="app-"] .da-nav-item.active { color: var(--app-primary); } body[class*="app-"] .bsc-nav-item.active .nav-icon, body[class*="app-"] .grs-nav-item.active .nav-icon { filter: none; transform: scale(1.05); } body[class*="app-"] .bsc-nav-item.active::before, body[class*="app-"] .grs-nav-item.active::before, body[class*="app-"] .rh-nav-item.active::before, body[class*="app-"] .il-nav-item.active::before, body[class*="app-"] .ir-nav-item.active::before, body[class*="app-"] .elec-nav-item.active::before, body[class*="app-"] .da-nav-item.active::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: var(--r-full); background: var(--app-primary); } /* ---- Drawer (legacy compat) ---- */ body[class*="app-"] .bsc-drawer, body[class*="app-"] .grs-drawer { background: var(--n-0); border-left: 1px solid var(--n-150); box-shadow: var(--sh-lg); border-radius: var(--r-lg) 0 0 var(--r-lg); } body[class*="app-"] .bsc-drawer-section-title, body[class*="app-"] .grs-drawer-section-title { font-size: var(--fs-11); font-weight: 600; color: var(--n-500); text-transform: uppercase; letter-spacing: 0.05em; } body[class*="app-"] .bsc-drawer-item, body[class*="app-"] .grs-drawer-item { color: var(--n-700); font-size: var(--fs-14); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); transition: background var(--t-fast); } body[class*="app-"] .bsc-drawer-item:hover, body[class*="app-"] .grs-drawer-item:hover { background: var(--n-100); text-decoration: none; } body[class*="app-"] .bsc-drawer-item.premium, body[class*="app-"] .grs-drawer-item.premium { color: var(--n-700); } /* ---- Legacy tooltip ---- */ body[class*="app-"] .bsc-tooltip { background: var(--n-900); color: var(--n-0); border-radius: var(--r-md); font-size: var(--fs-11); box-shadow: var(--sh-lg); } /* ---- Dot indicators (onboarding) ---- */ body[class*="app-"] .bsc-dot, body[class*="app-"] .grs-dot { background: var(--n-200); width: 8px; height: 8px; border-radius: var(--r-full); transition: background var(--t-fast), width var(--t-fast); } body[class*="app-"] .bsc-dot.active, body[class*="app-"] .grs-dot.active { background: var(--app-primary); width: 24px; } /* ---- Utilities ---- */ .ds-tabular { font-variant-numeric: tabular-nums; } .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ds-stack > * + * { margin-top: var(--s-3); } .ds-stack-lg > * + * { margin-top: var(--s-5); } .ds-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); } /* ============================================================ Per-screen legacy layout refinements (bilan-sante, grossesse) ============================================================ */ /* --- Dashboard home (bilan-sante) --- */ body.app-bilan-sante .bsc-dashboard { padding: var(--s-4) var(--s-4) var(--s-10); } body.app-bilan-sante .bsc-dashboard-header { margin-bottom: var(--s-5); padding-top: var(--s-3); } body.app-bilan-sante .bsc-dashboard-title { font-size: var(--fs-24); font-weight: 600; letter-spacing: var(--ls-snug); color: var(--n-900); line-height: 1.3; margin-bottom: 4px; } body.app-bilan-sante .bsc-dashboard-subtitle { font-size: var(--fs-13); color: var(--n-500); font-weight: 500; margin: 0; } /* 2x2 metric grid */ body.app-bilan-sante .bsc-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-5); } /* Clickable metric card (home dashboard) */ body.app-bilan-sante .bsc-metric-card--clickable { background: var(--n-0); border: 1px solid var(--n-150); border-top: 1px solid var(--n-150); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-sm); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); position: relative; display: block; text-align: left; min-height: 140px; } body.app-bilan-sante .bsc-metric-card--clickable:hover { border-color: var(--app-primary); box-shadow: var(--sh-md); transform: translateY(-1px); } body.app-bilan-sante .bsc-metric-card--clickable:focus-visible { outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 15%, transparent); } body.app-bilan-sante .bsc-metric-card-label { font-size: var(--fs-11); color: var(--n-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-2); } body.app-bilan-sante .bsc-metric-card-value { font-size: var(--fs-32); font-weight: 700; color: var(--n-900); letter-spacing: var(--ls-tight); line-height: 1.05; margin-bottom: 4px; font-variant-numeric: tabular-nums; } body.app-bilan-sante .bsc-metric-card-value .bsc-unit { font-size: var(--fs-13); color: var(--n-500); font-weight: 500; margin-left: 2px; } body.app-bilan-sante .bsc-metric-card-cat { font-size: var(--fs-13); font-weight: 600; color: var(--n-700); margin-bottom: 4px; } body.app-bilan-sante .bsc-metric-card-note { font-size: var(--fs-11); color: var(--n-500); line-height: 1.4; } body.app-bilan-sante .bsc-metric-card-arrow { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--n-300); font-size: 1.1rem; font-weight: 400; line-height: 1; transition: color var(--t-fast), transform var(--t-fast); } body.app-bilan-sante .bsc-metric-card--clickable:hover .bsc-metric-card-arrow { color: var(--app-primary); transform: translateX(2px); } /* --- Score section (home) --- */ body.app-bilan-sante .bsc-score-section { background: linear-gradient(180deg, var(--app-primary-soft) 0%, var(--n-0) 70%); border: 1px solid var(--n-150); border-radius: var(--r-xl); padding: var(--s-6) var(--s-5); margin-bottom: var(--s-5); text-align: center; box-shadow: var(--sh-sm); position: relative; overflow: hidden; } body.app-bilan-sante .bsc-score-title { font-size: var(--fs-17); font-weight: 600; color: var(--n-900); margin-bottom: var(--s-4); letter-spacing: var(--ls-snug); } body.app-bilan-sante .bsc-score-gauge-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); } body.app-bilan-sante .bsc-score-gauge-container { position: relative; display: inline-block; } body.app-bilan-sante .bsc-score-gauge-container canvas { display: block; } body.app-bilan-sante .bsc-score-number { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4rem; font-weight: 700; color: var(--n-900); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; line-height: 1; } body.app-bilan-sante .bsc-score-number .bsc-score-max { font-size: 0.9rem; color: var(--n-500); font-weight: 500; margin-left: 2px; } body.app-bilan-sante .bsc-score-blurred { filter: blur(6px); opacity: 0.55; color: var(--n-500); } body.app-bilan-sante .bsc-score-interp { font-size: var(--fs-13); font-weight: 600; margin-top: 4px; display: block; } /* Score gate (non-premium home paywall) */ body.app-bilan-sante .bsc-score-gate { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-top: var(--s-3); } body.app-bilan-sante .bsc-score-gate-text { font-size: var(--fs-14); color: var(--n-700); margin: 0; max-width: 28ch; text-align: center; line-height: 1.5; } body.app-bilan-sante .bsc-score-gate .bsc-btn, body.app-bilan-sante .bsc-score-gate .bsc-btn--cta { background: var(--app-primary); color: var(--app-on-primary); border: 1px solid var(--app-primary); border-radius: var(--r-md); padding: 0 var(--s-5); height: 48px; font-size: var(--fs-14); font-weight: 600; box-shadow: var(--sh-sm); width: auto; min-width: 280px; max-width: 100%; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } body.app-bilan-sante .bsc-score-gate .bsc-btn:hover { background: var(--app-primary-dark); border-color: var(--app-primary-dark); transform: translateY(-1px); box-shadow: var(--sh-md); } /* --- Quick actions --- */ body.app-bilan-sante .bsc-quick-actions { margin-bottom: var(--s-5); } body.app-bilan-sante .bsc-quick-actions-title { font-size: var(--fs-15); font-weight: 600; color: var(--n-900); margin-bottom: var(--s-3); letter-spacing: var(--ls-snug); } body.app-bilan-sante .bsc-quick-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } body.app-bilan-sante .bsc-quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--s-4) var(--s-2); background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-md); cursor: pointer; font-family: var(--ds-font); color: var(--n-700); font-size: var(--fs-11); font-weight: 600; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); min-height: 80px; text-transform: none; letter-spacing: 0; } body.app-bilan-sante .bsc-quick-btn:hover { background: var(--app-primary-soft); border-color: var(--app-primary); color: var(--app-primary); } body.app-bilan-sante .bsc-quick-btn-icon { font-size: 1.4rem; line-height: 1; filter: grayscale(0.3); transition: filter var(--t-fast), transform var(--t-fast); } body.app-bilan-sante .bsc-quick-btn:hover .bsc-quick-btn-icon { filter: none; transform: scale(1.08); } body.app-bilan-sante .bsc-quick-btn-label { font-size: var(--fs-11); font-weight: 600; } /* --- Score screen (dedicated premium screen) --- */ body.app-bilan-sante .bsc-score { padding: var(--s-4) var(--s-4) var(--s-10); } body.app-bilan-sante .bsc-screen-header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); padding-top: var(--s-2); } body.app-bilan-sante .bsc-gauge-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; } body.app-bilan-sante .bsc-gauge-container { position: relative; display: inline-block; } body.app-bilan-sante .bsc-gauge-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; } body.app-bilan-sante .bsc-gauge-number { font-size: 3rem; font-weight: 700; letter-spacing: var(--ls-tight); color: var(--n-900); font-variant-numeric: tabular-nums; line-height: 1; } body.app-bilan-sante .bsc-gauge-max { font-size: var(--fs-13); font-weight: 500; color: var(--n-500); } body.app-bilan-sante .bsc-gauge-interp { text-align: center; font-size: var(--fs-15); font-weight: 600; letter-spacing: var(--ls-snug); } /* Lancet badge */ body.app-bilan-sante .bsc-lancet-badge { padding: var(--s-4); border-radius: var(--r-md); border-left-width: 3px !important; margin-top: var(--s-2); } body.app-bilan-sante .bsc-lancet-badge-label { display: block; font-size: var(--fs-14); font-weight: 600; margin-bottom: 4px; letter-spacing: var(--ls-snug); } body.app-bilan-sante .bsc-lancet-badge-desc { font-size: var(--fs-13); color: var(--n-500); line-height: 1.5; margin: 0; } /* Component rows */ body.app-bilan-sante .bsc-components-list { display: flex; flex-direction: column; gap: var(--s-4); } body.app-bilan-sante .bsc-component-row { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--n-150); } body.app-bilan-sante .bsc-component-row:last-child { border-bottom: none; } body.app-bilan-sante .bsc-component-header { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-14); } body.app-bilan-sante .bsc-component-name { font-weight: 500; color: var(--n-700); } body.app-bilan-sante .bsc-component-score { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-snug); } body.app-bilan-sante .bsc-component-footer { display: flex; justify-content: space-between; font-size: var(--fs-11); color: var(--n-500); font-weight: 500; } body.app-bilan-sante .bsc-component-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--n-700); } body.app-bilan-sante .bsc-suggestions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); } body.app-bilan-sante .bsc-suggestion-item { padding: var(--s-3) var(--s-4); background: var(--app-primary-soft); border-radius: var(--r-md); border-left: 3px solid var(--app-primary); } body.app-bilan-sante .bsc-suggestion-item strong { display: block; font-size: var(--fs-14); font-weight: 600; color: var(--n-900); margin-bottom: 4px; } body.app-bilan-sante .bsc-suggestion-item p { font-size: var(--fs-13); color: var(--n-700); line-height: 1.5; margin: 0; } body.app-bilan-sante .bsc-success-note { font-size: var(--fs-14); color: var(--ds-success); font-weight: 500; padding: var(--s-3) var(--s-4); background: var(--ds-success-soft); border-radius: var(--r-md); border-left: 3px solid var(--ds-success); margin: 0; } /* Install banner refinement */ body[class*="app-"] .bsc-install-banner, body[class*="app-"] .grs-install-banner { background: var(--n-0); border: 1px solid var(--n-150); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); margin: var(--s-3) var(--s-4); display: flex; align-items: center; gap: var(--s-3); box-shadow: var(--sh-sm); background-image: linear-gradient(180deg, var(--app-primary-soft) 0%, var(--n-0) 100%); } body[class*="app-"] .bsc-install-banner .install-text strong, body[class*="app-"] .grs-install-banner .install-text strong { font-size: var(--fs-14); font-weight: 600; color: var(--n-900); display: block; margin-bottom: 2px; } body[class*="app-"] .bsc-install-banner .install-text span, body[class*="app-"] .grs-install-banner .install-text span { font-size: var(--fs-11) !important; color: var(--n-500) !important; font-weight: 500; } body[class*="app-"] .bsc-install-banner .install-close, body[class*="app-"] .grs-install-banner .install-close { background: transparent; width: 28px; height: 28px; border-radius: var(--r-full); color: var(--n-500); transition: background var(--t-fast); } body[class*="app-"] .bsc-install-banner .install-close:hover, body[class*="app-"] .grs-install-banner .install-close:hover { background: var(--n-100); color: var(--n-900); } /* YMYL disclaimer (medical) */ body[class*="app-"] .bsc-ymyl-disclaimer, body[class*="app-"] .grs-ymyl-disclaimer { font-size: var(--fs-11); color: var(--n-500); font-style: italic; padding: var(--s-3) var(--s-4); background: var(--n-50); border: 1px dashed var(--n-200); border-radius: var(--r-md); line-height: 1.5; margin: var(--s-4) 0 0; text-align: center; } /* Card title inside bsc-card */ body[class*="app-"] .bsc-card-title, body[class*="app-"] .grs-card-title { font-size: var(--fs-15); font-weight: 600; color: var(--n-900); margin-bottom: var(--s-3); letter-spacing: var(--ls-snug); } /* Full-width button variant (legacy) */ body[class*="app-"] .bsc-btn--full, body[class*="app-"] .bsc-btn-block, body[class*="app-"] .grs-btn--full, body[class*="app-"] .grs-btn-block { width: 100%; margin-bottom: var(--s-2); } body[class*="app-"] .bsc-btn--primary, body[class*="app-"] .grs-btn--primary { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); } body[class*="app-"] .bsc-btn--secondary, body[class*="app-"] .grs-btn--secondary { background: var(--n-100); color: var(--n-900); border-color: var(--n-150); } body[class*="app-"] .bsc-btn--outline, body[class*="app-"] .grs-btn--outline { background: transparent; color: var(--app-primary); border-color: var(--app-primary); } body[class*="app-"] .bsc-btn--outline:hover, body[class*="app-"] .grs-btn--outline:hover { background: var(--app-primary-soft); color: var(--app-primary-dark); } body[class*="app-"] .bsc-btn--cta { min-height: 52px; font-size: var(--fs-15); } body[class*="app-"] .bsc-btn--lg { height: 52px; font-size: var(--fs-15); } /* Link button inside legacy forms */ body[class*="app-"] .bsc-link-btn, body[class*="app-"] .grs-link-btn { color: var(--app-primary); font-weight: 500; text-decoration: underline dotted; text-underline-offset: 2px; } body[class*="app-"] .bsc-link-btn:hover, body[class*="app-"] .grs-link-btn:hover { color: var(--app-primary-dark); } /* Nav with 5 items — ensure even spacing */ body[class*="app-"] .bsc-nav { justify-content: space-around; } /* Mobile responsive at very narrow screens */ @media (max-width: 360px) { body.app-bilan-sante .bsc-metric-grid { grid-template-columns: 1fr; } body.app-bilan-sante .bsc-quick-actions-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Dark mode explicitly forbidden — neutralize any inherited rule ============================================================ */ @media (prefers-color-scheme: dark) and (max-width: 0px) { /* intentionally empty — this query never matches */ }