@import url('./design-system.css'); @import url('./components.css'); @import url('./pages.css'); /* ═══════════════════════════════════════════════════════════ DESIGN TOKENS — Meal Planner Design System v1.0 ⚠️ Ne modifier que --ui-color (paramétrable par foyer). Tout le reste est fixe. ═══════════════════════════════════════════════════════════ */ :root { /* ── Couleur d'accent (injectée par inject_app_mode()) ── Valeur par défaut sauge, écrasée en inline style sur ou selon le profil connecté. */ --ui-color: #6B8F71; --ui-color-rgb: 107, 143, 113; /* pour rgba() — à mettre à jour en même temps */ /* ── Dérivées automatiques (ne pas modifier) ── */ --accent: var(--ui-color); --accent-surface: color-mix(in srgb, var(--ui-color) 12%, #FDFCF9); --accent-border: color-mix(in srgb, var(--ui-color) 28%, #FDFCF9); --accent-glow: rgba(var(--ui-color-rgb), 0.18); --accent-hover: color-mix(in srgb, var(--ui-color) 88%, #000); /* ── Neutres chauds (FIXES — ne jamais modifier) ── */ --warm-white: #FDFCF9; /* fond app principal */ --warm-50: #F8F5F0; /* fond section, alternance */ --warm-100: #EDE8E0; /* séparateurs, bordures repos */ --warm-200: #D9D2C6; /* bordures actives, input */ --warm-300: #BFB5A5; /* placeholder, désactivé */ --warm-400: #9E9284; /* texte tertiaire */ --warm-500: #7A6E62; /* texte secondaire */ --warm-600: #57504A; /* texte corps */ --warm-700: #3A3530; /* texte primaire doux */ --warm-800: #241F1B; /* titres, quasi-noir */ --warm-900: #12100E; /* noir profond */ /* ── Surfaces (FIXES) ── */ --bg-app: var(--warm-white); --bg-section: var(--warm-50); --bg-card: #FFFFFF; --bg-card-alt: #FDFBF8; --bg-navbar: rgba(253, 252, 249, 0.88); /* ── Texte (FIXES) ── */ --text-primary: var(--warm-800); --text-body: var(--warm-600); --text-secondary: var(--warm-500); --text-tertiary: var(--warm-400); --text-disabled: var(--warm-300); --text-on-accent: #FFFFFF; /* ── Couleurs système (FIXES) ── */ --color-success: #15803D; --color-success-bg: #F0FDF4; --color-success-border: #BBF7D0; --color-warning: #B45309; --color-warning-bg: #FEF6EE; --color-warning-border: #FDE68A; --color-danger: #DC2626; --color-danger-bg: #FEF2F2; --color-danger-border: #FECACA; --color-info: #1D4ED8; --color-info-bg: #EFF6FF; --color-info-border: #BFDBFE; /* ── Radius (style Apple arrondi) ── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; /* ── Ombres douces et chaudes ── */ --shadow-xs: 0 1px 3px rgba(36, 31, 27, 0.06); --shadow-sm: 0 2px 8px rgba(36, 31, 27, 0.08); --shadow-md: 0 6px 24px rgba(36, 31, 27, 0.10); --shadow-lg: 0 16px 48px rgba(36, 31, 27, 0.12); --shadow-card: 0 2px 12px rgba(36, 31, 27, 0.07), 0 0 0 1px rgba(36, 31, 27, 0.04); /* ── Typographie ── */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Courier New', monospace; /* ── Transitions ── */ --t-fast: 140ms; --t-normal: 220ms; --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); } /* ═══════════════════════════════════════════════════════════ TYPOGRAPHIE — Échelle complète ═══════════════════════════════════════════════════════════ */ .t-hero { font-family: var(--font-display); font-size: 40px; font-style: italic; color: var(--text-primary); line-height: 1.1; } .t-h1 { font-family: var(--font-display); font-size: 30px; color: var(--text-primary); line-height: 1.15; } .t-h2 { font-family: var(--font-display); font-size: 22px; color: var(--text-primary); line-height: 1.2; } .t-h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .t-body { font-size: 15px; color: var(--text-body); line-height: 1.7; } .t-small { font-size: 13px; color: var(--text-secondary); } .t-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); } .t-caption { font-size: 11px; font-weight: 500; color: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════ BOUTONS — Tous les variants ═══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; border-radius: var(--r-md); font-family: var(--font-body); font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all var(--t-fast) var(--ease-smooth); letter-spacing: -0.01em; text-decoration: none; line-height: 1; } .btn-primary { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 2px 10px var(--accent-glow); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 18px var(--accent-glow); } .btn-primary:active { transform: scale(0.97); } .btn-secondary { background: var(--accent-surface); color: var(--accent); border: 1.5px solid var(--accent-border); } .btn-secondary:hover { filter: brightness(0.95); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--warm-100); } .btn-ghost:hover { border-color: var(--warm-200); color: var(--text-primary); background: var(--warm-50); } .btn-danger { background: var(--color-danger-bg); color: var(--color-danger); } .btn-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1.5px solid var(--color-warning-border); } .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); } .btn-lg { padding: 16px 28px; font-size: 16px; border-radius: var(--r-lg); } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--r-md); font-size: 17px; } /* ═══════════════════════════════════════════════════════════ CARTES ═══════════════════════════════════════════════════════════ */ .card { background: var(--bg-card); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; } .card-body { padding: 20px; } .card-hover { transition: all var(--t-normal) var(--ease-smooth); cursor: pointer; } .card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════ CHAMPS DE SAISIE ═══════════════════════════════════════════════════════════ */ .input-field { width: 100%; padding: 12px 16px; border: 1.5px solid var(--warm-100); border-radius: var(--r-md); font-family: var(--font-body); font-size: 15px; color: var(--text-primary); background: var(--warm-50); outline: none; transition: all var(--t-fast); } .input-field:focus { border-color: var(--accent); background: white; box-shadow: 0 0 0 4px var(--accent-glow); } .input-field::placeholder { color: var(--text-disabled); } .input-field.input-error { border-color: var(--color-danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10); } .input-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .input-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 5px; } .input-error-msg { font-size: 12px; color: var(--color-danger); margin-top: 5px; } /* ═══════════════════════════════════════════════════════════ BADGES ET TAGS ═══════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; } .badge-accent { background: var(--accent-surface); color: var(--accent); border: 1px solid var(--accent-border); } .badge-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); } .badge-info { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border); } .badge-muted { background: var(--warm-100); color: var(--warm-600); border: 1px solid var(--warm-200); } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; border: 1.5px solid var(--warm-200); color: var(--text-secondary); background: var(--warm-50); cursor: pointer; transition: all var(--t-fast); text-decoration: none; } .tag:hover { background: var(--accent-surface); border-color: var(--accent-border); color: var(--accent); } .tag.active { background: var(--accent); border-color: var(--accent); color: white; } /* ═══════════════════════════════════════════════════════════ BADGE FRIGO (spécifique Meal Planner) ═══════════════════════════════════════════════════════════ */ .frigo-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); } .frigo-pill.full { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); } .frigo-pill.partial { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); } .frigo-pill.empty { background: var(--warm-100); color: var(--text-tertiary); border: 1px solid var(--warm-200); } /* ═══════════════════════════════════════════════════════════ NAVIGATION (navbar) ═══════════════════════════════════════════════════════════ */ .navbar { background: var(--bg-navbar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--r-xl); padding: 8px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(36, 31, 27, 0.06); } .logo-wordmark { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; margin-right: 6px; } .logo-meal { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); line-height: 1; } .logo-planner { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--text-primary); letter-spacing: -0.02em; } .nav-item { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all var(--t-fast); text-decoration: none; white-space: nowrap; } .nav-item:hover { background: var(--warm-100); color: var(--text-primary); } .nav-item.active { background: var(--accent); color: white; box-shadow: 0 2px 8px var(--accent-glow); } @media (max-width: 700px) { .navbar { gap: 3px; padding: 6px 8px; } .nav-item { padding: 8px 10px; font-size: 12px; gap: 4px; } .logo-wordmark { margin-right: 2px; } .logo-meal { font-size: 18px; } .logo-planner { font-size: 13px; } } @media (max-width: 480px) { .nav-item .nav-label { display: none; } } /* ═══════════════════════════════════════════════════════════ BANDEAU AJAX (showBanner) ═══════════════════════════════════════════════════════════ */ .ajax-banner { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); padding: 10px 24px; border-radius: var(--r-lg); font-family: var(--font-body); font-size: 14px; font-weight: 600; z-index: 9999; box-shadow: var(--shadow-md); transition: opacity 0.3s var(--ease-smooth); white-space: nowrap; } .ajax-banner--success { background: var(--color-success); color: white; } .ajax-banner--error { background: var(--color-danger); color: white; } .ajax-banner--warning { background: var(--color-warning); color: white; } /* ═══════════════════════════════════════════════════════════ LAYOUT APP (alignement charte graphique) ═══════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } body { margin: 0; color: var(--text-primary); font-family: var(--font-body); line-height: 1.55; background: radial-gradient(circle at 84% 14%, rgba(var(--ui-color-rgb), 0.12), transparent 20%), radial-gradient(circle at 16% 82%, rgba(36, 31, 27, 0.04), transparent 22%), linear-gradient(180deg, var(--bg-app) 0%, var(--warm-50) 100%); } .app-navbar { margin: 12px auto 0; position: sticky; top: 0; z-index: 1000; width: min(1080px, calc(100% - 28px)); border: 1px solid rgba(36, 31, 27, 0.06); } .page-wrap { width: min(1080px, calc(100% - 28px)); margin: 12px auto 28px; } @media (max-width: 700px) { .app-navbar, .page-wrap { width: calc(100% - 16px); } }