/* ═══════════════════════════════════════════════════════════ NEXUS — THEMES (source unique clair/sombre, 06/07/2026) Charge PARTOUT (base.html + pages autonomes) AVANT les autres styles. Le mode est pose par /static/js/theme.js via (preference profil ou systeme). ═══════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* Surfaces */ --bg-primary: #F8F9FA; --bg-secondary: #FFFFFF; --bg-tertiary: #F1F3F5; --border: rgba(0,0,0,0.07); --border-strong: rgba(0,0,0,0.13); /* Texte */ --text-primary: #0A0A0F; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; /* Accent */ --accent: #6C63FF; --accent-deep: #5A52E5; --accent-light: #EEF2FF; --accent-glow: rgba(108,99,255,0.18); /* Macros */ --protein: #FF6B6B; --carbs: #FFB347; --fat: #4ECDC4; --water: #45B7D1; /* Système */ --success: #34C759; --warning: #FF9F0A; --danger: #FF453A; --success-soft: #E8F8EC; --success-strong: #1B7A33; --danger-soft: #FDECEA; --danger-strong: #B3261E; /* Verre translucide (tab bar, headers flous) */ --surface-glass: rgba(255,255,255,0.92); --header-glass: rgba(248,249,250,0.92); /* Toast (sombre dans les DEUX themes, contraste inverse) */ --toast-bg: #0A0A0F; --toast-text: #FFFFFF; /* Spacing */ --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 40px; /* Radius */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04); --shadow-lg: 0 8px 32px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05); /* Sidebar */ --sidebar-w: 220px; } [data-theme="dark"] { color-scheme: dark; --bg-primary: #0B0E13; --bg-secondary: #151A22; --bg-tertiary: #1E242E; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --text-primary: #F2F4F8; --text-secondary: #9AA3B2; --text-tertiary: #69727F; /* Violet legerement eclairci : meilleure lisibilite sur fond sombre */ --accent: #7D76FF; --accent-deep: #6C63FF; --accent-light: rgba(125,118,255,0.16); --accent-glow: rgba(125,118,255,0.28); --success-soft: rgba(52,199,89,0.16); --success-strong: #5DD97C; --danger-soft: rgba(255,69,58,0.16); --danger-strong: #FF7A70; --surface-glass: rgba(21,26,34,0.92); --header-glass: rgba(11,14,19,0.90); --toast-bg: #262D38; --toast-text: #F2F4F8; /* Ombres renforcees (le noir translucide disparait sur fond sombre) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35); --shadow-lg: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.40); } /* ═══════════════════════════════════════════════════════════ MODE PAYSAGE BLOQUE SUR TELEPHONE (10/07/2026, demande Salvatore) L app n est pas optimisee en horizontal. iOS ignore le verrouillage d orientation des PWA (manifest "orientation": "portrait" = Android seulement) -> voile CSS plein ecran des que : paysage + hauteur de telephone (≤500px) + ecran TACTILE (pointer: coarse — desktop et fenetres redimensionnees exclus). Charge partout via theme.css. ═══════════════════════════════════════════════════════════ */ @media screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { body::after { content: "📱\A\A Tourne ton téléphone\A NexusFit se vit en portrait"; white-space: pre-line; position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--bg-primary); color: var(--text-primary); font-size: 17px; font-weight: 600; line-height: 1.6; padding: 20px; } }