/* ========================================================= LOU MOBILE — Design tokens partagés (Apple / Android / Web) Aucune valeur en dur ailleurs : référencer ces variables. ========================================================= */ :root { /* Couleurs marque */ --lou-green: #0F6E56; --lou-green-light: #E1F5EE; --lou-green-dark: #085041; /* Surfaces */ --lou-bg: #F7F6F2; --lou-card: #FFFFFF; --lou-border: rgba(0,0,0,0.08); /* Texte */ --lou-text-1: #1A1A1A; --lou-text-2: #666660; --lou-text-3: #999992; /* Statuts */ --lou-success: #1D9E75; --lou-warning: #EF9F27; --lou-danger: #E24B4A; --lou-info: #185FA5; /* Badges bg/text */ --lou-badge-green-bg: #E1F5EE; --lou-badge-green-text: #085041; --lou-badge-amber-bg: #FAEEDA; --lou-badge-amber-text: #633806; --lou-badge-red-bg: #FCEBEB; --lou-badge-red-text: #A32D2D; --lou-badge-blue-bg: #E6F1FB; --lou-badge-blue-text: #0C447C; /* Rayons */ --lou-radius-sm: 8px; --lou-radius-md: 12px; --lou-radius-full: 999px; /* Nav */ --lou-nav-height: 60px; /* iPhone safe areas */ --lou-safe-bottom: env(safe-area-inset-bottom, 0px); --lou-safe-top: env(safe-area-inset-top, 0px); } /* ========================================================= THÈME SOMBRE — synchro avec le système desktop Activé via (script inline app.html) ========================================================= */ html.theme-dark, :root.theme-dark { --lou-bg: #0F172A; /* fond global */ --lou-card: #1E293B; /* surfaces cartes */ --lou-border: rgba(255,255,255,0.10); --lou-text-1: #F1F5F9; --lou-text-2: #94A3B8; --lou-text-3: #64748B; /* Marque conserve son vert, mais on assombrit le hover/soft */ --lou-green-light: rgba(13,148,136,0.18); } /* Ajustements ciblés des surfaces hardcodées blanches en dark */ html.theme-dark #lou-detail-panel, html.theme-dark .lou-detail-header, html.theme-dark #lou-detail-body { background: var(--lou-card) !important; color: var(--lou-text-1); } html.theme-dark .cal-day.libre { background: rgba(255,255,255,0.04); color: var(--lou-text-2); } html.theme-dark .lou-back-btn { color: #2DD4BF; } html.theme-dark .lou-back-btn:active { background: rgba(45,212,191,0.12); } html.theme-dark #lou-install-btn { color: var(--lou-text-2); border-color: var(--lou-border); } /* Thème GdF (vert clair) : utilise les couleurs GdF si présent */ html.theme-gdf { --lou-bg: #FDFAF4; --lou-card: #FFFFFF; --lou-text-1: #1F2937; --lou-text-2: #4B5563; --lou-text-3: #6B7280; }