/* ══════════════════════════════════════════════════════════════════════ NIGHT KITCHEN — Système de design centralisé static/core/css/night_kitchen.css Le thème est piloté par data-theme sur : <- mode sombre (défaut) <- mode clair ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ 1. TOKENS COMMUNS AUX DEUX THÈMES ══════════════════════════════════════════════════════════════════════ */ :root { /* Accent vert — identique dans les deux thèmes */ --g1: #34d399; --g2: #10b981; --g3: #059669; /* Couleurs de notification et accent */ --amber: #fbbf24; --rose: #fb7185; --red: #f87171; --indigo: #818cf8; --blue: #60a5fa; --orange: #fb923c; /* Texte sur fond vert (inverse) */ --on-accent: #041a0a; /* Transitions globales */ --tr: 0.2s ease; --tr-slow: 0.35s ease; --tr-spring: 0.3s cubic-bezier(0.34,1.4,0.64,1); } /* ══════════════════════════════════════════════════════════════════════ 2. THEME SOMBRE (défaut) ══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* Fonds */ --bg-page: #050e08; --bg-card: rgba(3,18,10,0.60); --bg-card-solid: rgba(3,18,10,0.98); --bg-card-subtle: rgba(255,255,255,0.025); --bg-card-hover: rgba(255,255,255,0.04); --bg-navbar: rgba(4,18,10,0.92); --bg-input: rgba(255,255,255,0.04); --bg-input-focus: rgba(255,255,255,0.07); --bg-input-dark: rgba(0,0,0,0.30); --bg-overlay: rgba(0,0,0,0.75); --bg-overlay-soft: rgba(0,0,0,0.55); --bg-overlay-hard: rgba(0,0,0,0.88); --bg-element: rgba(255,255,255,0.05); --bg-element-hov: rgba(255,255,255,0.09); /* Bordures */ --border: rgba(52,211,153,0.10); --border-accent: rgba(52,211,153,0.25); --border-subtle: rgba(255,255,255,0.07); --border-muted: rgba(255,255,255,0.05); --border-input: rgba(255,255,255,0.09); --border-focus: rgba(52,211,153,0.40); /* Textes */ --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.60); --text-muted: rgba(255,255,255,0.35); --text-faint: rgba(255,255,255,0.20); --text-placeholder: rgba(255,255,255,0.22); --text-label: rgba(52,211,153,0.45); /* Glows ambiants */ --glow-green: rgba(16,185,129,0.07); --glow-amber: rgba(245,158,11,0.04); --glow-indigo: rgba(99,102,241,0.04); --glow-rose: rgba(244,63,94,0.05); /* Ombres */ --shadow-card: 0 20px 60px rgba(0,0,0,0.50); --shadow-modal: 0 40px 100px rgba(0,0,0,0.70); --shadow-green: 0 4px 20px rgba(52,211,153,0.25); /* Backdrop blur */ --backdrop: blur(24px) saturate(180%); --backdrop-light: blur(8px); /* Ligne de top-accent */ --accent-line: linear-gradient(90deg,transparent,rgba(52,211,153,0.55),rgba(52,211,153,0.80),rgba(52,211,153,0.55),transparent); --accent-line-soft: linear-gradient(90deg,transparent,rgba(52,211,153,0.25),transparent); --accent-line-rose: linear-gradient(90deg,transparent,rgba(244,63,94,0.50),rgba(244,63,94,0.80),rgba(244,63,94,0.50),transparent); /* Scrollbar */ --scrollbar-thumb: rgba(52,211,153,0.20); /* Overlay photo hero */ --hero-ov-bottom: var(--bg-page); --hero-ov-mid: rgba(3,18,10,0.55); --hero-ov-subtle: rgba(3,18,10,0.20); /* Toggle */ --theme-icon: "☀️"; --theme-label: "Mode clair"; } /* ══════════════════════════════════════════════════════════════════════ 3. THEME CLAIR ══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Fonds */ --bg-page: #f2faf5; --bg-card: rgba(255,255,255,0.85); --bg-card-solid: rgba(255,255,255,0.99); --bg-card-subtle: rgba(255,255,255,0.70); --bg-card-hover: rgba(52,211,153,0.04); --bg-navbar: rgba(240,250,244,0.95); --bg-input: rgba(255,255,255,0.80); --bg-input-focus: rgba(255,255,255,0.99); --bg-input-dark: rgba(255,255,255,0.90); --bg-overlay: rgba(10,31,18,0.55); --bg-overlay-soft: rgba(10,31,18,0.35); --bg-overlay-hard: rgba(10,31,18,0.70); --bg-element: rgba(52,211,153,0.07); --bg-element-hov: rgba(52,211,153,0.13); /* Bordures */ --border: rgba(52,211,153,0.20); --border-accent: rgba(52,211,153,0.45); --border-subtle: rgba(10,31,18,0.08); --border-muted: rgba(10,31,18,0.06); --border-input: rgba(10,31,18,0.12); --border-focus: rgba(52,211,153,0.50); /* Textes */ --text-primary: #0a1f12; --text-secondary: rgba(10,31,18,0.65); --text-muted: rgba(10,31,18,0.45); --text-faint: rgba(10,31,18,0.30); --text-placeholder: rgba(10,31,18,0.30); --text-label: rgba(16,185,129,0.65); /* Glows ambiants */ --glow-green: rgba(16,185,129,0.06); --glow-amber: rgba(245,158,11,0.05); --glow-indigo: rgba(99,102,241,0.04); --glow-rose: rgba(244,63,94,0.05); /* Ombres */ --shadow-card: 0 8px 32px rgba(10,31,18,0.10); --shadow-modal: 0 24px 64px rgba(10,31,18,0.18); --shadow-green: 0 4px 20px rgba(52,211,153,0.25); /* Backdrop blur */ --backdrop: blur(24px) saturate(200%); --backdrop-light: blur(8px); /* Ligne de top-accent */ --accent-line: linear-gradient(90deg,transparent,rgba(52,211,153,0.60),rgba(52,211,153,0.90),rgba(52,211,153,0.60),transparent); --accent-line-soft: linear-gradient(90deg,transparent,rgba(52,211,153,0.35),transparent); --accent-line-rose: linear-gradient(90deg,transparent,rgba(244,63,94,0.40),rgba(244,63,94,0.65),rgba(244,63,94,0.40),transparent); /* Scrollbar */ --scrollbar-thumb: rgba(52,211,153,0.30); /* Toggle */ --theme-icon: "🌙"; --theme-label: "Mode sombre"; /* Scrollbar */ --scrollbar-thumb: rgba(16,185,129,0.30); /* Overlay photo hero */ --hero-ov-bottom: var(--bg-page); --hero-ov-mid: rgba(0,0,0,0.40); --hero-ov-subtle: rgba(0,0,0,0.12); /* Shadows (légèrement différentes en clair) */ --shadow-card: 0 4px 24px rgba(10,31,18,0.12); --shadow-modal: 0 20px 60px rgba(10,31,18,0.25); --shadow-green: 0 4px 20px rgba(52,211,153,0.30); } /* ══════════════════════════════════════════════════════════════════════ 4. RESET GLOBAL ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body, html { background: var(--bg-page) !important; color: var(--text-primary); transition: background var(--tr), color var(--tr); } /* Scrollbar globale */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 4px; height: 4px; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } *::-webkit-scrollbar-track { background: transparent; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* ══════════════════════════════════════════════════════════════════════ 5. COMPOSANTS RÉUTILISABLES ══════════════════════════════════════════════════════════════════════ */ /* Page shell */ .nk-page { min-height: 100vh; background: var(--bg-page); position: relative; overflow-x: hidden; } .nk-page::before { content: ''; position: fixed; top: -250px; left: -200px; width: 900px; height: 900px; background: radial-gradient(circle, var(--glow-green) 0%, transparent 60%); pointer-events: none; z-index: 0; } .nk-page::after { content: ''; position: fixed; bottom: -200px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, var(--glow-amber) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Glass card */ .nk-glass { background: var(--bg-card); border: 1px solid var(--border); border-radius: 28px; backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); box-shadow: var(--shadow-card); position: relative; } .nk-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent-line); opacity: 0.7; } /* Input */ .nk-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 13px; padding: 11px 15px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-primary); outline: none; transition: all var(--tr); } .nk-input::placeholder { color: var(--text-placeholder); } .nk-input:focus { background: var(--bg-input-focus); border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(52,211,153,0.08); } /* Label de champ */ .nk-label { display: block; font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 700; color: var(--text-label); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 7px; } /* Bouton primaire */ .nk-btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--g1), var(--g2)); color: var(--on-accent); font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all var(--tr); box-shadow: var(--shadow-green); } .nk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(52,211,153,0.42); } /* Bouton ghost */ .nk-btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 12px; background: var(--bg-element); border: 1px solid var(--border-subtle); color: var(--text-muted); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; transition: all var(--tr); } .nk-btn-ghost:hover { background: var(--bg-element-hov); color: var(--text-primary); } /* Bouton danger */ .nk-btn-danger { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 13px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18); color: var(--red); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; transition: all var(--tr); text-decoration: none; } .nk-btn-danger:hover { background: rgba(239,68,68,0.16); } /* Chip */ .nk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 700; } .nk-chip-green { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.22); color: var(--g1); } .nk-chip-amber { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.22); color: var(--amber); } .nk-chip-muted { background: var(--bg-element); border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 9px; } /* Séparateur */ .nk-divider { height: 1px; background: var(--border-muted); margin: 20px 0; } /* Section header */ .nk-section-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .nk-section-ico { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.20); } .nk-section-label { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.2px; } /* Empty state */ .nk-empty { text-align: center; padding: 70px 20px; background: var(--bg-card-subtle); border: 1px dashed var(--border-subtle); border-radius: 24px; } .nk-empty-ico { font-size: 52px; opacity: 0.2; margin-bottom: 14px; filter: grayscale(1); } .nk-empty-title { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 800; color: var(--text-muted); } .nk-empty-sub { font-size: 12px; color: var(--text-faint); margin-top: 6px; } /* Modale overlay */ .nk-modal-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg-overlay); backdrop-filter: var(--backdrop-light); display: none; align-items: center; justify-content: center; padding: 16px; } .nk-modal-overlay.open { display: flex; } .nk-modal { background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 28px; padding: 36px 30px 28px; max-width: 360px; width: 100%; box-shadow: var(--shadow-modal); position: relative; overflow: hidden; animation: nkModalIn 0.28s cubic-bezier(0.34,1.4,0.64,1) both; } .nk-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent-line); } @keyframes nkModalIn { from{opacity:0;transform:scale(0.9) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} } /* Contenu interne de la modale (planning_modal.html) */ .nk-modal-icon { text-align: center; font-size: 40px; margin-bottom: 10px; line-height: 1; } .nk-modal-title { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 800; color: var(--text-primary); text-align: center; margin-bottom: 6px; line-height: 1.3; } .nk-modal-sub { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 20px; font-family: 'DM Sans', sans-serif; font-weight: 500; line-height: 1.5; } .nk-modal-stepper { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 22px; } .nk-modal-step { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-element); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--tr); } .nk-modal-step:hover { background: var(--bg-element-hov); border-color: var(--border-focus); color: var(--g1); } .nk-modal-nb { width: 72px; text-align: center; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 14px; padding: 10px 12px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; color: var(--text-primary); outline: none; transition: all var(--tr); } .nk-modal-nb:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(52,211,153,0.10); } .nk-modal-btns { display: flex; gap: 10px; } .nk-modal-cancel { flex: 1; padding: 11px; border-radius: 13px; background: var(--bg-element); border: 1px solid var(--border-subtle); color: var(--text-muted); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all var(--tr); } .nk-modal-cancel:hover { background: var(--bg-element-hov); color: var(--text-primary); } .nk-modal-confirm { flex: 2; padding: 11px; border-radius: 13px; background: linear-gradient(135deg, var(--g1), var(--g2)); border: none; color: var(--on-accent); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 800; cursor: pointer; transition: all var(--tr); box-shadow: 0 4px 16px rgba(52,211,153,0.25); } .nk-modal-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(52,211,153,0.40); } /* Animations */ @keyframes nkUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } .nk-anim-1 { animation: nkUp 0.4s ease 0.04s both; } .nk-anim-2 { animation: nkUp 0.4s ease 0.08s both; } .nk-anim-3 { animation: nkUp 0.4s ease 0.12s both; } .nk-anim-4 { animation: nkUp 0.4s ease 0.16s both; } .nk-anim-5 { animation: nkUp 0.4s ease 0.20s both; } @keyframes nkSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } .nk-spin { animation: nkSpin 1s linear infinite; } /* ══════════════════════════════════════════════════════════════════════ 6. BOUTON TOGGLE THÈME ══════════════════════════════════════════════════════════════════════ */ .nk-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bg-element); border: 1px solid var(--border-subtle); cursor: pointer; transition: all var(--tr); font-size: 16px; line-height: 1; color: var(--text-muted); } .nk-theme-toggle:hover { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.22); color: var(--g1); transform: rotate(15deg); } /* Icône dynamique selon le thème courant */ [data-theme="dark"] .nk-theme-toggle .nk-theme-icon-dark { display: inline; } [data-theme="dark"] .nk-theme-toggle .nk-theme-icon-light { display: none; } [data-theme="light"] .nk-theme-toggle .nk-theme-icon-dark { display: none; } [data-theme="light"] .nk-theme-toggle .nk-theme-icon-light { display: inline; } /* Transition globale au switch de thème */ body, html, .nk-page, .nk-glass, .nk-input, .nk-btn-ghost, .nk-btn-danger, .nk-chip, .nk-empty, .nk-modal { transition: background var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr); } /* ══════════════════════════════════════════════════════════════════════ 7. AJUSTEMENTS SPÉCIFIQUES MODE CLAIR ══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .nk-glass { box-shadow: var(--shadow-card), 0 1px 0 rgba(255,255,255,0.9) inset; } [data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator { filter: none; } [data-theme="light"] select option { background: #ffffff; color: #0a1f12; } /* Labels du toggle dans le menu mobile */ [data-theme="dark"] .nk-theme-label-light { display: none; } [data-theme="dark"] .nk-theme-label-dark { display: inline; } [data-theme="light"] .nk-theme-label-dark { display: none; } [data-theme="light"] .nk-theme-label-light { display: inline; } .nk-theme-label-light { display: none; } .nk-theme-label-dark { display: inline; } /* ══════════════════════════════════════════════════════════════════════ TRANSITION THÈME — Smooth switch dark/light ══════════════════════════════════════════════════════════════════════ */ html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; }